在前端开发中，我们经常需要处理从后端传来的数据。但是有时候我们并不能保证数据的完整性，可能会出现一些字段的值为 undefined。这时候如果我们直接使用这个 undefined 值进行操作，就会导致代码出错，甚至影响整个应用的正常运行。ES10 中新增了可选链操作符，可以很好地解决这个问题。
可选链操作符的基本用法
可选链操作符是 ?.，它可以用于访问对象的属性或调用对象的方法，如果访问的属性或方法不存在，则返回 undefined，而不是抛出错误。
下面是一个简单的示例：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- --
--
--
--
------------------------- -- -
------------------------- -- ---------
--------------------------- -- ---------在这个示例中，我们使用了可选链操作符来访问 obj 对象的属性和方法。如果属性或方法不存在，则返回 undefined，而不是抛出错误。
可选链操作符的深度使用
可选链操作符不仅可以用于访问对象的属性或调用对象的方法，还可以用于访问数组元素。同时，我们还可以使用多个可选链操作符进行深度访问。
下面是一个深度访问对象属性和数组元素的示例：
-- -------------------- ---- -------
----- --- - -
-- -
-
-- -
-- --
--
--
--
--
------------------------------ -- -
------------------------------ -- ---------
--------------------------- -- ---------在这个示例中，我们使用了多个可选链操作符来深度访问 obj 对象的属性和数组元素。如果属性或元素不存在，则返回 undefined，而不是抛出错误。
可选链操作符的应用场景
可选链操作符的应用场景非常广泛，下面简单介绍几个常见的应用场景。
1. 访问嵌套对象属性
在处理后端传来的数据时，经常会遇到嵌套对象的情况。如果直接访问嵌套对象的属性，可能会因为某个属性不存在而导致代码出错。使用可选链操作符可以避免这个问题。
-- -------------------- ---- -------
----- ---- - -
----- -
----- ------
---- ---
-------- -
----- ----------
--
--
--
-------------------------------------- -- -------
------------------------------------------ -- ---------2. 调用嵌套对象方法
同样地，在处理后端传来的数据时，经常会遇到嵌套对象的方法调用。如果直接调用嵌套对象的方法，可能会因为某个方法不存在而导致代码出错。使用可选链操作符可以避免这个问题。
-- -------------------- ---- -------
----- ---- - -
----- -
--------- -
------ ------
--
--
--
------------------------------------ -- ---
----------------------------------- -- ---------3. 访问数组元素
在处理后端传来的数据时，经常会遇到数组。如果直接访问数组元素，可能会因为数组越界而导致代码出错。使用可选链操作符可以避免这个问题。
const arr = [1, 2, 3]; console.log(arr?.[0]); // 1 console.log(arr?.[3]); // undefined
总结
ES10 中新增的可选链操作符可以很好地解决 undefined 错误问题，应用场景非常广泛。在处理后端传来的数据时，使用可选链操作符可以避免因为数据不完整而导致的代码出错。同时，可选链操作符还可以用于访问数组元素和多层嵌套对象的属性和方法。在实际开发中，我们应该充分利用可选链操作符，提高代码的健壮性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662b054ad3423812e4866b9d