JS笔记《运算符扩展》

链判断运算符 ?.

• 读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。使用链判断运算符，如果左侧为null或undefined就不再往下运算，返回undefined。

// 读取 message.body.user.firstName

// 正确写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';
  
// 使用链判断运算符
const firstName = message?.body?.user?.firstName || 'default';

// 判断对象中的方法是否存在，如果存在就立即执行
iterator.return?.()

Null判断运算符 ??

• 读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。使用Null判断运算符，当左侧为null或undefined时，才会返回右侧的值。

let a = {};
a.b ?? 1  // 1
a ?? 2    // {}

• 可以搭配链判断运算符一起使用。

let a = {b: {}};

a?.b?.c ?? 1   // 1 
// 判断a里有没有b，b里有没有c，只要一个步骤没有，就返回undefined，
// Null判断运算符发现左侧返回了undefined，就返回右侧的值

a?.b ?? 1 // {}
// 判断a里有没有b，如果有就返回a.b，Null判断运算符不生效，因为左侧有值

逻辑赋值运算符 ||= &&= ??=

• 这三个运算符相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)

// 与赋值运算符
x &&= y
// 等同于
x && (x = y)

// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)

• 为变量或属性设置默认值。

// 旧写法
user.id = user.id || 1;
// 新写法
user.id ||= 1;

// 旧写法
function example(opts) {
  opts.foo = opts.foo || 'bar';
  opts.baz = opts.baz || 'qux';
}
// 新写法
function example(opts) {
  opts.foo ??= 'bar';
  opts.baz ??= 'qux';
}