ES7和ES8

1.简介
ES7 是 ECMA-262 标准第 7 版的简称，从 ES6 开始每年发布一个版本，以年份作为名称，因此又称 ECMAScript 2016，简称 ES2016。
ES8 是 ECMA-262 标准第 8 版的简称，从 ES6 开始每年发布一个版本，以年份作为名称，因此又称 ECMAScript 2017，简称 ES2017。

ES7只有2个特性:

• includes()
• List item

指数操作符**

ES8只有2个特性:

• Object.values()
• Object.entries()
• padStart()
• padEnd()
• Object.getOwnPropertyDescriptors()
• Trailing commas in function (函数参数列表结尾允许逗号)
• Async/Await

2.代码

Array.prototype.includes
Array.prototype.includes 就是替代indexOf的方法，用来检查数组中是否存在值

js代码

let arr = ['react', 'angular', 'vue']
if (arr.indexOf('react') !== -1) {
  console.log('Can use React')
}

ES7代码

let str = 'React Quickly'

// Correct
if (str.toLowerCase().includes('react')) {  // true
  console.log('Found "react"')  
}

除了增强了可读性语义化，实际上给开发者返回布尔值，而不是匹配的位置。includes也可以在NaN(非数字)使用。最后 ，includes第二可选参数fromIndex，这对于优化是有好处的，因为它允许从特定位置开始寻找匹配。

例子:

console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

指数操作符
使用自定义递归和Math.pow()进行指数运算
js代码

function calculateExponent(base, exponent){
  if (exponent === 1){
      return base;
  } else {
      return base * calculateExponent(base, exponent - 1);
  }
}
console.log(calculateExponent(7, 3)); // 输出343
console.log(Math.pow(7, 3)); // 输出343

ES7代码

let a = 7 ** 3
console.log(a);  // 输出343

Object.values()
使用Object.keys()遍历对象的属性值，需要通过属性名key去获取属性值
js代码

let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) =>{
    console.log(obj[key]); // 输出1, 2, 3
});

ES8
使用Object.values()遍历对象的属性值，无需使用属性名：

let obj = {a: 1, b: 2, c: 3}
Object.values(obj).forEach(() =>{
    console.log(obj); // 输出1, 2, 3
});

Object.entries()

遍历对象的属性名和属性值：
js代码

let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) => {
      console.log(key + ": " + obj[key]); // 输出a: 1, b: 2, c: 3
})

ES8

let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) =>{
      console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})

字符填充函数padStart 和 padEnd

用于在字符串开头或结尾添加填充字符串

String.prototype.padStart( maxLength [ , fillString ] )
String.prototype.padEnd( maxLength [ , fillString ] )

典型的应用场景
使用 padStart 进行时间格式化。

'8:00'.padStart(5, '0');  // '08:00'
'18:00'.padStart(5, '0');  // '18:00'
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

Async/Await
Async/Await应该是目前最简单的异步方案

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};

var start = async function () {
    // 在这里使用起来就像同步代码那样直观
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start(); // 控制台先输出start，稍等3秒后，输出了end。

基本规则
async 表示这是一个async函数，await只能用在这个函数里面。

await 表示在这里等待promise返回结果了，再继续执行。

await 后面跟着的应该是一个promise对象