在 JavaScript 中，我们经常需要访问嵌套对象的属性，但是在访问过程中，我们可能会遇到一些属性不存在的情况。在过去，我们通常使用长长的 if-else 语句来判断属性是否存在，但是这样的代码十分繁琐且不易维护。ES11 新增加的 Optional Chaining 可选链语法，可以让我们更加方便地访问嵌套对象的属性，同时也让我们的代码更加简洁和易读。
可选链语法的基本用法
可选链语法使用问号（?）来表示属性的可选性。例如：
// javascriptcn.com 代码示例
const person = {
name: "Alice",
address: {
city: "Shanghai",
street: "Nanjing Road"
}
};
console.log(person.address?.city); // "Shanghai"
console.log(person.address?.zipCode); // undefined在上面的代码中，我们使用可选链语法来访问 person 对象的 address 属性。如果 address 属性不存在，那么这个表达式会返回 undefined。
可选链语法的高级用法
可选链语法不仅可以用于访问嵌套对象的属性，还可以用于调用对象的方法。
// javascriptcn.com 代码示例
const person = {
name: "Alice",
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello?.(); // "Hello, my name is Alice"
person.sayGoodbye?.(); // undefined在上面的代码中，我们使用可选链语法来调用 person 对象的 sayHello 方法。如果 sayHello 方法不存在，那么这个表达式会返回 undefined。
可选链语法还可以用于访问数组的元素。
const array = [1, 2, 3]; console.log(array?.[0]); // 1 console.log(array?.[3]); // undefined
在上面的代码中，我们使用可选链语法来访问 array 数组的第一个元素。如果数组不存在，这个表达式会返回 undefined。
可选链语法的注意事项
在使用可选链语法时，需要注意以下几点。
- 可选链语法只能用于访问对象的属性、方法和数组的元素。不能用于访问变量、函数等其他类型的值。
- 可选链语法只能用于访问对象的属性、方法和数组的元素。不能用于赋值、删除等操作。
- 可选链语法的左侧表达式必须是一个对象或者数组。
可选链语法的兼容性
可选链语法是 ES11 新增的特性，目前还不是所有的浏览器都支持。在使用可选链语法时，需要使用 polyfill 或者 Babel 等工具进行转换，保证代码在不同浏览器上的兼容性。
总结
可选链语法是一种非常方便的语法，可以让我们更加方便地访问嵌套对象的属性，同时也让我们的代码更加简洁和易读。在使用可选链语法时，需要注意可选链语法的限制以及兼容性问题，以保证代码的正确性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653cb7727d4982a6eb6be569