JS 新操作符 —— “?.”、“??”、“??=”

JS 新操作符 —— “?.”、“??”、“??=”

1. ?. （可选链式）

说明：

• Optional chaining，可选链式，安全地访问嵌套的对象属性

语法：

1. obj.prop1?.prop2
2. obj.prop1?.[expr]
3. obj.func?.(args)

比较：

// 旧语法
// 如果 && 前一个表达式不是 假值（null、undefined、false、''、0、NaN），则执行后面的表达式
person && person.info && person.info.name

// lodash.get
lodash.get(person, 'info.name');

// 新语法
// 如果 ?. 前一个表达式不是 nullish（null、undefined），则执行后面的表达式
person?.info?.name

示例：

const person = {
  // info: {
  //   name: '张三',
    
  //   2: 'test',

  //   sayHello(name) {
  //     console.log('hello', name);
  //   }
  // }
}

console.log( person.info?.name ); // undefined

console.log( person.info?.[1 + 1] ); // undefined

person.info?.sayHello?.('王五'); // undefined

参考：

• Optional chaining (?.) —— MDN

2. ??

说明：

• Nullish coalescing operator
• 逻辑运算符，如果左侧为 nullish（null、undefined）则执行右侧表达式

语法：

• leftExpr ?? rightExpr

示例：

false || 'default' // 'default'

false ?? 'default' // false

参考：

• Nullish coalescing operator (??) —— MDN

3. ??=

说明：

• Nullish coalescing assignment
• 赋值操作，如果左侧为 nullish（null、undefined）则将右侧表达式的值赋给左侧

语法：

• x ??= y

比较：

// 旧语法
x || x = y


// 新语法
x ??= y

// 新语法等价于
if (x == null) { // <=> (x === null || x === undefined)
  x = y;
}

参考：

• Nullish coalescing assignment (??=) —— MDN