码迷,mamicode.com
首页 > 其他好文 > 详细

ES7及ES8的新特性

时间:2018-12-16 23:13:47      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:syn   回调   cts   his   相等   val   标记   原理   数组   

其实最近用的比较多的还是ES6,但是了解新的技术又是必不可少的,大部分都是通过博客和掘金去学习,偶尔会看一些视频并去验证这样的结果;

    • ES7新特性:
      在Es6的基础上增加了三项:求幂运算符(**),Array.prototype.includes()方法、函数作用域中严格模式的变更。

      (1)Array.prototype.include(). 查找一个值在不在数组里;接收两个参数:要搜索的值和搜索的开始索引。当第二个参数被传入时,该方法会从索引处开始往后搜索(默认索引值为0)。若搜索值在数组中存在则返回true,否则返回false。
      与indexOf相比较:
      更加简便(从返回值来说一个是下标一个是值)
      精确性:两个NaN被认为是相等的,即使在NaN === NaN结果是false的情况下。这一点和indexOf()的行为不同,indexOf()严格使用===判断。
      let demo = [1, NaN, 2, 3]

      demo.indexOf(NaN) //-1
      demo.includes(NaN) //true
      includes()只能判断简单类型的数据,对于复杂类型的数据,比如对象类型的数组,二维数组,这些,是无法判断的

      (2)求幂运算符(**)
      3 ** 2 //9。 等同于 Math.pow(3,2); let a = 3; a **= 2 //9


      Es8新特性:
      (1)异步函数(Async functions)
      由于javascript语言的执行环境是单线程的,一般使用回调函数实现异步编程,假如有多个嵌套的话,代码显得很乱;
      Promise,将函数的嵌套改成链式调用;.then(()=>回调方法);
      promise的缺点是:请求任务过多时.then也会相对增加;
      Generator:异步编程机制,在dva中effects中就是使用的这种;函数执行时,返回的是一个指向内部状态的指针对象,必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield表达式(或return语句)为止。换言之,Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。
      function* helloWorldGenerator() {
      yield ‘hello‘;
      yield ‘world‘;
      return ‘ending‘;
      }

      var hw = helloWorldGenerator();
      hw.next()
      // { value: ‘hello‘, done: false }

      hw.next()
      // { value: ‘world‘, done: false }

      hw.next()
      // { value: ‘ending‘, done: true }

      hw.next()
      // { value: undefined, done: true }
      缺点:流程管理不方便;
      async function asyncFunc(params) {
      const result1 = await this.login()
      const result2 = await this.getInfo()
      }
      变体
      异步函数存在以下四种使用形式:
      * 函数声明: async function foo() {}
      * 函数表达式: const foo = async function() {}
      * 对象的方式: let obj = { async foo() {} }
      * 箭头函数: const foo = async () => {}
      并行处理多个异步结果:
      async function asyncFunc() {
      const [result1, result2] = await Promise.all([
      otherAsyncFunc1(),
      otherAsyncFunc2()
      ]);
      console.log(result1, result2);
      }
      async function asyncFunc() {
      try {
      await otherAsyncFunc();
      } catch (err) {
      console.error(err);
      }
      }
      (2)Object.entries()和Object.values()
      将一个具有键值对的数据结构或是数组,返回一个二维数组;
      Object.entries({ one: 1, two: 2 }) //[[‘one‘, 1], [‘two‘, 2]]
      Object.entries([1, 2]) //[[‘0‘, 1], [‘1‘, 2]]注意:键值对中,如果键的值是Symbol,编译时将会被忽略。例如:
      Object.entries({ [Symbol()]: 1, two: 2 }) //[[‘two‘, 2]]

      进行对象属性的遍历:
      let obj = { a: 1, b: 2 };
      for (let [k,v] of Object.entries(obj)) {
      console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
      }

      //输出结果如下:
      ‘a‘: 1
      ‘b‘: 2

      Object.values():工作原理和上面很像,只返回键值对中属性值;返回数组顺序也和上面很像;
      Object.values({ one: 1, two: 2 }) //[1, 2]
      Object.values({ 3: ‘a‘, 4: ‘b‘, 1: ‘c‘ }) //[‘c‘, ‘a‘, ‘b‘]
      (3)字符串填充:padStart和padEnd
      padStart函数通过填充字符串的首部来保证字符串达到固定的长度,反之,padEnd是填充字符串的尾部来保证字符串的长度的。该方法提供了两个参数:字符串目标长度和填充字段,其中第二个参数可以不填,默认情况下使用空格填充。
      ‘Vue‘.padStart(10) //‘ Vue‘
      React‘.padStart(10, ‘Hello‘) //‘HelloReact‘
      填充函数只有在字符长度小于目标长度时才有效,若字符长度已经等于或小于目标长度时,填充字符不会起作用,而且目标长度如果小于字符串本身长度时,字符串也不会做截断处理,只会原样输出。
      (4)Object.getOwnProentyDescriptors()指定属性描述符;
      该方法会返回目标对象中所有属性的属性描述符,该属性必须是对象自己定义的,不能是从原型链继承来的;第二个参数可以是
      该方法返回的描述符,会有两种类型:数据描述符、存取器描述符。返回结果中包含的键可能的值有:configurable、enumerable、value、writable、get、set;
      使用过Object.assign()的同学都知道,assign方法只能拷贝一个属性的值,而不会拷贝它背后的复制方法和取值方法。Object.getOwnPropertyDescriptors()主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。
      http://www.cnblogs.com/zhuanzhuanfe/p/7493433.html。原文地址;

      ES7与ES6相比较而言,两者更加贴近,在ES6基础上做修改。而ES8添加更多的新特性,通过他人的博客了解还不够透彻,只是把精华部分摘取出来,自己理解的比较少;
       

ES7及ES8的新特性

标签:syn   回调   cts   his   相等   val   标记   原理   数组   

原文地址:https://www.cnblogs.com/naniandongzhi/p/10127966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!