es6可选链操作符(一看就懂的可选链实例代码)
ES6中的可选链(Optional Chaining)是一种用来检查对象中是否存在属性或方法的新语法,以避免在访问对象时出现的错误。下面是一个简单的实例代码:

const user = {
id: 1,
name: '张三',
address: {
city: '北京市',
zipCode: '100000'
}
}
// 普通方式获取 address 值
if(user && user.address && user.address.city) {
console.log(user.address.city); // 北京市
}
// 使用可选链方式获取 address 值
console.log(user?.address?.city); // 北京市
// 属性不存在,返回 undefined
console.log(user?.age); // undefined
// 对象不存在,返回 undefined 而不是报错
const user2 = undefined;
console.log(user2?.address?.city); // undefined从上述代码中可以看出,可选链语法可以使我们在获取对象属性和方法时更加简洁和高效,并且可以避免在属性不存在时出现的错误。除了使用点号(.)访问属性之外,可选链也支持使用方括号([])进行属性的访问,例如:
const user = {
id: 1,
name: '张三',
address: {
city: '北京市',
zipCode: '100000'
}
}
console.log(user?.['address']?.['city']); // 北京市此外,可选链语法同样支持调用函数的判断,例如:
const obj = {
method: () => {
return 'Hello World!';
}
};
console.log(obj?.method?.()); // Hello World!总之,ES6中的可选链语法可以避免出现许多错误,简化代码的书写和维护,提高开发效率。
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/js/4446.html
原文地址:https://tangjiusheng.cn/js/4446.html
