es6可选链操作符(一看就懂的可选链实例代码)

 分类:js知识时间:2023-05-10 07:30:01点击:

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中的可选链语法可以避免出现许多错误,简化代码的书写和维护,提高开发效率。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: