前言
在日常的前端开发中，我们经常会遇到访问对象内部属性或方法时出现 undefined 或 null 的情况，导致程序抛出异常。此时，我们需要显式地判断变量是否存在，进而进行处理。但是，这种处理方式会使代码变得冗长，而可选链操作符则为我们提供了更为简洁的处理方式。
什么是可选链操作符？
可选链操作符（Optional Chaining Operator）是 ES2020 中引入的新特性。它允许我们在访问对象属性时，当对象的某一层不存在时，直接得到 undefined 而不是抛出异常。
可选链操作符的语法是 ?.，可以在对象属性、方法、数组元素等地方使用。
可选链操作符的使用
访问对象属性
在旧有的写法中，我们通常会这样判断对象属性是否存在：
-- -------------------- ---- -------
----- --- - -
---- -
---- -------
-
-
-- -------- -- ------------ -
-------------------------
-上面的代码中，我们先判断 obj.foo 是否存在，再判断 obj.foo.bar 是否存在。这种写法虽然可行，但是代码量比较冗长，可选链操作符就能够解决这个问题：
const obj = {
foo: {
bar: 'hello'
}
}
console.log(obj.foo?.bar);上面的代码用 ?. 操作符的方式，直接访问对象属性，当 obj.foo 不存在时将直接返回 undefined。
访问对象方法
对于对象方法的调用，同样可以使用可选链操作符来避免代码崩溃的情况。
-- -------------------- ---- -------
----- --- - -
---- -
----- -
---------------------
-
-
-
----------------上述代码中，通过 ?. 操作符调用对象方法 bar。如果 foo 对象不存在，该语句不会报错，相当于在 foo 上调用不存在的方法一样。
访问数组元素
在访问数组元素的时候，同样可以使用可选链操作符来简化代码：
const arr = [1, 2, 3]; console.log(arr[3]?.foo);
上述代码中，在下标越界的情况下， arr[3] 为 undefined，此时程序不会抛出异常，而是直接返回 undefined。
可选链操作符的嵌套使用
当我们需要访问对象深层嵌套的属性时，传统的判断方式会显得十分冗长。而使用可选链操作符可以有效地解决这个问题。
-- -------------------- ---- -------
----- --- - -
---- -
---- -
--- -- -
--------------------
-
-
-
-
----------------------- -- -- -------我们可以直接使用 ?. 操作符进行访问，如果存在嵌套的属性或方法都会被逐一判断。
经验谈
使用可选链操作符可以更加方便地避免代码崩溃带来的问题，但是它并不能完全替代条件判断。在实际使用过程中，我们还需要结合需求进行判断，决定使用可选链操作符或条件判断的方式。
总结
在本文中，我们对可选链操作符进行了详细的介绍，包括了它的语法和具体的使用场景。同时，我们还聚焦于可选链操作符在对象和数组元素访问中的应用，来帮助读者更好地理解和掌握可选链操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5ac58f6b2d6eab3e7ff6c