ECMAScript 2020，也被称为 ES11，是 JavaScript 最新的版本。这个版本新增了一些新特性和更好的语言功能，这些功能帮助开发者提高了他们的开发效率。在本文中，我们将探讨 ECMAScript 2020 中的十大变化，以及这些变化对于前端开发者的学习和指导意义。
1. Promise.allSettled()
Promise.allSettled() 方法接收一组 Promise 对象并返回一个 Promise，该 Promise 包含一个数组，其中每个 Promise 在完成时会返回其结果，而不会在发生错误时抛出错误。这个方法对于我们需要等待所有 Promise 执行完成的场景非常有用。
const promises = Promise.allSettled([ Promise.resolve('Hello'), Promise.reject('Error.') ]);
promises.then(results => console.log(results));
// Output:
// [ { status: 'fulfilled', value: 'Hello' }, { status: 'rejected', reason: 'Error.' } ]2. globalThis 对象
globalThis 对象允许在不知道运行时宿主环境的情况下访问全局对象。在浏览器中，全局对象是 window，在 Node.js 中，全局对象是 global，而在 Web Workers 中，全局对象是 self。globalThis 用于跨平台开发，并在所有情况下保持一致。
console.log(globalThis === window); console.log(globalThis === global); console.log(globalThis === self); // Output: // true (in browser) // true (in Node.js) // true (in Web Workers)
3. 可选链式调用
可选链式调用可以简化访问复杂嵌套对象的代码，并避免调用不存在的属性或方法时引发错误。
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ----------
------- ------ -------
-
--
----------------------------------- -- ---------
--------------------------------------- -- ---------4. Nullish Coalescing
Nullish Coalescing 是一个新的逻辑运算符用于判断变量是否为 null 或者 undefined。与逻辑运算符 || 不同的是，Nullish Coalescing 不会将 falsy 值（如 0、''）判断为 null 或 undefined。
const name1 = ''; const name2 = undefined; const name3 = null; console.log(name1 ?? 'Anonymous'); // '' console.log(name2 ?? 'Anonymous'); // 'Anonymous' console.log(name3 ?? 'Anonymous'); // 'Anonymous'
5. 元属性
元属性是添加到类构造函数上的静态属性，它们可以使用装饰器，提供更多的元信息。目前，只有一个元属性：new.target。
-- -------------------- ---- -------
----- ------ -
------------- -
------------------------
-
-
----- ------- ------- ------ -
------------- -
--------
-
-
--- --------- -- ---------- -------
--- ---------- -- ---------- --------6. String.prototype.matchAll()
matchAll() 方法返回指定正则表达式的所有匹配，同时会返回捕获组。它返回一个迭代器，可以使用 for...of 循环遍历匹配结果。
-- -------------------- ---- ------- ----- --- - ----------- -- - ------- ----------- ----------- ----- ----- - ----------- --- ---- ----- -- -------------------- - ------------------- - -- ------- -- - ----------- -- ------------ - -- - --- -- ---- - -- - -- -- --- - -- - -------- -- --------- - -- - ------------ -- ------------- - -- - ------------ ---------- -
7. import 和 export 全部被分类为静态
在 ECMAScript 2020 中，import 和 export 语句被标记为静态语法，不再是动态语法。这样做使这些语句能够更好的进行优化和验证。
8. BigInt
BigInt 类型是 JavaScript 中的一种新的原始数据类型，可以用来表示任意大的整数。它可以使用 n 后缀来表示。
const maxSafe = Number.MAX_SAFE_INTEGER; console.log(maxSafe); // 9007199254740991 console.log(maxSafe + 1); // 9007199254740992 console.log(BigInt(maxSafe) + BigInt(1)); // 9007199254740992n
9. Promise.allSettled()
Promise.allSettled() 方法接收一组 Promise 对象并返回一个 Promise，该 Promise 包含一个数组，其中每个 Promise 在完成时会返回其结果，而不会在发生错误时抛出错误。这个方法对于我们需要等待所有 Promise 执行完成的场景非常有用。
const promises = Promise.allSettled([ Promise.resolve('Hello'), Promise.reject('Error.') ]);
promises.then(results => console.log(results));
// Output:
// [ { status: 'fulfilled', value: 'Hello' }, { status: 'rejected', reason: 'Error.' } ]10. 双冒号运算符
双冒号运算符（::）是 JavaScript 中的一个新运算符，用于绑定函数并在调用时立即执行它。
-- -------------------- ---- -------
----- ------ - -
---- ---
-------- -
------ ---------
-
--
------------------------------- -- --
----- ------ - --------------
------------------------ -- ---------
------------------------------------ -- --
-------------------------------- -- --结论
这是 ECMAScript 2020 中的十大变化。这些功能有助于我们更加优雅地编写 JavaScript 代码，提高开发效率。我们应该学习并使用它们，以便更好地开发出高质量的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677238906d66e0f9aad5d650