在前端开发中，经常会遇到 undefined 的情况，这是很常见的 bug。ES11（也称 ECMAScript 2020）引入了 Optional Chaining 运算符，它可以帮助我们减少或者避免 undefined 的问题。
Optional Chaining 是什么？
Optional Chaining 运算符（?.）是一个 JavaScript 的新特性，它允许我们在访问对象的属性或者方法时，如果某个属性或者方法不存在，不会出现 undefined 的情况，而是直接返回 undefined。
举个例子，如下：
-- -------------------- ---- ------- --- ------ - - ---------- ------- --------- ------ -------- - ----- ---- ------ ------ ----- -- -- --- ---- - -------------------- ------------------展开代码
在上面的代码中，我们获取 person 对象中地址的城市 city。如果 person 对象中没有 address 对象，那么获取 city 会出现 undefined 的情况。为了避免这种情况，我们可以使用 Optional Chaining 运算符，如下：
let city = person?.address?.city; console.log(city);
使用 Optional Chaining 运算符，即使 address 不存在，代码也不会报错，city 的值会直接变成 undefined。
Optional Chaining 的用法
Optional Chaining 运算符可以用于对象和数组。它可以嵌套使用，也可以与其他运算符（比如 delete、typeof、索引访问）一起使用。
对象
使用 Optional Chaining 运算符来访问对象的属性和方法：
-- -------------------- ---- ------- --- ------ - - ---------- ------- --------- ------ -------- - ----- ---- ------ ------ ----- -- -- --- ---- - ---------------------- --- --- - --------------------- --- -------- - ----------------- - - - - ----------------- ------------------ -- ---- ----- ----------------- -- --------- ---------------------- -- ----- ----展开代码
在这个例子中，我们已经看到了 Optional Chaining 的不同用法：obj?.prop 来访问对象的属性和 obj?.method() 来访问对象的方法。
数组
使用 Optional Chaining 运算符来访问数组的元素：
let arr = [1, 2, 3]; let second = arr?.[1]; let fourth = arr?.[3]; console.log(second); // 2 console.log(fourth); // undefined
这里我们使用了 Optional Chaining 来访问数组的元素。
Optional Chaining 的注意事项
尽管 Optional Chaining 可以帮助我们避免 undefined 的情况，但是我们仍然需要注意一些限制：
- Optional Chaining 运算符只能用于属性和方法的访问，不能用于变量的声明或者赋值。
- 在使用 Optional Chaining 的过程中，需要注意它的上下文，否则可能会出现错误的结果。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- ------- --- ------ - - ---------- ------- --------- ------ -------- - ----- ---- ------ ------ ----- -- -- ---------------------------------- -- --------- ----------------------------------- -- ---- ----- ----------------------------- - - - - ------------------ -- ----- ---- --- --- - --- -- --- ---------------------- -- --------- ---------------------- -- -展开代码
结语
Optional Chaining 运算符是一个非常实用的特性，它能使我们避免在访问对象或者数组的属性或者方法时出现 undefined 的情况。了解这个特性可以让我们更加高效地编写 JavaScript 代码，同时减少出错的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bda1dca231b2b7ed04d49c
