js安全访问对象属性操作符?.

Rulelur

于 2021-06-09 23:20:35 发布

阅读量581

点赞数

本文链接：https://blog.csdn.net/Rulelur/article/details/117718617

版权

本文介绍了JavaScript中的可选链操作符(?.)和空值合并运算符(??)，这两个特性解决了在访问深层级对象属性或函数时可能出现的错误。可选链操作符允许安全地访问可能不存在的属性，而不会抛出错误，返回undefined。空值合并运算符则在左侧操作数为null或undefined时返回右侧操作数，提供了更安全的默认值设定。通过示例代码，展示了这两个运算符在实际编程中的应用和优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在某些情况下，需要访问一个层级多的对象，如obj.a.b.c。而这个obj并不能保证一定有这些属性的时候，经常会导致Uncaught TypeError: Cannot read property 'XX' of undefined。如果每一层就判断一次是不是undefined，那实在是太麻烦了。使用可选链操作符就可以解决这种情况。

可选链操作符

就像使用.一样使用可选链操作符?. 不同的是，可选链操作符不会造成报错，在属性不存在的情况下，会返回undefined
可选链操作符也可以用于函数调用，如obj.fn?.()
可选链操作符也可以用于数组取值和对象[]取值，如arr?.[42]?.[1]和obj?.["my" + "name"]?.value
可选链操作符不能用于赋值，如obj?.abc = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

const obj = {
  a: { b: 123 },
};
const value = obj?.b?.a;
const fn = obj.fn?.();
const myName = obj?.["my" + "name"]?.value;
console.log(value); // undefined
console.log(fn); // undefined

最低0.47元/天解锁文章