js 可选链 & 空值合并 In Action

js 可选链 & 空值合并 In Action

const obj = {
  props: {
     name: 'eric',
  },
  // prop, 不存在的属性 ️
};

console.log(' obj.props.name =', obj.props.name);
//  obj.props.name = eric

console.log(' obj.prop.name =', obj.prop.name);
// Uncaught TypeError: Cannot read property 'name' of undefined

console.log(' obj.prop?.name =', obj.prop?.name);
//  obj.prop?.name = undefined

console.log(' obj?.prop?.name =', obj?.prop?.name);
//  obj?.prop?.name = undefined

// 可选链与空值合并结合
const defaultValue = obj.prop?.name ?? 'default name';
console.log(` obj.prop?.name ?? 'default name' = `, defaultValue);
//  obj.prop?.name ?? 'default name' =  default name

可选链操作符 ?.

优雅的解决访问多层级对象属性，cannot read property 'xxx' of undefined 的问题

空值合并操作符 ??

只有 undefined 和 null 才会被当作