ES2020 和 ES2021 是 JavaScript 的两个最新版本，它们分别于 2020 年和 2021 年发布。这两个版本都引入了一些新的特性，这些特性不仅能够提高开发效率，而且能够让代码更加易于维护和扩展。本文将全面深入地解析 ES2020/2021 新特性，以帮助前端开发者更好地掌握最新的 JavaScript 技术。
1. 双问号操作符（Nullish Coalescing Operator）
双问号操作符（??）是 ES2020 新增的一个操作符，它可以用来判断一个值是否为 null 或 undefined。如果是，则返回默认值，否则返回该值本身。下面是一个例子：
const name = null ?? 'Unknown'; console.log(name); // 'Unknown'
在上面的代码中，name 的值是 null，所以使用了双问号操作符返回了默认值 'Unknown'。
2. 可选链操作符（Optional Chaining）
可选链操作符（?.）是 ES2020 新增的另一个操作符，它可以用来简化访问对象属性的过程。如果一个对象的某个属性不存在，使用可选链操作符访问该属性时，不会抛出错误，而是返回 undefined。下面是一个例子：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- ---------
-
--
---------------------------------- -- ---------
-------------------------------------- -- ---------在上面的代码中，person 对象包含一个 address 属性，该属性又包含一个 city 属性。使用可选链操作符访问 person.address.city 时，可以直接得到该属性的值。而使用可选链操作符访问 person.address.province 时，由于该属性不存在，所以返回了 undefined。
3. Promise.allSettled()
Promise.allSettled() 是 ES2020 新增的一个 API，它可以用来处理多个 Promise 对象的状态。与 Promise.all() 不同的是，Promise.allSettled() 不会在任何一个 Promise 对象变为 rejected 状态时立即返回，而是等待所有 Promise 对象都完成并返回它们的状态。下面是一个例子：
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('error');
const promise3 = Promise.resolve(3);
Promise.allSettled([promise1, promise2, promise3])
.then(results => console.log(results));在上面的代码中，promise1 和 promise3 都会成功完成，而 promise2 会失败。使用 Promise.allSettled() 可以得到一个数组，该数组包含了所有 Promise 对象的状态，如下所示：
[
{ status: 'fulfilled', value: 1 },
{ status: 'rejected', reason: 'error' },
{ status: 'fulfilled', value: 3 }
]4. BigInt
BigInt 是 ES2020 新增的一种基本数据类型，它可以用来表示任意精度的整数。在 JavaScript 中，整数的范围是从 -2^53 到 2^53-1，超出这个范围的整数就会失去精度。使用 BigInt 可以避免这个问题。下面是一个例子：
const x = 9007199254740991n;
const y = BigInt('9007199254740991');
const z = x + y;
console.log(typeof x); // 'bigint'
console.log(typeof y); // 'bigint'
console.log(typeof z); // 'bigint'在上面的代码中，x 和 y 都是 BigInt 类型的整数，它们的值都是 9007199254740991。使用 x + y 可以得到正确的结果，而不会失去精度。
5. String.prototype.matchAll()
String.prototype.matchAll() 是 ES2020 新增的一个方法，它可以用来查找字符串中所有匹配某个正则表达式的子串。与 String.prototype.match() 不同的是，String.prototype.matchAll() 返回的是一个迭代器，可以用 for...of 循环遍历所有匹配的子串。下面是一个例子：
const str = 'hello world';
const regex = /l/g;
for (const match of str.matchAll(regex)) {
console.log(match[0], match.index);
}在上面的代码中，str 是一个字符串，regex 是一个正则表达式。使用 str.matchAll(regex) 可以得到一个迭代器，该迭代器包含了所有匹配 regex 的子串。在循环遍历迭代器时，可以得到每个匹配的子串和它的索引。
6. 数组的 flat() 和 flatMap()
Array.prototype.flat() 和 Array.prototype.flatMap() 是 ES2020 新增的两个方法，它们可以用来处理多维数组。Array.prototype.flat() 可以将多维数组转换为一维数组，而 Array.prototype.flatMap() 可以在转换前对每个元素进行处理。下面是一个例子：
-- -------------------- ---- ------- ----- --- - --- --- --- ------- ----- ------- - ------------------- --------------------- -- --- -- -- -- ----- ---- - --- -- --- ----- ------------- - -------------- -- -- - ---- --------------------------- -- --- -- --
在上面的代码中，arr 是一个多维数组，使用 arr.flat(Infinity) 可以将它转换为一维数组。而 arr2 是一个一维数组，使用 arr2.flatMap(x => [x * 2]) 可以将它的每个元素都乘以 2，并将结果放入一个新的数组中。
7. WeakRef 和 FinalizationRegistry
WeakRef 和 FinalizationRegistry 是 ES2021 新增的两个 API，它们可以用来处理内存管理问题。WeakRef 可以用来创建一个对象的弱引用，当该对象被垃圾回收时，弱引用也会被自动清除。而 FinalizationRegistry 可以用来注册一个回调函数，在对象被垃圾回收时自动调用该函数。下面是一个例子：
-- -------------------- ---- ------- ----- --- - - ----- ----- -- ----- ------- - --- ------------- ----------------------------- -- - ----- ----- - --- - ----- -- - --- ----- ---- ----------------------------- -- --------- ----- -------- - --- ------------------------ -- - ------------------- ----------- --- ---- ------------- --- ---------------------- -------- --- - ----- -- - --- ----- ----
在上面的代码中，obj 是一个对象，使用 new WeakRef(obj) 可以创建一个弱引用。使用 weakRef.deref() 可以获取弱引用所指向的对象。当 obj 的引用被设为 null 时，弱引用也会自动清除。使用 new FinalizationRegistry() 可以创建一个 FinalizationRegistry 对象，并注册一个回调函数。当 obj 被垃圾回收时，就会自动调用该回调函数。
结论
本文介绍了 ES2020/2021 的七个新特性，包括双问号操作符、可选链操作符、Promise.allSettled()、BigInt、String.prototype.matchAll()、数组的 flat() 和 flatMap()，以及 WeakRef 和 FinalizationRegistry。这些新特性都能够提高 JavaScript 的开发效率和代码质量，值得前端开发者学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676a817f78388e33bb1788aa