ECMAScript 2018 中的新特性：JavaScript 可选链
在前端开发中，我们经常需要处理嵌套的对象或数组，获取它们的属性或元素。但是，在处理这些数据时，往往会遇到属性或元素不存在的情况，导致程序崩溃或者出现异常。为了解决这个问题，ECMAScript 2020 提供了一个新特性：JavaScript 可选链。
JavaScript 可选链是一种新的语法，可以在访问对象或数组属性时，判断属性是否存在，如果存在就返回属性值，如果不存在则返回 undefined。这样我们就可以避免因为访问不存在的属性而导致程序出错的问题。
下面是一个简单的示例，展示如何使用可选链来访问嵌套的属性：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- ---- ------
-------- -----
-
--
----- ---- - ---------------------
------------------ -- -- ---- -----
----- ------- - ------------------------
--------------------- -- -- ---------在上面的示例中，我们使用可选链来访问 person 对象的 address 属性的 city 和 zipCode 属性。由于 person 对象的 address 属性存在，所以访问 city 属性会返回 New York。而 zipCode 属性不存在，所以访问 zipCode 属性会返回 undefined。
除了访问属性，可选链也可以用来访问数组元素。下面是一个示例：
-- -------------------- ---- ------- ----- --- - --- -- --- ----- -------- - ------- ---------------------- -- -- - ----- -------- - ------- ---------------------- -- -- --------- ----- ---------------------------- - --------- ------------------------------------------ -- -- ---------
在上面的示例中，我们使用可选链来访问数组 arr 的第四个元素。由于 arr 数组只有三个元素，访问第四个元素会返回 undefined。使用可选链也会返回 undefined。
除了访问属性和数组元素，可选链还可以用来调用函数。下面是一个示例：
-- -------------------- ---- -------
----- --- - -
---------- -
------------------- ---------
-
--
--------------- -- -- ------- -------
------------------ -- -- ------- -------
----- ------------ - ----------
--------------------------- -- ---- -------- --------在上面的示例中，我们使用可选链来调用 obj 对象的 sayHello 方法。由于 obj 对象存在，所以调用 sayHello 方法会输出 Hello, world!。使用可选链也会输出 Hello, world!。而当 undefinedObj 为 undefined 时，使用可选链调用 sayHello 方法不会报错，也不会调用该方法。
总结
JavaScript 可选链是 ECMAScript 2020 中的一项新特性，它可以在访问对象或数组属性时，判断属性是否存在，避免因为访问不存在的属性而导致程序出错的问题。可选链不仅可以访问属性和数组元素，还可以调用函数。在实际开发中，我们可以使用可选链来处理嵌套的数据，提高程序的健壮性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ccf566add4f0e0ff6548b9