在前端开发中，我们经常需要处理对象的属性。然而，当对象的某个属性不存在时，我们就需要进行一些特殊的处理。在过去，我们通常使用 if 语句来检查属性是否存在。但是，这样的代码往往会变得冗长而难以维护。为了解决这个问题，ES12 引入了可选链运算符，使得我们可以更方便地处理对象属性的存在性问题。
可选链运算符的概念
可选链运算符（Optional Chaining Operator）是一种新的运算符，它用于检查对象的属性是否存在。如果属性存在，则返回属性的值；如果属性不存在，则返回 undefined。可选链运算符的语法如下：
obj?.prop obj?.[expr] func?.(args)
其中，obj 是一个对象，prop 是对象的属性名，expr 是一个表达式，func 是一个函数，args 是函数的参数列表。
可选链运算符的问号（?）表示如果 obj 不存在或者 obj.prop 不存在，则返回 undefined，否则返回 obj.prop 的值。在使用可选链运算符时，我们不需要显式地检查 obj 是否存在，因为可选链运算符会自动处理这个问题。
可选链运算符的应用
1. 访问对象的属性
下面的代码演示了如何使用可选链运算符访问对象的属性：
-- -------------------- ---- -------
--- ------ - -
----- ------
-------- -
----- ---------
-
--
--- ---- - ----------------------
------------------ -- ---------
--- --- - ------------
----------------- -- ---------在这个例子中，我们使用可选链运算符访问了 person 对象的 address 属性和 city 属性。由于 person 对象存在，并且 person.address 和 person.address.city 也存在，因此 city 的值为 'Beijing'。而 age 属性不存在，因此 age 的值为 undefined。
2. 调用对象的方法
除了访问对象的属性，我们还可以使用可选链运算符调用对象的方法。下面的代码演示了如何使用可选链运算符调用对象的方法：
-- -------------------- ---- -------
--- ------ - -
----- ------
---------- -
------------------- -- ---- -- ----------------
-
--
--------------------- -- ------- -- ---- -- -----
--- ------- - -
----- -------
--
---------------------- -- ---------在这个例子中，我们使用可选链运算符调用了 person 对象的 sayHello 方法。由于 person 存在，并且 person.sayHello 也存在，因此调用 sayHello 方法可以成功执行。而 student 对象不存在 sayHello 方法，因此调用 sayHello 方法会返回 undefined。
3. 访问数组元素
除了访问对象的属性和调用对象的方法，我们还可以使用可选链运算符访问数组元素。下面的代码演示了如何使用可选链运算符访问数组元素：
let arr = [1, 2, 3]; let first = arr?.[0]; console.log(first); // 1 let fourth = arr?.[3]; console.log(fourth); // undefined
在这个例子中，我们使用可选链运算符访问了 arr 数组的第一个元素和第四个元素。由于 arr 存在，并且 arr[0] 也存在，因此 first 的值为 1。而 arr[3] 不存在，因此 fourth 的值为 undefined。
总结
可选链运算符是一种非常实用的运算符，它可以简化代码，减少错误，提高开发效率。在使用可选链运算符时，我们需要注意以下几点：
- 可选链运算符只能用于访问对象的属性、调用对象的方法和访问数组元素。
- 可选链运算符只能用于 ES12 或更高版本的 JavaScript 中。
- 在使用可选链运算符时，我们需要注意 undefined 和 null 的区别，因为可选链运算符只能处理 undefined，不能处理 null。
如果你正在使用 ES12 或更高版本的 JavaScript，那么你应该尽可能地使用可选链运算符来处理对象属性的存在性问题。这样可以使你的代码更加简洁、可读，也可以减少错误的发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a71ffd10417a222a0b1d1