ES11 中如何使用 Optional Chaining 运算符
在前端开发中，经常会遇到需要访问深层次嵌套对象或数组的情况。在处理这些数据时，如果不小心访问了一个不存在的属性或方法，就会导致程序崩溃。为了解决这个问题，ES11 新增了 Optional Chaining 运算符，可以更加方便地访问嵌套对象或数组中的属性和方法。
Optional Chaining 运算符的语法是 ?.，它可以在访问对象或数组的属性或方法时，判断该属性或方法是否存在，如果存在就返回它的值，如果不存在就返回 undefined。这样就不用再使用繁琐的 if 判断语句来处理不存在的属性或方法了。
下面是一个使用 Optional Chaining 运算符的示例代码：
// javascriptcn.com 代码示例
const user = {
name: '张三',
address: {
city: '北京',
street: '朝阳区',
zipCode: '100000'
}
};
console.log(user?.address?.city); // 输出：北京
console.log(user?.address?.country); // 输出：undefined在上面的代码中，我们通过 Optional Chaining 运算符访问了 user 对象的 address 属性和 city 属性。如果 address 属性或 city 属性不存在，就会返回 undefined。
除了访问对象的属性，Optional Chaining 运算符还可以访问数组的元素和方法。下面是一个访问数组的示例代码：
const arr = [1, 2, 3]; console.log(arr?.[0]); // 输出：1 console.log(arr?.[3]); // 输出：undefined console.log(arr?.length); // 输出：3 console.log(arr?.push(4)); // 输出：4
在上面的代码中，我们通过 Optional Chaining 运算符访问了 arr 数组的第一个元素、第四个元素、length 属性和 push 方法。如果第四个元素不存在，就会返回 undefined。
需要注意的是，Optional Chaining 运算符只能用于访问属性或方法，不能用于赋值操作。如果需要赋值操作，可以使用 nullish coalescing 运算符 ??。
总结
ES11 中的 Optional Chaining 运算符可以方便地访问嵌套对象或数组中的属性和方法，避免了访问不存在属性或方法时的程序崩溃。使用 Optional Chaining 运算符可以让代码更加简洁和易读，提高开发效率。
在实际开发中，我们可以结合 Optional Chaining 运算符和 nullish coalescing 运算符来处理复杂的数据结构，让代码更加健壮和可靠。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6569dad0d2f5e1655d25cbb5