在前端开发中，经常会遇到 undefined 的错误，尤其是在处理 JSON 数据时。为了避免这种错误，ES10 中增加了可选链运算符（Optional Chaining Operator）。
可选链运算符的作用
可选链运算符可以在对象有值的情况下，访问对象的属性或方法，而不会因为对象的某个属性为 undefined 而报错。
在之前，我们需要对对象进行多次判断，才能避免这个错误：
if (person && person.info && person.info.address && person.info.address.street) {
console.log(person.info.address.street);
}但是在可选链运算符的帮助下，我们只需要这样写：
console.log(person?.info?.address?.street);
这样就可以避免 undefined 的错误了。
如何使用可选链运算符
可选链运算符 ?. 可以用在任何属性或方法的后面，表示在对象有值的情况下才去访问这个属性或方法。在对象没有值的情况下，不会报错，而是返回 undefined。
下面是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
----- -
-------- -
------- ---- ---- -----
----- ----------
------ -----
---- -------
-
-
--
------------------------------------------- -- ---- ---- ----
----------------------------------------- -- ---------在上面的示例中，我们使用了 ?. 来访问 person 对象中的 info 属性、address 属性和 street 属性。在 info 属性和 address 属性有值的情况下，我们才能访问 street 属性，否则返回 undefined。另外，当对象没有 phone 属性时，我们访问 phone 的 number 属性也会返回 undefined。
注意事项
值得注意的是，在使用可选链运算符时，我们不能在属性名前使用句点。这是因为在这种情况下，句点不再表示属性访问符，而是表示正常的句号。所以，我们需要将属性名放在方括号中：
-- -------------------- ---- -------
----- ------ - -
------------- --------
----- -
-------- -
------- ---- ---- -----
----- ----------
------ -----
---- -------
-
-
--
------------------------------------ -- -------结论
使用 ES10 中的可选链运算符，可以更轻松地访问对象的属性和方法，避免 undefined 的错误。同时，它也使代码更加简洁、清晰，在处理较为复杂的 JSON 数据时，尤其有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67161154ad1e889fe21a8934