ES2020-链判断运算符?.

在之前如果读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。比如下面这个对象中，我想读取最内部的name属性值：

let obj = {
  prop: {
    prop: {
      name: '小明'
    }
  }
}

// 错误的写法
const name = obj.prop.prop.name || 'no name';

// 正确的写法
const name_1 = (obj
  && obj.prop
  && obj.prop.prop
  && obj.prop.prop.name) || 'no name';

 

         上面这种方法虽然最正确，但也非常冗余和繁杂，如果数据层级更为复杂、更深，那我们就要写很多判断代码一一来做判断

        即使我们用三元运算去做处理，也只是换个写法而已，并不会简化代码的复杂和冗余度

        ——————————————————————————————————————

        因此 ES2020 引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法

const name = obj?.prop?.prop?.name

 

        这种方式采用 ?. 方式去做链式判断，左侧的对象是否为null或undefined，当为是的时候，就不再往下执行，直接返回undefined

 

        链判断 ?. 的使用方式主要用三种：

• obj?.prop                 //  对象属性是否存在
• obj?.[expr]             //  同上
• func?.(...args)   //  函数或对象方法是否存在

         ?. 主要应用场景如下：

obj?.value // 等同于 obj == null ? undefined : obj.value

obj?.[key] // 等同于 obj == null ? undefined : obj[key]

obj?.fn()  // 等同于 obj == null ? undefined : obj.fn()

fn?.()     // 等同于 fn == null ? undefined : fn()