参考文献： https://tuobaye.com/2018/11/27/%E7%BB%86%E8%A7%A3JavaScript-ES7-ES8-ES9-%E6%96%B0%E7%89%B9%E6%80%A7/
ES7
1. Array.prototype.includes()方法
[‘a‘, ‘b‘, ‘c‘, ‘d‘].includes(‘b‘) // true [‘a‘, ‘b‘, ‘c‘, ‘d‘].includes(‘b‘, 1) // true [‘a‘, ‘b‘, ‘c‘, ‘d‘].includes(‘b‘, 2) // false
var ary1 = [NaN]; console.log(ary1.indexOf(NaN))//-1 console.log(ary1.includes(NaN))//true
2. 求幂运算符（**）
用**来替代Math.pow。
4 ** 3
等价于
Math.pow(4,3)
let n = 4;
n **= 3;
ES8
1. Async Functions
Async Functions也就是我们常说的Async/Await。Async/Await是一种用于处理JS异步操作的语法糖，可以帮助我们摆脱回调地狱，编写更加优雅的代码。
通俗的理解，async关键字的作用是告诉编译器对于标定的函数要区别对待。当编译器遇到标定的函数中的await关键字时，要暂时停止运行，带到await标定的函数处理完毕后，再进行相应操作。如果该函数fulfilled了，则返回值是resolve value，否则得到的就是reject value。
拿普通的promise写法来对比:
async function asyncFunc() { const result = await otherAsyncFunc(); console.log(result); } // Equivalent to: function asyncFunc() { return otherAsyncFunc() .then(result => { console.log(result); }); }
并行处理多个函数：
async function asyncFunc() { const [result1, result2] = await Promise.all([ otherAsyncFunc1(), otherAsyncFunc2(), ]); console.log(result1, result2); } // Equivalent to: function asyncFunc() { return Promise.all([ otherAsyncFunc1(), otherAsyncFunc2(), ]) .then([result1, result2] => { console.log(result1, result2); }); }
处理错误：
async function asyncFunc() { try { await otherAsyncFunc(); } catch (err) { console.error(err); } } // Equivalent to: function asyncFunc() { return otherAsyncFunc() .catch(err => { console.error(err); }); }
2. SharedArrayBuffer和Atomics
SharedArrayBuffer允许在多个 workers 和主线程之间共享 SharedArrayBuffer 对象的字节。这种共享有两个好处：
API：
构造函数： new SharedArrayBuffer(length)
静态属性： SharedArrayBuffer[Symbol.species]
实例属性： SharedArrayBuffer.prototype.byteLength()
SharedArrayBuffer.prototype.slice(start, end)
Atomics 方法可以用来与其他 workers 进行同步。以下两个操作可以让你读取和写入数据，并且不会被编译器重新排列：
这个想法是使用常规操作读取和写入大多数数据，而 Atomics 操作（load ，store 和其他操作）可确保读取和写入安全。通常，要使用自定义同步机制（例如）可以基于Atomics实现。
API：
Atomic 函数的主要操作数必须是 Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array 或 Uint32Array 的一个实例。它必须包裹一个 SharedArrayBuffer.
3. Object.values and Object.entries
const obj = { 10: ‘xxx‘, 1: ‘yyy‘, 3: ‘zzz‘ };
Object.values(obj); // [‘yyy‘, ‘zzz‘, ‘xxx‘]
Object.values(‘es8‘); // [‘e‘, ‘s‘, ‘8‘]
const obj = [‘e‘, ‘s‘, ‘8‘]; Object.entries(obj); // [[‘0‘, ‘e‘], [‘1‘, ‘s‘], [‘2‘, ‘8‘]] const obj = { 10: ‘xxx‘, 1: ‘yyy‘, 3: ‘zzz‘ }; Object.entries(obj); // [[‘1‘, ‘yyy‘], [‘3‘, ‘zzz‘], [‘10‘: ‘xxx‘]] Object.entries(‘es8‘); // [[‘0‘, ‘e‘], [‘1‘, ‘s‘], [‘2‘, ‘8‘]]
4. String padding
为 String 对象增加了 2 个函数：padStart 和 padEnd。填补字符串的首部和尾部，为了使得到的结果字符串的长度能达到给定的长度（targetLength）。你可以通过特定的字符，或者字符串，或者默认的空格填充它。
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
‘es8‘.padStart(2); // ‘es8‘ ‘es8‘.padStart(5); // ‘ es8‘ ‘es8‘.padStart(6, ‘woof‘); // ‘wooes8‘ ‘es8‘.padStart(14, ‘wow‘); // ‘wowwowwowwoes8‘ ‘es8‘.padStart(7, ‘0‘); // ‘0000es8‘ ‘es8‘.padEnd(2); // ‘es8‘ ‘es8‘.padEnd(5); // ‘es8 ‘ ‘es8‘.padEnd(6, ‘woof‘); // ‘es8woo‘ ‘es8‘.padEnd(14, ‘wow‘); // ‘es8wowwowwowwo‘ ‘es8‘.padEnd(7, ‘6‘); // ‘es86666‘
5. Object.getOwnPropertyDescriptors
const obj = { get es7() { return 777; }, get es8() { return 888; } }; Object.getOwnPropertyDescriptor(obj); // { // es7: { // configurable: true, // enumerable: true, // get: function es7(){}, //the getter function // set: undefined // }, // es8: { // configurable: true, // enumerable: true, // get: function es8(){}, //the getter function // set: undefined // } // }
6. 结尾逗号
// 参数定义时 function foo( param1, param2, ) {} // 函数调用时 foo( ‘abc‘, ‘def‘, ); // 对象中 let obj = { first: ‘Jane‘, last: ‘Doe‘, }; // 数组中 let arr = [ ‘red‘, ‘green‘, ‘blue‘, ];
1.异步迭代器：异步迭代器对象的next()方法返回了一个Promise，解析后的值跟普通的迭代器类似。
async function example() { // 普通迭代器: const iterator = createNumberIterator(); iterator.next(); // Object {value: 1, done: false} iterator.next(); // Object {value: 2, done: false} iterator.next(); // Object {value: 3, done: false} iterator.next(); // Object {value: undefined, done: true} // 异步迭代器: const asyncIterator = createAsyncNumberIterator(); const p = asyncIterator.next(); // Promise await p;// Object {value: 1, done: false} await asyncIterator.next(); // Object {value: 2, done: false} await asyncIterator.next(); // Object {value: 3, done: false} await asyncIterator.next(); // Object {value: undefined, done: true} }
2. Rest/Spread 属性
rest参数和展开运算符，这项特性在ES6中已经引入，但是ES6中仅限于数组。在ES9中，为对象提供了像数组一样的rest参数和扩展运算符。
const obj = { a: 1, b: 2, c: 3 } const { a, ...param } = obj; console.log(a) //1 console.log(param) //{b: 2, c: 3} function foo({a, ...param}) { console.log(a); //1 console.log(param) //{b: 2, c: 3} }
3. Promise.prototype.finally()
finally的回调总会被执行。
promise .then(result => {···}) .catch(error => {···}) .finally(() => {···});
4. 命名捕获组
ES9中可以通过名称来识别捕获组：
(?<year>[0-9]{4})
before:
const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const matchObj = RE_DATE.exec(‘1999-12-31‘);
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31
after:
const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<date>[0-9]{2})/;
const matchObj = RE_DATE.exec(‘1999-12-31‘);
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.date; // 31
// 使用解构语法更为简便
const {groups: {day, year}} = RE_DATE.exec(‘1999-12-31‘);
console.log(year); // 1999
console.log(day); // 31
原文：https://www.cnblogs.com/ceceliahappycoding/p/11354353.html