ES 2021

Features

1. 数字分隔符(Numeric Separators)

   • Node v12.5.0+
   • @babel/plugin-proposal-numeric-separator

   为提高数字的可读性而加入的新特性 经测试在十六进制、二进制也可使用

   <!-- 十进制 -->
   let decimal = 100_000_000_000 // 100000000000
   
   <!-- 二进制 -->
   let binary = 0b1_1      // 3
   
   <!-- 十六进制 -->
   let hex = 0xa_1         // 161
   

2. Promise.any()

   Node 15.0.0+

   Promise 静态方法目前四种 Promise.all() Promise.race() Promise.allSettled() Promise.any()

   简单来说

   • Promise.all() 所有 Promise 状态都 fulfilled ，才 resolve，否则 reject
   • Promise.allSettled() 所有 Promise 状态均变更 (fulfilled|rejected) 才结束
   • Promise.race() 存在 Promise 状态变更 fulfilled|rejected，就 resolve|reject
   • Promise.any() 忽略 rejected，存在 Promise 状态变更为 fulfilled，就结束，如果全部 rejected，抛出 AggregateError: All promises were rejected

   const err = new Promise((resolve, reject) => {
       setTimeout(() => {
           reject('err')
       }, 500)
   })
   const delay1000 = new Promise((resolve, reject) => {
       setTimeout(() => {
           resolve('delay1000')
       }, 500)
   })
   const delay2000 = new Promise((resolve, reject) => {
       setTimeout(() => {
           resolve('delay2000')
       }, 500)
   })
   
   Promise.all([err, delay1000, delay2000])
       .then(res => console.log(res))
       .catch(err => console.log(err))
   > 'err'
   Promise.all([delay1000, delay2000])
       .then(res => console.log(res))
       .catch(err => console.log(err))
   > ['delay1000', 'delay2000']
   Promise.allSettled([err, delay1000, delay2000])
       .then(res => console.log(res))
       .catch(err => console.log(err))
   > [{ "status": "rejected", "reason": "err" }, { "status": "fulfilled", "value": 1000 }, { "status": "fulfilled", "value": 2000 }]
   Promise.race([err, delay1000, delay2000])
       .then(res => console.log(res))
       .catch(err => console.log(err))
   > 'err'
   Promise.race([delay1000, delay2000])
       .then(res => console.log(res))
       .catch(err => console.log(err))
   > 'delay1000'
   Promise.any([err, delay1000, delay2000])
       .then(res => console.log(res))
       .catch(err => console.log(err))
   > 'delay1000'
   Promise.any([err])
       .then(res => console.log(res))
       .catch(err => console.log(err))
   > 'AggregateError: All promises were rejected'
   Promise.any([err])
       .then(res => console.log(res))
       .catch(err => console.log(err.errors))
   > ['err']
   

3. WeakRef and FinalizationRegistry

   • WeakRef 保留对另一对象的弱引用，不会阻止被引用对象被垃圾回收；相对的，一个普通的引用就是强引用，只有当该对象没有任何强引用时，JavaScript 引擎才会销毁该对象并回收该对象所占用的内存空间；而在该对象被垃圾回收之后，就无法通过弱引用来获取该对象。

   • FinalizationRegistry 当一个在注册表中注册的对象被垃圾回收时，请求在某个时间点上调用一个清理回调

   使用场景暂未遇到 参考 MDN

4. String.prototype.replaceAll

   Node 15.0.0+

   使用上同 String.prototype.replace，也不会改变原字符，不同之处在于会对目标字符串所有匹配的关键词做替换，原来基本上都是使用正则匹配，即 str.replace(/xxx/g, 'xxx')

   const str = 'abcadeafga'
   //在这之前是这样处理
   str.replace(/a/g, '1')
   
   // String.prototype.replaceAll
   str.replaceAll('a', '1')
   // 1bc1de1fg1
   str.replaceAll('', '_')
   // _a_b_c_a_d_e_a_f_g_a_
   

   需要注意的一点是 replaceAll 的第一个参数如果是正则需要加 g

   例外 当替换值为 $$, $&, $\``, and $’` 时，替换后的结果可能并不是我们需要的

   'apple'.replace('$$')
   > '$pple'
   

   这时可以将函数第二个参数，返回值为想要替换成的值

   'apple'.replaceAll('a', () => '$$')
   > "$$pple"
   

5. 逻辑赋值操作符（Logincal Assignment Operators）

   Node 15.0.0+

   1. ||=

   a ||= b
   /** babel 转译后 **/
   a || (a = b)
   

   2. &&=

   a &&= b
   /** babel 转译后 **/
   a && (a = b);
   

   3. ??=

   a ??= b // 转换成 ES2020 的写法，即 `a ?? (a = b)`
   /** babel 转译后 **/
   (_a = a) !== null && _a !== void 0 ? _a : a = b;