在 ES11 中，增加了可选链操作符（Optional Chaining Operator），这个操作符的作用是可以在访问对象属性时，避免非空校验繁琐的操作，同时也能避免访问到不存在的属性时，程序崩溃的情况。
下面我们来详细了解如何在 JavaScript 中使用可选链操作符。
基本语法
可选链操作符使用问号（?）来代表可选属性，如果属性存在，则返回属性值，如果属性不存在，则返回 undefined。下面是可选链操作符的基本语法：
obj?.prop // 访问 obj 对象的属性 prop obj?.[expr] // 访问 obj 对象的动态属性 expr arr?.[index] // 访问 arr 数组的元素 index func?.(args) // 调用 func 函数
可选链操作符的场景
访问嵌套属性时避免空指针异常
在访问对象的嵌套属性时，如果嵌套的属性不存在，则会抛出空指针异常。使用可选链操作符可以避免这种情况的发生。
-- -------------------- ---- -------
----- ------ - -
----- -----
------ -
----- ------
--
--
------------------------------- -- -----
---------------------------------- -- ---------
--------------------------------------- -- ---------调用函数时参数可选
当传递函数参数时，如果某个参数是可选的，则使用可选链操作符可以避免参数不存在时导致程序崩溃。
function log(info, options) {
console.log(info, options);
}
log('hello', { debug: true });
log('world');
log('test', options?.debug); // 不会报错，options 不存在时，不会调用 log 函数链式调用时避免空指针异常
在链式调用方法时，前面的方法返回的结果可能为 undefined，如果不加任何的非空校验，可能导致程序崩溃。使用可选链操作符可以避免这种情况的发生。
-- -------------------- ---- -------
----- ---- - -
----- -----
------ -
----- -----
----- ------
--
--
----------------------------- -- ----
---------------------------------- -- ---------
-------------------------------------------- -- ---------可选链操作符的注意事项
使用可选链操作符时，需要注意以下几点：
- 必须使用 ES11 及以上版本的 JavaScript 引擎才能支持。
- 可选链操作符后面不能跟括号。
- 可选链操作符不能在赋值操作符左侧使用。
- 可选链操作符与其他操作符的优先级不同，需要加上括号。
示例代码
示例 1：使用可选链操作符访问对象属性
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
------ -
----- -----
----- ------
--
--
----------------------------- -- ----
---------------------------------- -- ---------示例 2：使用可选链操作符调用函数
function test(options) {
console.log(options.debug);
}
test({ debug: true });
test();
test(options?.debug); // 不会报错，options 不存在时，不会调用 test 函数示例 3：使用可选链操作符访问多层嵌套属性
-- -------------------- ---- -------
----- ---- - -
----- -----
-------- -
----- -------
------ -
----- --------
------- -
----- -------
-------- -
----- ------
------- --
--
--
--
--
--
------------------------------------------------------ -- -
--------------------------------------------------- -- ------------------------------------ - ---------
---------------------------------------------------- -- ---------总结
通过本文的介绍，我们对可选链操作符有了深入的了解，它的作用是避免程序在访问不存在的属性时报错，使用起来非常方便。但需要注意，必须使用 ES11 及以上版本的 JavaScript 引擎才能支持。在编写 JavaScript 代码时，我们可以灵活运用可选链操作符，提高代码的健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b7f601add4f0e0ff084572