ES2021 新特性提前知，附案例

最新推荐文章于 2024-08-04 08:39:02 发布

前端瓶子君

最新推荐文章于 2024-08-04 08:39:02 发布

阅读量247

点赞数 1

文章标签： js java javascript python css

原文链接：https://juejin.cn/post/6914538946751889422

版权

简介

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 的一些新特性。尽管你的项目可能并不会用到这些新特性，但是它们的确为项目开发提供了多种可能性，不是么？

源自：https://juejin.cn/post/6914538946751889422

译自：https://medium.com/better-programming/javascript-es2021-features-with-simple-examples-ada723b55355

声明：文章著作权归作者所有，如有侵权，请联系小编删除。