ECMAScript（也称为 JavaScript）是前端开发人员必须掌握的一项关键技能。在过去的几年中，ECMAScript已经迅速发展，越来越多的新特性进入了语言规范中。本文将介绍 ECMA2019 和 ECMA2020 的 12 个值得学习的新特性，让你在前端开发中能够更加高效、简洁、明了地编写代码。
1. Optional Chaining（可选链）
在面向对象编程中，我们经常需要判断对象的某个属性是否存在，如果不存在就会抛出 undefined 错误。而 Optional Chaining 就是为了解决这个问题而生的。使用可选链，可以轻松地避免这种情况，并且代码也更加简洁易懂。
示例代码：
----- ------ - -
----- -------
---- ---
-------- -
------ -------------------
------ ------------
-
-
----------------------------------- -- ------------------
------------------------------------------- -- ---------2. Nullish Coalescing Operator（空位合并操作符）
在 JavaScript 中，我们常常使用逻辑运算符（如“||”）来提供默认值。但是这种方法会导致错误，例如在默认值为 false，0 或空字符串时，会被错误地视为无效值。而 Nullish Coalescing Operator 就是为了解决这个问题而生的。
示例代码：
----- ---- - ---------- ----- ----- - ---- -- ------- ------------------- -- ------
3. Array.flat（数组扁平化）
数组扁平化是指将多维数组转换为一维数组。在过去，我们通常使用递归或其他方法来实现。而现在，ECMAScript 2020 中新增加的 Array.flat 方法可以轻松地实现数组扁平化。
示例代码：
----- ------- - --- -- --- -- --- ----- ----- ----------- - ---------------- ------------------------- -- --- -- -- -- -- --
4. String.trimStart 和 String.trimEnd（字符串前后空格去除）
字符串前后空格的去除是常用字符串操作之一。在过去，我们通常使用 trim 方法来实现。而 ECMAScript 2020 中新增加的 String.trimStart 和 String.trimEnd 方法可以轻松地实现去除字符串前后空格的操作。
示例代码：
----- ------- - - ----- ----- -- --------------------------------- -- ------ ----- - ------------------------------- -- - ----- ------
5. BigInt（大数）
在 JavaScript 中，数字的范围是有限的。在需要处理大数据时就会出现问题，例如大型数值计算或加密算法等。而 ECMAScript 2020 中新增加的 BigInt 类型可以解决这个问题。
示例代码：
----- ------ - ------------------ -------------------- -- ----------
6. Promise.allSettled（批量 Promise 处理）
在 Promise 处理中，我们使用 Promise.all 方法处理一组 Promise 并等待所有 Promise 完成。而 Promise.allSettled 新增加的方法则不仅仅等待 Promise 完成，还等待 Promise 状态变为 settled。
示例代码：
----- -------- - ------------------- ----- -------- - ------------------------ ----- -------- - -------------------------- ----------------------------- --------- ------------------------- -- - --------------------- ---
7. Dynamic Import（动态导入）
Dynamic Import 允许我们在需要时动态加载模块，而不是在页面加载时预加载所有模块。当我们需要在用户需要时才加载某些代码时，特别有用。
示例代码：
--------------------------------- -- - -------------------- ---
8. Object.fromEntries（对象转换）
在过去，我们通常需要使用 Object.entries 方法将对象转换为数组，再将数组转换为另一个对象。而 ECMAScript 2019 中新增加的 Object.fromEntries 方法可以直接将数组转换为对象。
示例代码：
----- ------- - --------- -------- ------- ----- ----- --- - ---------------------------- ----------------- -- ------ ------- ---- ---
9. Function.toString（函数转换）
Function.toString 可以将函数转换为字符串。这是一个非常有用的功能，它允许我们在调试时查看函数定义。
示例代码：
-------- ---------------- ----- - ------ ---- - ----- - ----------------------------------- -- -------- ---------------- ----- - ------ ---- - ----- -
10. Private Class Fields（私有类字段）
ECMAScript 2019 中新增加的 Private Class Fields 允许开发人员在类定义中声明不可访问的私有字段。这是一个非常有用的功能，它使得我们可以更好地控制代码的访问权限和行为。
示例代码：
----- ------ -
------- - --- --------
----------- -
------ -------------
-
-
----- ------ - --- ---------
-------------------------------- -- --- -------
---------------------------- -- ------------ ------- ----- --------- ---- -- -------- -- -- --------- -----11. Optional Catch Binding（可选 catch 绑定）
在过去，我们通常使用 catch 语句来捕获异常并执行指定操作。而 Optional Catch Binding 可以更加灵活地控制 catch 语句的行为。
示例代码：
--- - -- ---- ---- - ----- --- - --------------------- --- - --- - -- ---- ---- - ----- - ---------------------- -
12. Numeric Separators（数字分隔符）
在写大数字时，使用逗号和空格等分隔符可以提高代码可读性。而 Numeric Separators 可以让我们更加方便地写大数字。
示例代码：
----- ------ - -------------- -------------------- -- ----------
总结
ECMAScript 2019 和 2020 中的新特性可以让前端开发者更加高效、简洁、明了地编写代码。在学习这些特性时，我们可以更加灵活地应用它们来提高前端代码的性能、可读性以及可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6478a12b968c7c53b04d247f