ECMAScript 2020（也称为 ES11）是 JavaScript 编程语言的最新版本，其中包含了许多强大的新特性。本文将介绍其中的十个常用新特性，并提供示例代码，以帮助前端开发人员快速上手。
1. 可选链操作符
可选链操作符是一个新的 JavaScript 运算符，可以帮助开发人员在访问可能不存在的对象属性或方法时避免出错。如果存在该属性或方法，则返回其值，否则返回 undefined。
----- ---- - -
----- -------
-------- -
------- ---- ---- -----
----- ----------
------ ----
-
--
----- ------- - ----------------------------
--------------------- -- ---------在上面的代码中，country 的值为 undefined，因为 user.address?.country?.name 中的 country 在 user.address 中不存在。
2. 空位合并操作符
空位合并操作符是另一个新的 JavaScript 运算符，可以帮助开发人员为可能为 null 或 undefined 的值设置默认值。此运算符只有在左侧的值为 null 或 undefined 时才会返回右侧的值。
----- --------- - ----- ----- -------- - ------ ----- ---- - --------- -- --------- ------------------ -- -----
在上面的代码中，name 的值为 'Doe'，因为 firstName 的值为 null。如果 firstName 的值为非空字符串，则 name 的值将为 firstName 的值。
3. 动态导入
动态导入是一种新的导入语法，可以在运行时动态地导入模块。使用动态导入可以帮助减少应用程序的启动时间，因为只有在需要时才会加载必要的依赖项。
----- -------- --------------- - ----- - -------- ------ - - ----- ------------- ------ ------- - ----- ------ - ----- -------------------------
在上面的代码中，getModule 函数使用动态导入从指定路径加载模块。
4. 数组平铺
数组平铺是一种新的数组操作，可以将多维数组转换为单维数组。
----- --- - --- --- --- ----- ----- ------------ - ------------------- -------------------------- -- --- -- -- --
在上面的代码中，flattenedArr 的值为 [1, 2, 3, 4]，因为 arr 包含一个多维数组。
5. 字符串匹配
字符串匹配是一个新的字符串操作，可以用于确定一个字符串是否包含另一个字符串。
----- --- - ----- -- - -------- ------------------------------------ -- ---- ------------------------------------ -- ---- -------------------------------- -- ----
在上面的代码中，startsWith、endsWith 和 includes 方法用于检查 str 是否以指定的字符串开头、结尾或包含在字符串中。
6. for-in 循环
for-in 循环是 JavaScript 中的一种迭代语句，可以用于枚举对象的属性名称。ES11 为 for-in 循环添加了对跳过指定属性的支持。
----- --- - - -- -- -- - -- --- ------ --- -- ---- - -- ---- --- ---- --------- -------------------- -------------- -
在上面的代码中，continue 语句用于跳过 key 为 'a' 的属性。
7. 全局对象属性
ES11 引入了新的全局对象属性 globalThis，用于在不同的执行上下文中访问全局对象。无论是在浏览器环境还是 Node.js 环境中，都可以使用 globalThis 访问全局对象。
------------------------
在上面的代码中，globalThis 将输出全局对象，无论脚本在哪个环境中运行。
8. Promise.allSettled
Promise.allSettled 是一个新的 Promise 方法，用于执行多个 Promise 对象，并在它们全部被 settled（即 resolved 或 rejected）后返回所有 Promise 的状态。
----- -------- - - ---------------------------- ------------------------ -- ---------------------------- ------------- -- ----------------------
在上面的代码中，Promise.allSettled 将执行两个 Promise 对象，并在它们都 settled 后返回它们的状态。在本例中，results 的值将为 [{ status: 'fulfilled', value: 'Success!' }, { status: 'rejected', reason: 'Error!' } ]。
9. BigInt
BigInt 是 JavaScript 中的一种新的数据类型，用于表示任意精度的整数。它可以通过在数字后面附加 n 或调用全局函数 BigInt 来创建。
----- ------- - ------------------ ----- ------- - ---------------------------
在上面的代码中，bigInt1 和 bigInt2 均为 BigInt 类型的整数。
10. Math 方法改进
ES11 改进了数学方法，使它们可以处理 BigInt 和浮点数。此外，ES11 引入了新的数学方法，如 Math.clamp，Math.scale 和 Math.signbit。
----- ------ - ------------------ ----------------------------- --------- -- -- ------------------------- -- ---- -- -
在上面的代码中，Math.imul 和 Math.clamp 方法分别用于处理 BigInt 和浮点数。
结论
ES11 带来了许多强大的新特性，并将 JavaScript 作为一种现代编程语言推向了前沿。使用这些新特性，开发人员可以更容易地编写健壮的应用程序，并尽可能地减少复杂性和错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672186f52e7021665e07d3f7