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