参考文献: 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 对象的字节。这种共享有两个好处:
- 可以更快地在 workers 之间共享数据。
- workers 之间的协调变得更简单和更快(与 postMessage() 相比)
API:
构造函数: new SharedArrayBuffer(length)
静态属性: SharedArrayBuffer[Symbol.species]
实例属性: SharedArrayBuffer.prototype.byteLength()
SharedArrayBuffer.prototype.slice(start, end)
Atomics 方法可以用来与其他 workers 进行同步。以下两个操作可以让你读取和写入数据,并且不会被编译器重新排列:
- Atomics.load(ta : TypedArray, index)
- Atomics.store(ta : TypedArray, index, value : T)
这个想法是使用常规操作读取和写入大多数数据,而 Atomics 操作(load ,store 和其他操作)可确保读取和写入安全。通常,要使用自定义同步机制(例如)可以基于Atomics实现。
API:
Atomic 函数的主要操作数必须是 Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array 或 Uint32Array 的一个实例。它必须包裹一个 SharedArrayBuffer.
-
- Atomics.load(ta : TypedArray, index) : T
读取和返回 ta[index] 上的元素,返回数组指定位置上的值。 - Atomics.store(ta : TypedArray, index, value : T) : T
在 ta[index] 上写入 value,并且返回 value。 - Atomics.exchange(ta : TypedArray, index, value : T) : T
将 ta[index] 上的元素设置为 value ,并且返回索引 index 原先的值。 - Atomics.compareExchange(ta : TypedArray, index, expectedValue, replacementValue) : T
如果 ta[index] 上的当前元素为 expectedValue , 那么使用 replacementValue 替换。并且返回索引 index 原先(或者未改变)的值。
- Atomics.load(ta : TypedArray, index) : T
-
- Atomics.add(ta : TypedArray, index, value) : T
执行 ta[index] += value 并返回 ta[index] 的原始值。 - Atomics.sub(ta : TypedArray, index, value) : T
执行 ta[index] -= value 并返回 ta[index] 的原始值。 - Atomics.and(ta : TypedArray, index, value) : T
执行 ta[index] &= value 并返回 ta[index] 的原始值。 - Atomics.or(ta : TypedArray, index, value) : T
执行 ta[index] |= value 并返回 ta[index] 的原始值。 - Atomics.xor(ta : TypedArray, index, value) : T
执行 ta[index] ^= value 并返回 ta[index] 的原始值。
- Atomics.add(ta : TypedArray, index, value) : T
-
- Atomics.wait(ta: Int32Array, index, value, timeout=Number.POSITIVE_INFINITY) : (‘not-equal’ | ‘ok’ | ‘timed-out’)
如果 ta[index] 的当前值不是 value ,则返回 ‘not-equal’。否则(等于value时)继续等待,直到我们通过 Atomics.wake() 唤醒或直到等待超时。 在前一种情况下,返回 ‘ok’。在后一种情况下,返回’timed-out’。timeout 以毫秒为单位。记住此函数执行的操作:“如果 ta[index] 为 value,那么继续等待” 。 - Atomics.wake(ta : Int32Array, index, count)
唤醒等待在 ta[index] 上的 count workers。
- Atomics.wait(ta: Int32Array, index, value, timeout=Number.POSITIVE_INFINITY) : (‘not-equal’ | ‘ok’ | ‘timed-out’)
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', ];
ES9新特性
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