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

左手的ㄟ右手 2022-09-10 07:25 195阅读 0赞

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

![b04a0ab9ad90b8489670e4b167e76c45.png][]

### 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

[b04a0ab9ad90b8489670e4b167e76c45.png]: /images/20220829/5585e4d036f84541a4f8deecd59a039d.png