ES2020之两个会常用新的运算符

Optional Chaining for JavaScript

语法

?.运算符：如果操作数在?.的左侧。 运算符的结果为undefined或null，表达式的结果为undefined。 否则，将正常触发目标属性访问，方法或函数调用。

场景

1.常有通过判断object的某个属性是否存在，再去进一步获取某一个值

const street = user.address && user.address.street;

现在你可以这样实现

const street = user.address?.street;

2.或者在dom中

const fooInput = myForm.querySelector('input[name=foo]');
const fooValue = fooInput && fooInput.value;

现在

const fooValue = myForm.querySelector('input[name=foo]')?.value;

3.判断某个对象方法是否被实现或者传递

const obj = { a: 1, b: 2 };
const objkeys = Object.keys?.(obj);

参考链接tc39

Nullish Coalescing for JavaScript

语法

??运算符：如果运算符左侧为undefined或null则返回运算符右侧

场景

1.访问某个属性值，如果为假值测设置默认值

const doge = {
  name: 'xiaohuang',
  height: '50cm',
  weight: undefined,
  hasBaby: null,
  age: 0,
  babyName: '',
  babyAge: NaN,
}
const dogeWeight = doge.weight || 10; // 10
const dogeHasBaby = doge.hasBaby || false; // false
const dogeAge = doge.age || 0.1; // 0.1
const dogeBabyName = doge.babyName || 'defaultName'; // 'defaultName'
const dogeBabyAge = doge.babyAge || 'defaultAge'; // 'defautlAge'

现在可以这样写

const doge = {
  name: 'xiaohuang',
  height: '50cm',
  weight: undefined,
  hasBaby: null,
  age: 0,
  babyName: '',
  babyAge: NaN,
}

const dogeWeight = doge.weight ?? 10; // 10
const dogeHasBaby = doge.hasBaby ?? false; // false
const dogeAge = doge.age ?? 0.1; // 0
const dogeBabyName = doge.babyName ?? 'defaultName'; // ''
const dogeBabyAge = doge.babyAge ?? 'defaultAge'; // NaN

||和??假值判断的区别

||：false/''/undefined/null/NaN/0都会被判定为假值
??：只有undefined/null会被判断为空值
参考链接tc39