在 JavaScript 中，我们常常需要对一个对象进行嵌套的访问，例如 obj.a.b.c。然而，如果其中的某个属性为 null 或 undefined，那么访问就会出错，导致程序崩溃。为了解决这个问题，ES12 中引入了可选链操作符 ?.，可以方便地处理这种情况。
可选链操作符的语法
可选链操作符 ?. 可以用来访问对象的属性或方法，它的语法如下：
obj?.prop // 访问对象的属性 obj?.[expr] // 访问对象的动态属性 func?.(args) // 调用对象的方法
其中，obj 为要访问的对象，prop 为对象的属性名，[expr] 为动态属性名，func 为对象的方法，args 为方法的参数列表。
如果 obj 为 null 或 undefined，那么整个表达式的值就是 undefined，不会发生错误。
可选链操作符的示例
下面是一些使用可选链操作符的示例：
-- -------------------- ---- ------- -- ------- --- --- - - -- - -- - -- - - - -- --- --- - ------------- -- --- - - --- ---- - ------------- -- ---- - --------- -- --------- --- ---- - ---- --- ---- - ------------------ -- ---- - - -- ------- --- ---- - - ---- ---------- - ------ ------ - -- --- ---- - -------------- -- ---- - ----- --- ---- - -------------- -- ---- - ---------
可选链操作符与 nullish 合并操作符的结合使用
除了可选链操作符，ES12 还引入了 nullish 合并操作符 ??，可以用来判断一个值是否为 null 或 undefined，并提供默认值。可选链操作符和 nullish 合并操作符可以结合使用，更方便地处理对象的访问。
下面是一个示例：
let obj = { a: { b: { c: 1 } } };
let val = obj?.a?.b?.c ?? 0; // val = 1
let val2 = obj?.x?.y?.z ?? 0; // val2 = 0在上面的示例中，如果属性 c 存在，那么 val 就等于它的值；否则，val 就等于默认值 0。同理，如果属性 z 不存在，那么 val2 就等于默认值 0。
可选链操作符的指导意义
可选链操作符的引入，使得我们可以更加方便地处理对象的访问，避免了因为属性不存在而导致的错误。同时，它也提高了代码的可读性和可维护性，使得代码更加简洁明了。
在使用可选链操作符时，我们应该注意以下几点：
- 可选链操作符只能用于访问对象的属性和方法，不能用于访问数组的元素。
- 可选链操作符只能用于 ES12 或更高版本的 JavaScript 中，不能用于旧版浏览器。
- 可选链操作符虽然可以避免程序崩溃，但并不能解决所有的问题。在处理对象嵌套访问时，我们仍然需要仔细考虑对象的结构和属性的存在性，以保证程序的正确性。
总结
本文详细介绍了 ES12 中的可选链操作符，包括其语法、示例和指导意义。可选链操作符的引入，使得我们可以更加方便地处理对象的访问，避免了因为属性不存在而导致的错误。同时，我们也需要注意可选链操作符的使用限制和注意事项，以保证程序的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662f4edbd3423812e4d42d17