ES 2021 新特性提早知，附案例

 

转自：bb老猫

简介

ES2021 也就是 2021 年的 ECMAScript 版本。ES2021 并无像 ES2015 那样提出不少新特性，但却合并了一些有用的特性。

本文将会用通俗易懂的代码示例来介绍 ES2021 的新特性。固然在这以前，你须要了解 JavaScript 的基础知识。

如下是 ES2021 的新特性概览：

• String.prototype.replaceAll
• Promise.any
• WeakRef
• 逻辑赋值运算符
• 数字分隔符

String.protype.replaceAll

在 ES2021 以前，要替换掉一个字符串中的全部指定字符，咱们能够这么作：

const fruits = '????+????+????+';
const fruitsWithBanana = fruits.replace(/\+/g, '????');
console.log(fruitsWithBanana); //????????????????????????

ES2021 则提出了 replaceAll 方法，并将其挂载在 String 的原型上，能够这么用：

const fruits = '????+????+????+';
const fruitsWithBanana = fruits.replaceAll('+', '????');
console.log(fruitsWithBanana); //????????????????????????

Promise.any

Promise.any 方法和 Promise.race 相似——只要给定的迭代中的一个 promise 成功，就采用第一个 promise 的值做为它的返回值，但与 Promise.race 的不一样之处在于——它会等到全部 promise 都失败以后，才返回失败的值：

const myFetch = url => setTimeout(() => fetch(url), Math.floor(Math.random() * 3000));
const promises = [
  myFetch('/endpoint-1'),
  myFetch('/endpoint-2'),
  myFetch('/endpoint-3'),
];
// 使用 .then .catch
Promise.any(promises) // 任何一个 promise 成功。
       .then(console.log) // 好比 ‘3’
       .catch(console.error); // 全部的 promise 都失败了
// 使用 async-await
try {
  const first = await Promise.any(promises); // 任何一个 promise 成功返回。
 console.log(first);
}catch (error) { // 全部的 promise 都失败了
  console.log(error);
}

WeakRef

WeakRef 提案主要包含两个新功能：

• 能够经过 WeakRef 类来给某个对象建立一个弱引用
• 能够经过 FinalizationRegistry 类，在某个对象被垃圾回收以后，执行一些自定义方法

上述两个新功能能够同时使用，也能够单独使用，取决于你的需求。

一个 WeakRef 对象包含一个对于某个对象的弱引用，被称为 目标 或 引用。经过弱引用一个对象，可让该对象在没有其它引用的状况下被垃圾回收机制回收。

WeakRef 主要用来 缓存 和 映射 一些大型对象，当你但愿某个对象在不被其它地方引用的状况下及时地被垃圾回收，那么你就可使用它。

function toogle(element) {
  const weakElement = new WeakRef(element);
  let intervalId = null;

  function toggle() {
    const el = weakElement.deref();
    if (!el) {
       return clearInterval(intervalId);
   }
   const decoration = weakElement.style.textDecoration;
   const style= decoration === 'none' ? 'underline' : 'none';
   decoration = style;
  }
  intervalId = setInterval(toggle, 1000);
}
const element = document.getElementById("link");
toogle(element);
setTimeout(() => element.remove(), 10000);

FinalizationRegistry 接收一个注册器回调函数，能够利用该注册器为指定对象注册一个事件监听器，当这个对象被垃圾回收以后，会触发监听的事件，具体步骤以下。

首先，建立一个注册器：

const registry = new FinalizationRegistry(heldValue => {
  // ....
});

接着注册一个指定对象，同时也能够给注册器回调传递一些参数：

registry.register(theObject, "some value");

逻辑赋值运算符

译者注：赋值运算符 和 表达式 的区别能够 看这里。

逻辑赋值运算符结合了 逻辑运算符 和 赋值表达式。逻辑赋值运算符有两种：

• 或等于（||=）
• 且等于（&&=）

// 或等于
|   a   |   b   | a ||= b | a (运算后) |
| true  | true  |   true  |        true         |
| true  | false |   true  |        true         |
| false | true  |   true  |        true         |
| false | false |   false |        false        |
a ||= b
// 等同于:
a || (a = b);

// 且等于
|   a   |   b   | a &&= b | a (运算后) |
| true  | true  |   true  |        true         |
| true  | false |   false |        false        |
| false | true  |   false |        false        |
| false | false |   false |        false        |
a &&= b
// 等同于:
a && (a = b);

数字分隔符

经过这个功能，咱们利用 “（_，U+005F）” 分隔符来将数字分组，提升数字的可读性：

1_000_000_000           // 十亿
101_475_938.38          // 亿万

const amount = 12345_00;  // 12,345
const amount = 123_4500;  // 123.45 (保留 4 位小数)
const amount = 1_234_500; // 1,234,500

0.000_001 // 百万分之一
1e10_000  // 10^10000

const binary_literals = 0b1010_0001_1000_0101;
const hex_literals = 0xA0_B0_C0;
const bigInt_literals = 1_000_000_000_000n;
const octal_literal = 0o1234_5670;

总结

JavaScript 是一门动态类型语言，这在某些方面来讲对于 web 开发是有益的。自 ES2015 以后，JavaScript 正在快速发展。在这篇文章里面，咱们着重回顾了 ES2021 的一些新特性。

尽管你的项目可能并不会用到这些新特性，可是它们的确为项目开发提供了多种可能性，不是么？

相关文章

1. 13个JavaScript单行代码，让你看起来更专业
2. 由浅入深，66条JavaScript面试知识点
3. 20个经常使用的JavaScript简写技巧