在前端开发过程中，我们经常需要处理对象的属性，但是对象链中的某些属性可能不存在，我们访问这些不存在的属性时就会出现错误。为了解决这个问题，JavaScript 引入了 Optional Chaining 操作符（可选链操作符）。
可选链操作符介绍
可选链操作符是在属性访问链中使用的一种新的语法，由问号和句点操作符组成（?.），表示如果某个属性不存在，则整个链式调用表达式返回 undefined。
使用可选链操作符可以避免访问不存在的属性时出现错误，而不需要添加大量的冗余代码进行判断。这大大提高了代码的可读性和可维护性。
可选链操作符用例
链式访问对象属性
有时候我们需要访问嵌套对象中的某个属性，但是有可能外层对象或内层对象不存在。使用可选链操作符可以轻松处理这种情况。
-- -------------------- ---- ------- -- ---------- -- ------- -- -------------- -- ----------------------- - ------------------------------------ - ---- - ------------------ - -- -------- ------------------------------------ -- ------
上面的代码中，如果 person 或 person.address 不存在，访问 person.address.country 就会抛出错误。使用可选链操作符可以直接判断这种情况。
链式调用函数
在调用对象的方法时，需要先判断该对象是否存在，如果多个方法需要调用，就会导致代码冗长，可选链操作符将这些判断简化了。
const user = getUser();
if (user && user.profile && user.profile.getAddress && user.profile.getAddress()) {
console.log(user.profile.getAddress());
} else {
console.log("未知地址");
}
console.log(user?.profile?.getAddress?.() ?? "未知地址");使用可选链操作符后，代码更加简洁易读。
注意事项
虽然可选链操作符提供了更加简单的语法来处理对象的属性，但也需要注意一些细节问题。
只能用于对象属性
可选链操作符只能用于访问对象属性或调用对象方法，不能用于访问数组元素或设置对象的属性。
const arr = ["apple", "banana"]; console.log(arr?.[0]); // 报错，可选链操作符不能用于访问数组元素
不支持在赋值运算符左侧使用
可选链操作符不能在赋值运算符的左侧使用，因为它会返回 undefined，而赋值运算符必须接收一个值才能完成赋值操作。
const user = undefined; user?.name = "Jack"; // 报错，可选链操作符不能在赋值运算符的左侧使用
结论
可选链操作符是一个非常实用的特性，它可以轻松处理对象属性不存在、对象的方法不存在等问题，而不需要大量的冗余代码。在日常开发中，使用可选链操作符可以大大简化代码量，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752b8648bd460d3ad97aba8