在 ECMAScript 2020 中使用 Optional Chaining 解决 undefined 报错-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 中使用 Optional Chaining 解决 undefined 报错

在 JavaScript 中，当我们访问一个对象或者数组的属性或者方法时，如果这个对象或者数组是 undefined，就会抛出一个 undefined 报错。这个问题在我们的前端开发中一直存在，那么该如何解决呢？

现在，在 ECMAScript 2020 中，可以使用 Optional Chaining 运算符来解决这个问题。

Optional Chaining 的语法形式为 ?. 例如，我们有如下对象和数组：

-- -------------------- ---- -------
----- --- - -
  -- -
    -- -
      -- ------ -------
    -
  -
--

----- --- - --- -- ---

我们访问 obj.a.b.c 和 arr[0] 的语句如下：

console.log(obj.a.b.c);  // Hello World!
console.log(arr[0]);     // 1

但是，如果我们访问的属性或者元素不存在呢？例如：

console.log(obj.a.b.d);  // 报错：Cannot read property 'd' of undefined
console.log(arr[3]);     // 输出 undefined

在工业级别的开发项目中，这往往会导致很严重的问题，因此需要解决。

接下来，我们使用 Optional Chaining 运算符来解决上述问题。下面是一些示例：

console.log(obj?.a?.b?.c);   // Hello World!
console.log(obj?.a?.b?.d);   // undefined，没有报错
console.log(arr?.[0]);       // 1
console.log(arr?.[3]);       // undefined，没有报错

我们可以发现，使用 Optional Chaining 运算符之后，不论是对象的属性访问还是数组的元素访问，都不会再因为 undefined 而抛出错误了。如果访问的属性或者元素不存在，都不会出现 undefined 报错。

这种做法的优点十分明显，因为它可以减少 try catch，使我们的代码更加简单明了，也极大地提升了代码健壮性和可靠性。

总结

ECMAScript 2020 中的 Optional Chaining 运算符解决了对象或者数组中不存在属性或者元素而抛出 undefined 报错的问题，降低了我们程序代码的维护成本，提升了代码的可靠性。在我们的前端开发中要积极运用 Optional Chaining 运算符来使我们的代码更加的简洁、清晰、可靠。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/649420e548841e98941a6a48