打造更加稳定的项目：避免 ES12 错误陷阱-JavaScript中文网-JavaScript教程资源分享门户

ES12（也称为 ES2021）是 JavaScript 的最新版本之一，它引入了许多新的功能和语法。在使用这些新功能时，我们需要特别注意可能会遇到的错误陷阱，以确保项目的稳定性。本文将介绍一些常见的 ES12 错误陷阱，并提供解决方案和示例代码。

1. 可选链操作符的使用

可选链操作符（Optional Chaining Operator）是 ES12 中引入的新语法，它可以使我们更加方便地访问对象的属性和方法，避免了出现空指针异常。但是，在使用可选链操作符时，我们需要特别注意一些细节，以避免出现错误。

1.1. 链式调用中的错误

在使用可选链操作符时，我们可能会遇到链式调用中的错误。例如，以下代码：

const obj = { a: { b: { c: 1 } } };
const value = obj?.a?.b?.d;

在这个例子中，我们访问了一个不存在的属性 d，但是由于使用了可选链操作符，代码并没有抛出异常，而是将 value 赋值为 undefined。这可能会导致我们在后续代码中出现意外的错误。

为了避免这种情况，我们可以在链式调用的最后一层使用默认值：

const value = obj?.a?.b?.d ?? defaultValue;

这样，如果属性不存在，就会返回默认值，避免出现意外错误。

1.2. 函数调用中的错误

另一个需要注意的地方是函数调用中的错误。例如，以下代码：

const obj = { a: { b: { c: () => 1 } } };
const value = obj?.a?.b?.c?.();

在这个例子中，我们访问了一个不存在的函数 c，但是由于使用了可选链操作符，代码并没有抛出异常，而是将 value 赋值为 undefined。这可能会导致我们在后续代码中出现意外的错误。

为了避免这种情况，我们可以在函数调用的最后一层使用默认函数：

const value = obj?.a?.b?.c?.() ?? defaultFunction();

这样，如果函数不存在，就会调用默认函数，避免出现意外错误。

2. Promise.allSettled 的使用

Promise.allSettled 是 ES12 中引入的新函数，它可以同时处理多个 Promise 对象，等待它们全部完成或拒绝，并返回一个包含每个 Promise 结果的数组。但是，在使用 Promise.allSettled 时，我们需要特别注意一些细节，以避免出现错误。

2.1. 处理拒绝的 Promise

在使用 Promise.allSettled 时，我们需要特别注意处理拒绝的 Promise。例如，以下代码：

const promises = [Promise.resolve(1), Promise.reject(2)];
const results = await Promise.allSettled(promises);

在这个例子中，我们同时处理了一个已解决的 Promise 和一个已拒绝的 Promise。如果我们不处理拒绝的 Promise，代码会抛出异常并终止执行。

为了避免这种情况，我们可以在结果数组中使用 status 属性来判断每个 Promise 的状态：

const promises = [Promise.resolve(1), Promise.reject(2)];
const results = await Promise.allSettled(promises);
results.forEach(result => {
  if (result.status === 'rejected') {
    console.error(result.reason);
  }
});

这样，即使有 Promise 被拒绝，代码也不会抛出异常。

2.2. 处理超时的 Promise

另一个需要注意的地方是处理超时的 Promise。在使用 Promise.allSettled 时，我们可以使用 Promise.race 来处理超时的 Promise。例如，以下代码：

const promises = [Promise.resolve(1), new Promise((resolve, reject) => {
  setTimeout(() => reject('timeout'), 1000);
})];
const results = await Promise.allSettled(promises);
const timeoutIndex = results.findIndex(result => result.reason === 'timeout');
if (timeoutIndex >= 0) {
  console.error('Promise timeout');
} else {
  const values = results.map(result => result.value);
  console.log(values);
}

在这个例子中，我们使用了一个超时的 Promise，如果超时了，就会在结果数组中找到对应的 Promise，并抛出超时错误。

3. 总结

ES12 引入了许多新的功能和语法，使得我们可以更加方便地编写 JavaScript 代码。然而，在使用这些新功能时，我们需要特别注意可能会遇到的错误陷阱，以确保项目的稳定性。本文介绍了一些常见的 ES12 错误陷阱，并提供了解决方案和示例代码，希望能够帮助读者避免这些错误，打造更加稳定的项目。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bf3637add4f0e0ff8bdec8