如何使用 ECMAScript 2019 中的可选链操作符
在 JavaScript 中，访问嵌套的对象属性或者数组元素时，可能会导致 TypeError。例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
---- -
------ ---- -----------
-------- -
----- ---- ------
--------- -
----- ---- ------
-------- -----
-
-
-
--
---------------------------------------------- -- ---- -----
--------------------------------- -- ---------- ------ ---- -------- ------ -- ---------在上面的例子中，我们想要访问 person 对象中的 address.city 属性，但是因为 address 不存在，导致出现了 TypeError。
为了解决这个问题，我们可以使用 ECMAScript 2019 中引入的可选链操作符（optional chaining operator），它可以帮助我们在访问嵌套的属性或者元素时，避免出现 TypeError。
可选链操作符的语法
可选链操作符是一个 ? 符号，它可以放在对象的属性、数组的元素或者函数调用的后面。例如：
const city = person.job.company.location?.city; console.log(city); // "New York" const address = person?.address?.city; console.log(address); // undefined
上面的例子中，我们使用了可选链操作符来访问对象中的属性和数组中的元素，并且在不存在的情况下返回了 undefined。
可选链操作符的嵌套使用
可选链操作符还可以嵌套使用，用于访问深度嵌套的对象、数组或函数调用。例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
---- -
------ ---- -----------
-------- -
----- ---- ------
--------- -
----- ---- ------
-------- -----
--
---------- -
- ----- ------ ---- -- --
- ----- ---------- ---- -- -
-
--
------------- ---------- -
------ -----------------------
-
-
--
----- ---- - ---------------------------
------------------ -- ---- -----
----- --------- - -------------------------------------------
----------------------- -- -----
----- --------- - ---------------------------------------
----------------------- -- ---------上面的例子中，我们使用了可选链操作符来访问深度嵌套的对象、数组或者函数，避免了出现 TypeError 的情况。
注意事项
虽然可选链操作符可以帮助我们避免出现 TypeError，但是需要注意以下几点：
可选链操作符只能用于 undefined 和 null 上的属性，其他 falsy 值（如 0 和 ""）不会触发它。
对象的方法不能直接访问，需要使用函数调用操作符
()来调用方法。在嵌套使用多个可选链操作符时，注意操作符的顺序和优先级。
总结
可选链操作符是 ECMAScript 2019 中的新特性，它可以帮助我们在访问嵌套的对象、数组或者函数时，避免出现 TypeError。使用可选链操作符可以让我们的代码更加健壮和稳定，但是需要注意可选链操作符的语法和注意事项。
希望本文能够帮助读者更好地理解和使用 ECMAScript 2019 中的可选链操作符，提高前端开发的效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acc27848841e98948c2d34