简介
ES2020 引入了 Optional Chaining 运算符，这是一个非常有用的运算符，可以在 JavaScript 中简化代码并减少错误。本文将介绍 Optional Chaining 运算符的语法和用法，并提供一些示例代码。
Optional Chaining 运算符的语法
Optional Chaining 运算符使用问号 ? 来表示。它的语法如下：
obj?.prop obj?.[expr] arr?.[index] func?.(args)
这里的 obj 可以是任何对象，prop 是对象的属性名，expr 是计算属性的表达式，arr 是数组，index 是数组的索引，func 是函数，args 是函数的参数列表。
如果 obj 为 null 或 undefined，则整个表达式的值为 undefined，否则就会按照正常的方式访问属性或调用函数。
Optional Chaining 运算符的用法
访问对象的属性
在访问对象的属性时，可以使用 Optional Chaining 运算符来避免出现 TypeError: Cannot read property 'xxx' of null 或 TypeError: Cannot read property 'xxx' of undefined 的错误。
-- -------------------- ---- -------
----- --- - -
---- -
---- -----
-
--
--------------------------- -- -----
--------------------------- -- ---------
--------------------------- -- ---------计算属性名
在计算属性名时，也可以使用 Optional Chaining 运算符。
-- -------------------- ---- -------
----- --- - -
---- -
---------- -----
-
--
----------------------------------- -- -----
------------------------------------ -- ---------
------------------------------------ -- ---------访问数组元素
在访问数组元素时，也可以使用 Optional Chaining 运算符。
const arr = [
{ foo: 'bar' },
{ baz: 'qux' }
];
console.log(arr?.[0]?.foo); // 'bar'
console.log(arr?.[1]?.baz); // 'qux'
console.log(arr?.[2]?.qux); // undefined调用函数
在调用函数时，也可以使用 Optional Chaining 运算符。
-- -------------------- ---- -------
----- --- - -
---- -
---- ---------- -
------ ------
-
-
--
------------------------------- -- -----
------------------------------- -- ---------
------------------------------- -- ---------示例代码
下面是一些使用 Optional Chaining 运算符的示例代码。
示例 1：避免出现错误
-- -------------------- ---- -------
----- ------ - -
----- -------
-------- -
----- ---- ------
------ ----
-
--
-- ----
-- ------- -- -------------- -- -------------------- -
---------------------------------
-
-- -- -------- -------- ---
-----------------------------------示例 2：使用默认值
-- -------------------- ---- ------- ----- ------ - - ----- ------ -- -- ---- ----- ---- - -------------- - ------------------- - ---------- -- -- -------- -------- --- ----- ---- - --------------------- -- ----------
示例 3：动态调用函数
-- -------------------- ---- -------
----- --- - -
---- ---------- -
------ -
---- ---------- -
------ ------
-
--
-
--
-- ----
-- ---- -- ------- -- -------------- -
-----------------------------
-
-- -- -------- -------- ---
-----------------------------------总结
Optional Chaining 运算符是一个非常有用的运算符，可以在 JavaScript 中简化代码并减少错误。它可以用于访问对象的属性、计算属性名、访问数组元素和调用函数。使用 Optional Chaining 运算符可以让代码更加简洁和易读，同时也可以提高代码的健壮性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66162ccad10417a222612f12