ES7、ES8新特性整理

​ES7

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

• 求幂运算符（**）

Math.pow(2,2); //4
// ES7
2**2 //4

• 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

• 使用场景
  1.查找数据是否在数组中，建议使用includes
  2.查找数据的索引位置，建议使用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()
}

• 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')     // 'react'