ES2021 中可选链操作符的使用技巧
在 JavaScript 开发中，我们常常需要处理对象中的嵌套属性。通常情况下，我们会通过一些判断或者条件语句来避免访问不存在的属性而导致程序崩溃。但是这种方式显得非常繁琐和冗长，同时也增加了代码的复杂度。ES2021 中的可选链操作符可以帮助我们简化这个过程，使代码更加简洁和易读。
可选链操作符是一种新的语法，它可以简化访问嵌套属性的过程，并且在访问不存在的属性时不会导致程序崩溃。它的语法是一个问号加上一个点号，例如 ?.，它可以放在对象属性的后面，表示如果该属性存在，就执行该属性的访问，否则返回 undefined。
下面是一个简单的示例，展示了可选链操作符的基本用法：
// javascriptcn.com 代码示例
const user = {
name: '张三',
age: 18,
address: {
city: '北京',
street: '朝阳区',
},
};
console.log(user?.name); // 输出 "张三"
console.log(user?.address?.city); // 输出 "北京"
console.log(user?.phone?.number); // 输出 undefined在上面的代码中，我们使用了可选链操作符来访问 user 对象的属性。在第一个例子中，我们访问了 name 属性，因为它存在，所以输出了它的值。在第二个例子中，我们访问了嵌套的 address.city 属性，同样也输出了它的值。在第三个例子中，我们访问了不存在的 phone.number 属性，因此输出了 undefined。
除了访问属性之外，可选链操作符还可以用来调用方法。如果方法存在，就执行该方法，否则返回 undefined。下面是一个示例代码：
// javascriptcn.com 代码示例
const user = {
name: '张三',
age: 18,
sayHello() {
console.log(`你好，我是 ${this.name}`);
},
};
user?.sayHello?.(); // 输出 "你好，我是 张三"在上面的代码中，我们使用了可选链操作符来调用 sayHello 方法。因为该方法存在，所以输出了正确的结果。如果该方法不存在，那么就不会执行任何操作。
除了上面的示例之外，可选链操作符还可以用来访问数组中的元素，以及访问函数的返回值。在实际开发中，我们可以根据具体的场景来选择使用可选链操作符，以达到简化代码的目的。
总结
可选链操作符是一种非常实用的语法，它可以帮助我们简化访问嵌套属性的过程，并且避免访问不存在的属性而导致程序崩溃。在实际开发中，我们可以根据具体的场景来选择使用可选链操作符，以达到简化代码的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651199bf95b1f8cacda227bb