在 ES11 中使用 Optional chaining 来防止访问 undefined 属性
在前端开发中，我们经常会遇到访问 undefined 属性的问题，这通常会导致代码崩溃或者出现错误。为了解决这个问题，ES11 引入了 Optional chaining 这一新特性，它可以帮助我们避免访问 undefined 属性的问题。
Optional chaining 可以让我们在访问对象的属性时，不需要手动判断属性是否存在，而是使用 ?. 运算符来代替点运算符（.），这样即使属性不存在也不会出错，而是直接返回 undefined。
下面是一个示例代码：
// javascriptcn.com 代码示例
const user = {
name: 'John',
age: 25,
address: {
street: '123 Main St',
city: 'New York',
zip: '10001'
}
};
console.log(user.address?.city); // 'New York'
console.log(user.address?.country?.name); // undefined在上面的代码中，我们使用了 Optional chaining 来访问 user 对象的 address 属性和 country 属性。当 address 属性存在时，我们可以成功访问 city 属性并输出 'New York'，但是当 country 属性不存在时，我们使用 Optional chaining 访问它的 name 属性时会直接返回 undefined。
Optional chaining 还可以用于函数调用。在调用一个函数时，我们可以使用 ?. 运算符来判断函数是否存在，如果存在则调用它，否则直接返回 undefined。
下面是一个示例代码：
// javascriptcn.com 代码示例
const user = {
name: 'John',
age: 25,
getAddress() {
return this.address;
}
};
console.log(user.getAddress?.()); // undefined在上面的代码中，我们使用 Optional chaining 来调用 user 对象的 getAddress 方法。由于 getAddress 方法存在，我们可以成功调用它并返回 undefined。
总结
Optional chaining 是一个非常实用的特性，它可以帮助我们避免访问 undefined 属性的问题。在实际开发中，我们可以使用 Optional chaining 来简化代码，并提高代码的可读性和健壮性。
如果你想了解更多有关 Optional chaining 的内容，可以参考 MDN 的文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650900ef95b1f8cacd3cad14