在前端开发中，经常会遇到处理 null 或 undefined 值的情况，这些值有可能会导致程序执行时出现错误。好消息是，ECMAScript 2020 中新增了 Optional Chaining（可选链） 运算符，可以帮助我们避免这种错误。
Optional Chaining 是什么？
Optional Chaining 是一种简化处理嵌套对象和数组中的值的语法。它使用 ?. 运算符，可以让我们在不处理 null 或 undefined 值的情况下，访问对象或数组中的属性或元素。
例如，使用 Optional Chaining 可以避免以下代码中访问 address 对象属性时出现的错误：
let city = user.address && user.address.city;
用 Optional Chaining 写等效代码如下：
let city = user.address?.city;
如果 user 对象不存在 address 属性，则 city 变量的值为 undefined，而不是引发错误。
如何使用 Optional Chaining？
Optional Chaining 是一种表达式运算符，可以对任何引用类型的值使用。语法为 ?.，后面紧跟着属性或元素的名称或下标。
下面是在访问对象属性和元素时使用 Optional Chaining 的示例：
-- -------------------- ---- -------
--- --- - -
------ -
------ -
------ -------
-
-
--
-- -- -------- -------- ----
--- ------- - ------------------------ -- -------
--- ------- - ------------------------ -- ---------
--- --- - ---------- ----------
-- -- -------- -------- ------
--- ------- - ---------------------- -- --------
--- ------- - ---------------------- -- ---------在上面的代码中，无论 obj 对象是否存在 prop1、prop2 或 prop3 属性，都不会出现错误。如果属性不存在，则返回 undefined。
如何处理 Optional Chaining 的返回值？
通过 Optional Chaining 运算符获取的属性或元素的值要么是 undefined，要么是实际的值。在处理 Optional Chaining 的返回值的时候，我们可以使用默认值，或根据返回值的类型执行不同的处理逻辑。
下面是对 Optional Chaining 返回值进行处理的示例：
-- -------------------- ---- -------
--- --- - -
------ -
------ -
------ -------
-
-
--
-- -- -------- -------- ------
--- ------- - ----------------------- -- ----------
-- ------- ------- --- --------- -
---------------------
-
--- --- - ------ - ----------
-- -- -------- -------- ------
--- ------- - --------------------- -- ------------
-- ------- ------- --- --------- -
---------------------
-在上面的代码中，我们使用 || 运算符来提供默认值。当 Optional Chaining 返回 undefined 值时，会返回默认值。
注意事项
使用 Optional Chaining 需要注意以下事项：
- Optional Chaining 是 ECMAScript 2020 中新增的语法，不是所有浏览器都支持。在使用之前，可以使用 babel 进行转换。
- Optional Chaining 只能处理
null或undefined值。如果对象或数组中的值是0、空字符串或false，不会触发 Optional Chaining，会直接返回该值。 - Optional Chaining 只能用于引用类型（如对象、数组、函数等），不能用于基本数据类型（如字符串、数值、布尔值等）。
结论
Optional Chaining 是一种简化处理嵌套对象和数组中的值的语法。使用 Optional Chaining，可以避免访问属性或元素时出现的错误。在处理 Optional Chaining 的返回值时，可以使用默认值，或根据返回值的类型执行不同的处理逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747d27d5883fc5ebfe45f5f