ES7 ES8的新特性

ES7

ES7在ES6的基础上添加三项内容：求幂运算符（**）、Array.prototype.includes()方法、函数作用域中严格模式的变更。

求幂运算符（**），这是一个中缀例子，效仿自Ruby等语法，使用更简洁
Math.pow(3, 2) === 3 ** 2    // 9

Array.prototype.includes()
数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。该方法接受两个参数，分别是查询的数据和初始的查询索引值。
[1, 2, 3].indexOf(3) > -1 // true
等同于：
[1, 2, 3].includes(3) // true
两者的优缺点和使用场景
简便性

includes方法略胜一筹，直接返回bool。indexOf需要返回数组下标，我们需要对下标值在进行操作，进而判断是否在数组中。
精确性
两者这都是通过===进行数据处理，但是对NaN数值的处理行为不同。includes对NaN的处理不会遵循严格模式去处理，所以返回true。indexOf会按照严格模式去处理，返回-1。
[1, 2, NaN].includes(NaN)     // true
[1, 2, NaN].indexOf(NaN)  // -1
使用场景

如果仅仅查找数据是否在数组中，建议使用includes，如果是查找数据的索引位置，建议使用indexOf更好一些

ES8
async、await异步解决方案
提出场景有两个：JS是单线程、优化回调地狱的写法。
this.$http.jsonp('/login', (res) => {
  this.$http.jsonp('/getInfo', (info) => {
    // do something
  })
})
在ES6中为了解决回调的书写方式，引入了Promise的then函数，业务逻辑很多的时候，需要链式多个then函数，语义会变得很不清楚。
new Promise((resolve, reject) => {this.login(resolve)})
.then(() => this.getInfo())
.then(() => {// do something})
.catch(() => { console.log("Error") })
Generator函数应运而生，它只是一个分段执行任务，通过状态指针next分布执行任务，但是流程管理不太方便（每个阶段何时执行不太明了），所以它只是一个中间产物。
const gen = function* () {
  const f1 = yield this.login()
  const f2 = yield this.getInfo()
};
ES8中把async和await变得更加方便，它其实就是Generator的语法糖。async/await是写异步代码的新方式，以前的方法有回调函数和Promise。相比于Promise，它更加简洁，并且处理错误、条件语句、获取中间值都更加方便。
async function asyncFunc(params) {
  const result1 = await this.login()
  const result2 = await this.getInfo()
}
如果想进一步了解async的具体时间，可以参见阮一峰的博客es6.ruanyifeng.com/#docs/async
Object.entries()
该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。（如果目标对象是数组，则会将数组的下标作为键值返回）
Object.entries({ one: 1, two: 2 })    //[['one', 1], ['two', 2]]
Object.extries([1, 3])    //[['0', 1], ['1', 3]]
Object.values()
它的工作原理和Object.entries()方法很像，但是它只返回键值对中的值，结果是一维数组
Object.values({one: 1, two: 2})    // [1, 2]
Object.values({3: 'a', 1: 'b', 2: 'c'}) // ['b', 'c', 'a'] 
Object.extries([1, 3])     //[1, 3]
字符串填充padStart()、padEnd()
ES8提供了新的字符串填充方法，该方法可以使得字符串达到固定长度。它有两个参数，字符串目标长度和填充内容。
'react'.padStart(10, 'm')      //'mmmmmreact'
'react'.padEnd(10, 'm')       //' reactmmmmm'
'react'.padStart(3, 'm')     // 'vue'

ES7

ES8

猜你喜欢