在开发前端应用程序时，我们经常会遇到需要编写大量重复代码的情况，这不仅会增加代码的复杂性和维护成本，还会影响代码的可读性和可维护性。为了解决这个问题，ECMAScript 2021 引入了一些新的特性，可以帮助我们避免重复的代码，提高代码的复用性和可维护性。
1. 可选链操作符
在以前的版本中，如果我们需要访问一个嵌套对象的属性或方法，我们需要使用多个点符号来进行访问，例如：
const name = obj && obj.person && obj.person.name;
如果 obj、person 或 name 中的任何一个属性不存在，那么代码就会出现错误。为了避免这种情况，ECMAScript 2021 引入了可选链操作符（?.），可以简化这个过程，例如：
const name = obj?.person?.name;
如果 obj、person 或 name 中的任何一个属性不存在，那么代码就会返回 undefined，而不会出现错误。这样可以避免在代码中使用大量的 if 语句来检查属性是否存在，从而简化代码，并提高可读性和可维护性。
2. 空值合并操作符
在以前的版本中，如果我们需要检查一个变量是否为 null 或 undefined，我们需要使用繁琐的 if 语句来处理，例如：
const name = obj.name || 'unknown';
如果 obj.name 为 null 或 undefined，那么代码就会返回 'unknown'。为了避免这种情况，ECMAScript 2021 引入了空值合并操作符（??），可以简化这个过程，例如：
const name = obj.name ?? 'unknown';
如果 obj.name 为 null 或 undefined，那么代码就会返回 'unknown'。这样可以避免在代码中使用大量的 if 语句来检查变量是否为 null 或 undefined，从而简化代码，并提高可读性和可维护性。
3. Promise.allSettled 方法
在以前的版本中，如果我们需要同时处理多个 Promise 对象的状态，我们需要使用 Promise.all 方法来处理，例如：
Promise.all([promise1, promise2, promise3])
.then(values => {
// 处理成功的情况
})
.catch(error => {
// 处理失败的情况
});但是，如果其中一个 Promise 对象出现了错误，整个 Promise.all 方法就会失败，无法返回所有 Promise 对象的状态。为了解决这个问题，ECMAScript 2021 引入了 Promise.allSettled 方法，可以同时处理多个 Promise 对象的状态，例如：
-- -------------------- ---- -------
----------------------------- --------- ----------
------------- -- -
---------------------- -- -
-- -------------- --- ------------ -
-- -------
- ---- -
-- -------
-
---
---这样可以避免因为一个 Promise 对象的错误而导致整个 Promise.all 方法失败，从而提高代码的可靠性和可维护性。
4. 数组 flat 方法
在以前的版本中，如果我们需要将一个多维数组转换为一维数组，我们需要使用递归方法来处理，例如：
function flatten(arr) {
return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}这样的代码不仅复杂，而且容易出错。为了解决这个问题，ECMAScript 2021 引入了数组 flat 方法，可以将一个多维数组转换为一维数组，例如：
const arr = [1, [2, [3, 4]]]; const flatArr = arr.flat(2); console.log(flatArr); // [1, 2, 3, 4]
这样可以避免使用递归方法来处理多维数组，从而简化代码，并提高可读性和可维护性。
总结
ECMAScript 2021 引入了一些新的特性，可以帮助我们避免重复的代码，提高代码的复用性和可维护性。其中包括可选链操作符、空值合并操作符、Promise.allSettled 方法和数组 flat 方法。我们可以根据实际情况来选择使用这些特性，从而提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65de8e0e1886fbafa4bd4321