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