ES7、8、9

ES7 新特性

1.Array.prototype.includes()方法

const arr = [1, 3, 5, 2, '8', NaN, -0]
arr.includes(1) // true
arr.includes(1, 2) // false 该方法的第二个参数表示搜索的起始位置，默认为0
arr.includes('1') // false
arr.includes(NaN) // true
arr.includes(+0) // true

ES7之前有两种方法来查找数组中是否包含某一子元素：

• arr.indexOf(元素)：若存在返回元素下标，不存在则为0。内部使用”===”进行判断，对导致NaN的误判

  if (arr.indexOf(el) !== -1) { // 不够语义化
  // ...
  }

  find() 和 findIndex()
  都可发现NaN，弥补了indexOf()的不足。

  arr = [1,4,-5]
  arr.find((a) => a < 0) // -5
  arr.findIndex((a) => a < 0) // 2 ，存在则返回下标

求幂运算符

也叫 指数运算符，具有和Math.pow()等效的计算结果：

console.log(2**10) // 1024
console.log(Math.pow(2,10)) // 1024

ES8新特性

Async/Await

比Promise更优雅的异步方式。是异步编程的一个重大改进，使得我们可以在不阻塞主进程的情况下，使用同步代码来访问异步资源的能力，逻辑更清晰：
请求a链接再请求b链接的写法：

async function foo(){
    try{ // 可以使用try catch
        let response1 = await fetch('https://blog.csdn.net/')
        console.log(response1)
        let response2 = await fetch('https://juejin.im/')
        console.log(response2)
    } catch(err){
        console.log(err)
    }
}
foo()

之前的写法：

fetch('https://blog.csdn.net/')
    .then(response => {
        console.log(response)
        return fetch('https://juejin.im/')
    })
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.log(error)
    })

其他用法：

async function foo(){
    return 'Hello World'
}
foo().then(val=>{
    console.log(val) // 'Hello World'
})

等价于：

async function foo(){
    return Promise.resolve('Hello World')
}
foo().then(val=>{
    console.log(val) // 'Hello World'
})

Object.values()，Object.entries()

ES5有一个Object.keys()是用来返回对象自身的属性的键名的数组。
配套的ES8引入了Object.values()返回自身属性的值的数组；Object.entries()返回键值对数组。
作为遍历一个对象的补充手段，供for…of使用。

const obj = { foo: 'bar', baz: 42 };
Object.values(obj) // ["bar", 42]
const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj) // ["b", "c", "a"] 若属性名为数字，从小到大排列

String padding

新增了两个实例函数 String.prototype.padStart 和 String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

String.padStart(targetLength,[padString])

Object.getOwnPropertyDescriptors()

ES9新特性

for await of

使用for await of遍历时，会等待前一个Promise对象的状态改变后，再遍历到下一个成员。
而for of做不到。

// for await of
function Gen (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(time)
    }, time)
  })
}
async function test () {
  let arr = [Gen(2000), Gen(100), Gen(3000)]
  for await (let item of arr) {
    console.log(Date.now(), item)
  }
}
test()
// 1575536194608 2000
// 1575536194608 100
// 1575536195608 3000

Object Rest Spread

就是ES6的扩展操作符。

Promise.prototype.finally()

在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。

参考资料:盘点ES7、ES8、ES9、ES10新特性