在前端开发过程中，经常会遇到需要对对象或者数组的属性或元素进行访问，但是由于数据存在不存在的情况，如果直接访问该属性或元素，有可能会导致代码产生错误从而造成程序崩溃。为了解决这样的问题，在 ES2021 中引入了可选链操作符。
可选链操作符是什么
可选链操作符（Optional Chaining Operator）是是一种新的语法，使用问号（?）来判断对象或数组中是否存在某个属性或元素。如果该属性或元素不存在，则返回 undefined，而不是报错。
可以使用这个操作符来代替简单的 if 语句，从而更加简化代码的实现。具体来说，可选链操作符通常结合条件运算符（?.）使用，表示如果对象前面的值为真，则继续调用对象后面的属性，反之返回 undefined。
下面是一个例子：
const obj = {a: {b: {c: 'hello world'}}};
console.log(obj?.a?.b?.c); // "hello world"
console.log(obj?.a?.d?.e); // undefined在上面的例子中，obj?.a?.b?.c 可以保证在属性值存在的情况下打印出 'hello world'，而 obj?.a?.d?.e 由于 a 对象中不存在 d 属性，所以返回 undefined。
用途和优势
可选链操作符的出现，可以极大地简化代码的编写，并且降低了代码出错的风险。在实际的开发中，尤其是在处理非常复杂的数据结构时，可选链操作符可以用来处理在数据结构中查找值的边界条件。
以下是可选链操作符的一些优势：
代码更加简洁：使用可选链操作符，可以避免出现大量的 if-else 判断语句，代码更加简洁易懂。
容错能力更强：使用可选链操作符，可以避免由于数据不存在而导致的错误，代码更加健壮。
可读性更高：对于复杂的数据结构，使用可选链操作符可以使代码更加清晰易读。
注意事项
在使用可选链操作符时，需要注意一些细节。
字符串和数字不能使用可选链操作符。
数组和对象都可以使用可选链操作符。
使用可选链操作符时，需要考虑数据是否为空或者未定义。
示例代码
下面是一些例子示范可选链操作符的使用：
-- -------------------- ---- -------
----- ---- - -
----- -
----- -------
---- ---
------- --------
--
-------- -
------- ----- ---- ----
----- ----------
------ -----
---- -------
-
--
------------------------------ -- ------
------------------------------- -- ---------
----- ------- - --- -- -- --- -- ----
-------------------------- -- -
------------------------------- -- -
----- -------- - -
----- ----
--
---------------------------------- -- ---------总结
ES2021 中的可选链操作符为我们提供了一种更加便捷、简单和可读性的访问和判断对象属性的方法。在处理复杂的数据结构时，可选链操作符可以帮助我们更加安全、高效地获取数据。
在实际开发中，我们可以通过可选链操作符来提高代码质量，减少代码错误，提高代码的稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6521b58495b1f8cacd9273d1