用了之后直呼超香的运算符

随着JS的发展，出现了越来越多的新特性，今天一起分享几个超香的运算符吧，欲罢不能的那种。

1. 可选链 ?.

可选链有多香还要说吗？现在不让我使用可选链的话，我大概会砸键盘，HHH。尤其是对于取层级很深的某个字段，例如：

interface MeasureInfo {
  name?: string;
  info?: {
    message?: string;
  }
}
interface Data {
  name: string;
  item?: {
    measureInfo?: MeasureInfo
  }
}
const data: Data = {
  name: 'hello',
  item: {
    measureInfo: {
      name: 'measure',
      info: {
        message: 'message',
      }
    }
  }
}

假如我们现在需要读取 message 字段的值，我们只需要这样写：

const message = data?.item?.measureInfo?.info?.message;

而在没有可选链之前，我们需要层层判断：

let message: string;
if(data && data.item && data.item.measureInfo && data.item.measureInfo.info) {
  message = data.measureInfo.info.message;
}

在真实的项目中，数据结构往往更加复杂，层级更深，如果没有可选链，层层判断的代码写起来真的是一言难尽。以前没得选就算了，现在必须用可选链。

2. 空值合并运算符 ??

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

比如，如果某个字段返回的值是 null 或 undefined 时，使用默认值。

const item = res.num ?? '-';

在没有 ?? 之前，我们需要这样写：

let item = res.num;
if(res.num === null || res.num === undefined) {
  item = '-';
}

当然啦，如果你项目中使用了 lodash 的话，还可以这样写：

import { isNil } from 'lodash';

let item = res.num;
if(isNil(res.num)) {
  i = '-';
}

3. 逻辑空赋值 ??=

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

interface Item {
  name: string;
  age?: number | null;
}

const item: Item = {
  name: 'foo'
}

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

在 ??= 之前，我们可以这样写：

item.age ?? (item.age = 20);

4. 逻辑或赋值 ||=

逻辑空赋值运算符 (x ||= y) 仅在 x 为假时对其赋值， 等价于 x || (x = y)

const obj = { name: 'jack' };

obj.name ||= 'lau';
console.log(obj.name); //jack

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

5. 逻辑与赋值 &&=

逻辑空赋值运算符 (x &&= y) ，仅在 x 为真时对其赋值，等价于 x && (x = y)。

let a = 10;
let b = 20;
a &&= b; 
console.log(a);//20

//等价于
a = (a && b);

如果发现错误，欢迎在评论区指出~

参考链接：

1. https://javascript.plainenglish.io/es2021-logical-assignment-operators-in-javascript-c6a8290dc510
2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
3. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment
4. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment
5. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment