在前端开发中，我们经常需要访问对象或数组中的属性或方法。但是，有些情况下，我们无法确定对象或数组是否存在某个属性或方法，这时候就需要使用一种安全的访问方式，以避免出现 undefined 或 null 的错误。ES12 中新增的可选链式操作符就是为此而生的。
可选链式操作符的作用
可选链式操作符（Optional Chaining Operator）是一种简化代码的语法糖，它可以让我们在访问对象或数组的属性或方法时，避免出现 TypeError 错误。
在 ES6 中，我们通常使用如下方式来访问对象或数组的属性或方法：
if (obj && obj.prop && obj.prop.method) {
obj.prop.method();
}这种方式虽然可行，但是代码看起来冗长而且难以阅读。而使用可选链式操作符，则可以简化上述代码：
obj?.prop?.method?.();
这种方式更加优雅，不仅代码量减少了，而且可读性也得到了提高。
可选链式操作符的语法
可选链式操作符的语法非常简单，就是在访问对象或数组的属性或方法时，加上问号（?）：
obj?.prop?.method?.();
上述代码中，问号（?）表示 obj、prop 和 method 可能不存在，如果存在，则执行相应的方法。如果不存在，则返回 undefined 而不是抛出 TypeError 错误。
除了访问属性或方法，可选链式操作符还可以用于数组的索引访问：
arr?.[index]?.method?.();
在上述代码中，问号（?）表示 arr 和 index 可能不存在，如果存在，则执行相应的方法。如果不存在，则返回 undefined 而不是抛出 TypeError 错误。
可选链式操作符的应用场景
可选链式操作符的应用场景非常广泛，特别是在访问嵌套的对象或数组时，更是派上用场。
访问嵌套对象
在访问嵌套对象时，我们通常需要判断每个对象是否存在，这样代码会变得非常冗长：
if (obj && obj.prop && obj.prop.nestedProp && obj.prop.nestedProp.method) {
obj.prop.nestedProp.method();
}而使用可选链式操作符，则可以简化上述代码：
obj?.prop?.nestedProp?.method?.();
这种方式不仅代码量减少了，而且可读性也得到了提高。
访问嵌套数组
在访问嵌套数组时，我们通常需要判断每个数组是否存在，这样代码会变得非常冗长：
if (arr && arr[index] && arr[index][nestedIndex] && arr[index][nestedIndex].method) {
arr[index][nestedIndex].method();
}而使用可选链式操作符，则可以简化上述代码：
arr?.[index]?.[nestedIndex]?.method?.();
这种方式不仅代码量减少了，而且可读性也得到了提高。
可选链式操作符的兼容性
可选链式操作符是 ES12 中新增的语法，目前并不是所有的浏览器都支持。但是，我们可以使用 Babel 将代码转换成 ES6 或 ES5 的语法，以兼容更多的浏览器。
可选链式操作符的示例代码
下面是一个使用可选链式操作符的示例代码：
const user = {
name: 'John',
address: {
city: 'New York',
street: '5th Ave',
},
};
console.log(user?.name); // 'John'
console.log(user?.address?.city); // 'New York'
console.log(user?.address?.zipCode); // undefined在上述代码中，我们使用了可选链式操作符来访问嵌套的对象属性。如果属性存在，则返回相应的值；如果不存在，则返回 undefined。
总结
可选链式操作符是一种优雅的资源引用方式，它可以让我们在访问对象或数组的属性或方法时，避免出现 TypeError 错误。使用可选链式操作符可以简化代码，提高可读性。虽然可选链式操作符的兼容性不是很好，但是我们可以使用 Babel 来转换代码，以兼容更多的浏览器。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c0254aadd4f0e0ff9deccf