在 ECMAScript 2020 (ES11) 中，optional chaining 式联合运算符是一项新的特性。该特性可以让开发者在处理对象属性或数组元素时，避免出现 undefined 或 null 引用错误。本文将详细介绍 optional chaining 运算符的使用方法和注意事项。
optional chaining 运算符的语法
optional chaining 运算符的语法是 ?.，它可以用在对象属性或数组元素访问的末尾，表示如果该属性或元素存在，则进行访问，否则返回 undefined。
例如，假设我们有一个对象 person，它有一个 address 属性，address 属性又有一个 city 属性：
----- ------ - -
----- --------
-------- -
----- ----------
-
--我们可以使用 optional chaining 运算符来访问 person 对象的 address 属性和 city 属性：
----- ---- - ---------------------- ------------------ -- ----------
如果 person 对象没有 address 属性，或者 address 对象没有 city 属性，那么 city 变量将会是 undefined。
optional chaining 运算符的使用场景
在对象属性访问中使用
在对象属性访问中，optional chaining 运算符可以避免出现 undefined 或 null 引用错误。例如：
----- ------ - -
----- --------
-------- -
----- ----------
-
--
-- ----
----- ---- - -------------- -- --------------------
-- -------- -------- --
----- ---- - ----------------------如果 person 对象没有 address 属性，或者 address 对象没有 city 属性，普通写法会抛出 TypeError 错误，而 optional chaining 写法会返回 undefined。
在数组元素访问中使用
在数组元素访问中，optional chaining 运算符可以避免出现 undefined 或 null 引用错误。例如：
----- --- - --- -- --- -- ---- ----- ----- - ------ -- ------------------ -- -------- -------- -- ----- ----- - ---------------------
如果 arr 数组没有第三个元素，或者第三个元素不是数字类型的，普通写法会抛出 TypeError 错误，而 optional chaining 写法会返回 undefined。
在函数调用中使用
在函数调用中，optional chaining 运算符可以避免出现 undefined 或 null 引用错误。例如：
----- ------ - -
----- --------
-------- -
----- ----------
-
--
-- ----
----- ---- - -------------- -- -------------------------
-- -------- -------- --
----- ---- - -----------------------------如果 person 对象没有 address 属性，或者 address 对象没有 getCity 方法，普通写法会抛出 TypeError 错误，而 optional chaining 写法会返回 undefined。
注意事项
不能用于赋值操作
optional chaining 运算符只能用于访问对象属性或数组元素，不能用于赋值操作。例如：
----- ------ - -
----- --------
-------- -
----- ----------
-
--
--------------------- - ---------- -- ---------- ------ --- -------- ------ -- ---------如果我们想要修改 person 对象的 city 属性，可以使用普通写法：
-- ------- -- --------------- - ------------------- - ---------- -
不能用于函数的调用参数
optional chaining 运算符不能用于函数的调用参数，因为函数调用参数必须是一个值。例如：
----- ------ - -
----- --------
-------- -
----- ----------
-
--
-- ----
--------------------------------------- -- ----
-- ----
-- ------- -- -------------- -- ----------------------- -
------------------------------------- -- ----
-不能与 delete 运算符一起使用
optional chaining 运算符不能与 delete 运算符一起使用，因为 delete 运算符需要一个左值表达式，而 optional chaining 运算符的结果可能是 undefined。例如：
----- ------ - -
----- --------
-------- -
----- ----------
-
--
-- ----
------ ----------------
-- ----
-- ------- -- --------------- -
------ ---------------
-示例代码
下面是一个使用 optional chaining 运算符的示例代码：
----- ------ - -
----- --------
-------- -
----- ----------
--
-------- -
- ----- ---------- ------ ------ --
- ----- ----------- ------ -------- --
- ----- ---------- ------ ----- -
-
--
----- ---- - ----------------------
------------------ -- ----------
----- ----- - ---------------------------
------------------- -- ---------
----- ----- - -----------------------------------
------------------- -- ---------总结
optional chaining 运算符是 ECMAScript 2020 (ES11) 中的一项新特性，可以避免在对象属性或数组元素访问时出现 undefined 或 null 引用错误。在使用 optional chaining 运算符时需要注意不能用于赋值操作、函数的调用参数和 delete 运算符，需要特别注意代码的兼容性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d09090add4f0e0ff98331f