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

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

一个 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简写技巧

最后

–

转发文章并关注公众号：前端开发博客，回复 1024，领取前端进阶资料

1. 回复「电子书」领取27本精选电子书

2. 回复「加群」加入前端大神交流群，一起学习进步

3. 回复「JS」获取 JavaScript 精选文章