ECMAScript 2021：使用 Optional Chaining 解决 JavaScript 代码彼此依赖的问题-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2021：使用 Optional Chaining 解决 JavaScript 代码彼此依赖的问题

在编写 JavaScript 代码时，经常会遇到代码彼此依赖的问题。例如，当我们需要获取一个对象的某个属性值时，我们需要先判断该对象是否存在，否则会抛出 TypeError 错误。这种情况下，我们往往需要使用 if 判断语句来避免错误的发生。但是，这样的代码往往会变得冗长且难以维护。

为了解决这个问题，ECMAScript 2021 引入了 Optional Chaining 运算符。这个运算符可以让我们轻松地处理对象属性的链式调用，而不必担心对象不存在的情况。

Optional Chaining 运算符的语法如下：

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

从语法上来看，Optional Chaining 运算符与一般的点号和方括号访问属性的方式非常相似。不同之处在于，Optional Chaining 运算符后面跟着一个问号，表示如果该对象不存在，则直接返回 undefined，而不是抛出 TypeError 错误。

下面是一个使用 Optional Chaining 运算符的示例代码：

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

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

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

在上面的代码中，我们使用 Optional Chaining 运算符来获取 user 对象的 address 属性和 zip 属性的值。由于 user 对象存在，因此我们可以成功地获取到 zip 属性的值。而当我们尝试获取 phone 属性的值时，由于该属性不存在，Optional Chaining 运算符会直接返回 undefined，而不会抛出 TypeError 错误。

除了访问对象属性之外，我们还可以使用 Optional Chaining 运算符来调用函数。例如：

const user = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

user?.sayHello?.(); // 输出 "Hello, my name is Alice."

在上面的代码中，我们使用 Optional Chaining 运算符来调用 sayHello 方法。由于 user 对象存在，因此我们可以成功地调用该方法。而当我们尝试调用不存在的方法时，Optional Chaining 运算符会直接返回 undefined，而不会抛出 TypeError 错误。

总结

Optional Chaining 运算符是 ECMAScript 2021 中引入的一个非常有用的特性，可以帮助我们轻松地处理对象属性的链式调用，而不必担心对象不存在的情况。使用 Optional Chaining 运算符可以让我们的代码更加简洁、易读和易于维护。

如果你想了解更多关于 Optional Chaining 运算符的内容，可以查看 ECMAScript 2021 的官方文档。同时，也建议在实际开发中尽可能地使用 Optional Chaining 运算符，以提高代码的可读性和可维护性。

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