ES 2021 新特性提前知，附案例_WeakRef

相关文章推荐

气宇轩昂的硬盘 · vector存入共享内存(了解) - ...· 2 月前 ·

飞翔的投影仪 · window.crypto.subtle进行 ...· 1 月前 ·

强悍的牛肉面 · Qt 添加 QtNetwork 库文件 - ...· 2 周前 ·

沉着的投影仪 · matlab等高线图（contour函数）优 ...· 7 月前 ·

活泼的酱肘子 · mybatis框架下select带in批量查 ...· 10 月前 ·

慷慨大方的泡面 · Talk | ...· 1 年前 ·

挂过科的熊猫 · django ...· 1 年前 ·

鼻子大的红金鱼 · 可解释人工智能：符号主义、联结主义对比 - ...· 1 年前 ·

ES2021 也就是 2021 年的 ECMA 版本。ES2021 并没有像 ES2015 那样提出很多新特性，但却合并了一些有用的特性。

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

以下是 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 (运算后) |

a ||= b

// 等同于:

a || (a = b);

// 且等于

| a | b | a &&= b | a (运算后) |

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;

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

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

责任编辑：

声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。