ES2021 是 ECMAScript 的最新版本，也是 JavaScript 语言的最新标准。该版本为开发人员提供了一些新功能和改进，可以使用这些功能来优化您的代码。本文将介绍 ES2021 中的一些最佳实践。
1. 可选链操作符
可选链操作符允许开发人员在对象属性存在和不存在的情况下轻松访问和检查嵌套属性。如果您之前曾经访问过不存在的属性，您可能已经看到过“Cannot read property 'xxx' of undefined”这样的错误。
在 ES2021 中，您现在可以使用可选链操作符来避免访问不存在的属性而不会抛出此类错误。在以下示例中，对象 person 中可能存在或不存在名为 'address' 的属性。
const city = person?.address?.city;
如果 person 对象不包含 address 属性，则上述代码将返回 undefined，而不会抛出错误。
2. 逻辑赋值操作符
逻辑赋值操作符结合了逻辑运算符和赋值运算符。这些运算符可以帮助您减少代码量并提高代码的可读性。
例如，您可以在使用变量之前检查其是否已定义，如果未定义，则使用默认值。
在 ES2021 之前，您可能会编写以下代码：
let myVar;
if (myVar === undefined || myVar === null) {
myVar = 'default';
}使用逻辑赋值操作符，以上代码可以简化为：
let myVar; myVar ||= 'default';
第二行代码的意思是，如果 myVar 未定义或值为 null，则使用 'default' 定义它。
3. Promise.allSettled()
Promise.allSettled() 方法接收一个 Promise 数组作为参数，并在所有 Promise 解决之后返回状态信息。例如，您可以使用此方法来检查一批异步操作的结果。
在 ES2021 之前，您需要使用 Promise.all() 来等待所有 Promise 完成，但所有 Promise 都必须成功解决才能继续进行。使用 Promise.allSettled()，即使一个或多个 Promise 失败，您仍然可以收集所有 Promise 的状态信息。
以下是 Promise.allSettled() 的示例用法：
-- -------------------- ---- -------
----- -------- - -
-------------------
------------------------------
------------------
--
----------------------------
------------- -- -
---------------------- -- ----------------------------
---在此示例中，第二个 Promise 是故意被拒绝的，因此 results 数组将包含以下三个对象：
[
{ status: 'fulfilled', value: 1 },
{ status: 'rejected', reason: Error('fail') },
{ status: 'fulfilled', value: 3 }
]您可以在许多情况下使用 Promise.allSettled()，例如批量请求，文件上传或任何需要检查操作成功 / 失败的操作。
4. 数组对象解构
在 ES2021 中，您可以将数组和对象解构混合使用。这样可以帮助您更轻松地从数组中获取值并将其分配给命名变量。
例如，您可以使用以下代码从数组中获取前两个元素并将它们分配给变量：
const arr = [1, 2, 3, 4]; const [a, b] = arr; console.log(a, b); // 1 2
现在，您可以将数组解构与对象解构组合使用。以下面的代码为例，其中 person 对象包含 name 和 age 属性。
const arr = [{ name: 'John', age: 30 }, { name: 'Mary', age: 40 }];
const [{ name: name1 }, { age: age2 }] = arr;
console.log(name1, age2); // John 40在此示例中，name1 立即从第一个对象中获取 name 值，而 age2 是从第二个对象中获取 age 值。
5. String.replaceAll()
在 ES2021 中，您现在可以使用 String.replaceAll() 方法替换字符串中的所有匹配项，而不仅仅是第一次匹配。
例如，以下代码将替换字符串中的所有匹配项：
const str = 'The quick brown fox jumps over the lazy dog';
const newStr = str.replaceAll(' ', '-');
console.log(newStr); // The-quick-brown-fox-jumps-over-the-lazy-dog在此示例中，将替换字符串中的所有空格。
结论
ES2021 提供了一些新的功能和改进，可以帮助您优化代码并减少代码量。使用可选链操作符、逻辑赋值操作符、Promise.allSettled()、数组对象解构和 String.replaceAll()，您可以更轻松地编写 JavaScript 代码。在您下次编写 JavaScript 代码时，请考虑使用这些功能，并确保您的代码遵循最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3ab5bf40ec5a964e42297