前端js常用运算符（es6+）

一、简介

本文章用于记录js中常用的运算符，主要可能是ES6版本以上的，大家在项目中使用时需要注意兼容性。

二、常用运算符

1.可选链 ?.

当我们读取一个对象的属性的属性时，如果一级属性为空，就会报错了
例如：

  const obj = {
    // people: {
    //   name: 11
    // }
  }
  console.log(obj.people.name);

原有方式我们需要进行判空

  const obj = {
    // people: {
    //   name: 11
    // }
  }
  if (obj.people) {
    console.log(obj.people.name);
  }

我们使用可选链可以更简单的实现

  const obj = {
    // people: {
    //   name: 11
    // }
  }
  console.log(obj.people?.name);

意思是obj是否存在people属性，若存在则返回它的name属性，不存在则返回undefined

2. 空值合并运算符 ??

当左侧操作数为 null 或 undefined 时，返回右侧操作数，否则返回左侧操作数。

  const a = undefined
  console.log(a ?? 'a'); // a
  const b = null
  console.log(b ?? 'b'); // b
  const c = 1
  console.log(c ?? 'c'); // 1

注：不要与逻辑或运算符混淆了，用逻辑或运算符也能达到空值合并运算符差不多的效果，但是空值合并运算符范围更小，它只针对 null 或 undefined。
例如：

  const a = 0
  console.log(a ?? 'a'); // 0
  console.log(a || 'a'); // a
  const b = false
  console.log(b ?? 'b'); // false
  console.log(b || 'b'); // b
  const c = undefined
  console.log(c ?? 'c'); // c
  console.log(c || 'c'); // c

3. 逻辑空赋值 ??=

逻辑空赋值运算符 (x ??= y) 仅在 x 为 nullish (null 或 undefined) 时对其赋值。等价于 x ?? (x = y)。

const item = {
  name: 'foo'
}

item.age ??= 20; //当 item.age 为 null 或者 undefined 时，设置其值为 20

4. 逻辑或赋值 ||=

逻辑或赋值运算符 (x ||= y) 仅在 x 为假时对其赋值

const obj = { 
  name: 'ls',
  age: 0
};

obj.name ||= 'li';
console.log(obj.name); //ls

obj.age ||= 20;
console.log(obj.age); //20

5. 逻辑与赋值 &&=

逻辑与赋值运算符 (x &&= y) ，仅在 x 为真时对其赋值

  let a = 0
  a &&= 1
  console.log(a); // 0
  let b = 1
  b &&= 2
  console.log(b); // 2