JS可选链的好处

蔚落 2024-04-17 06:31 67阅读 0赞

> 作者：Dmitri Pavlutin
> 
> 译者：前端小智
> 
> 来源：dmitripavlutin

**为了保证的可读性，本文采用意译而非直译。**

[想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！][GitHub]

JS的一些特性极大地改变了咱们的编码方式。从ES6年开始，对咱们代码影响最大的特性的解 、箭头函数、类和模块系统。

到2019年8月，一个新的可选链提案已经进入第三阶段，这是一个很好的改进。可选链接改变了从深层对象结构访问属性的方式。

来看看这是又是什么骚操作。

> **这个礼拜《大迁世界》有抽奖活动，奖品：专栏 《左耳听风》 x3, 技术书 x5,欢迎关注回复：抽奖**

## 问题 ##

由于JS的动态特性，对象可以具有多层不同的嵌套对象结构。

通常，当咱们处理以下这些对象时：

*  获取远程JSON数据
 *  使用配置对象
 *  有可选属性

虽然JS为对象支持不同层次数据结构，但是在访问此类对象的属性时，复杂性也随着增加。

`bigObject`可以在运行时拥有不同的属性集

// 嵌套版本
    const bigObject = {
      // ...
      prop1: {
        //...
        prop2: {
          // ...
          value: 'Some value'
        }
      }
    };
    
    // 简单版本
    const bigObject = {
      // ...
      prop1: {
        // Nothing here   
      }
    };
    复制代码

因此，必须手动检查属性是否存在

if (bigObject && 
        bigObject.prop1 != null && 
        bigObject.prop1.prop2 != null) {
      let result = bigObject.prop1.prop2.value;
    }
    复制代码

这样写太过冗长了，最好避免写它。

咱们来看看可选链如何解决这个问题，以减少冗余的代码。

## 2. 易于深入访问属性 ##

设计一个保存电影信息的对象。 该对象包含必填`title`属性，以及可选的`director`和`actors`。

`movieSmall`对象仅包含`title`，而`movieFull`包含完整的属性集：

const movieSmall = {
      title: 'Heat'
    };
    
    const movieFull = {
      title: 'Blade Runner',
      director: { name: 'Ridley Scott' },
      actors: [{ name: 'Harrison Ford' }, { name: 'Rutger Hauer' }]
    };
    复制代码

写一个获取`director`的函数。 请记住，`director` 可能不存在。

function getDirector(movie) {
      if (movie.director != null) {
        return movie.director.name;
      }
    }
    
    getDirector(movieSmall); // => undefined
    getDirector(movieFull);  // => 'Ridley Scott'
    复制代码

`if（movie.director）{...}`条件用于验证是否定义了`director`属性。 如果没有这个预防措施，在访问`movieSmall`对象的`director`时，JS会抛出`TypeError: Cannot read property 'name' of undefined`。

这种场景最适合使用可选链的功能了，如下所示，代码将简洁很多。

function getDirector(movie) {
      return movie.director?.name;
    }
    
    getDirector(movieSmall); // => undefined
    getDirector(movieFull);  // => 'Ridley Scott'
    复制代码

`在movie.director?.name`表达式中可以找到`?.`可选的链接操作符。

在`movieSmall`中，没有`director`属性。 因此，`movie.director？.name的`的结果为`undefined`。 可选链运算符可防止抛出 `TypeError: Cannot read property 'name' of undefined`。

简单地说，代码片段：

let name = movie.director?.name;
    复制代码

等价于

let name;
    if (movie.director != null) {
      name = movie.director.name;
    }
    复制代码

`?.`通过减少两行代码简化`getDirector()`函数，这就是为什么我喜欢可选链的原因。

#### 2.1 数组项 ####

可选的链功能可以做得更多。可以自由地在同一个表达式中使用多个可选的链接操作符，甚至可以使用它安全地访问数组项。

下一个任务是编写一个函数，返回电影的`actors`中的`name`。

在`movie`对象中，`actors`数组可以是空的，甚至是缺失的，因此必须添加额外的条件来判空。

function getLeadingActor(movie) {
      if (movie.actors && movie.actors.length > 0) {
        return movie.actors[0].name;
      }
    }
    
    getLeadingActor(movieSmall); // => undefined
    getLeadingActor(movieFull);  // => 'Harrison Ford'
    复制代码

`if (movie.actors && movies.actors.length > 0) {...}`条件主要判断`movie`包含`actors`属性，并且此属性至少有一个`actor`。

使用可选链接，同样代码也简洁了很了，如下：

function getLeadingActor(movie) {
      return movie.actors?.[0]?.name;
    }
    
    getLeadingActor(movieSmall); // => undefined
    getLeadingActor(movieFull);  // => 'Harrison Ford'
    复制代码

`actors?.` 确保`actors`属性存在, `[0]?.`确保列表中存在第一个`actor`。

## 3.双问号操作符 ##

一个名为[nullish coalescing operator][]的新提议？ 处理`undefined`或`null`，将它们默认为特定值。

表达式`变量??` 如果变量`undefined`或为`null`，则默认值为指定的值。

const noValue = undefined;
    const value = 'Hello';
    
    noValue ?? 'Nothing'; // => 'Nothing'
    value   ?? 'Nothing'; // => 'Hello'
    复制代码

接着使用`??`来优化一下 `getLeading()`函数，当`movie`对象中没有`actor`时返回“`Unknown actor`”

function getLeadingActor(movie) {
      return movie.actors?.[0]?.name ?? 'Unknown actor';
    }
    
    getLeadingActor(movieSmall); // => 'Unknown actor'
    getLeadingActor(movieFull);  // => 'Harrison Ford'
    复制代码

## 4. 可选链的三种形式 ##

咱们可以使用以下3种形式的可选链。

第一种： `object?.property` 用于访问静态属性：

const object = null;
    object?.property; // => undefined
    复制代码

第二种：`object?.[expression]` 用于访问动态属性或数组项：

// 其一
    const object = null;
    const name = 'property';
    object?.[name]; // => undefined
    // 其二
    const array = null;
    array?.[0]; // => undefined
    复制代码

第三种:`object?.([arg1, [arg2, ...]])` 执行一个对象方法

const object = null;
    object?.method('Some value'); // => undefined
    复制代码

将这三种组合起来创建一个可选链：

const value = object.maybeUndefinedProp?.maybeNull()?.[propName];
    复制代码

## 5.短路：遇到 `null/undefined` 停止 ##

可选链接运算符的有趣之处在于，只要在左侧`leftHandSide？.rightHandSide`遇到无效值，右侧访问就会停止，这称为短路。

看看例子：

const nothing = null;
    let index = 0;
    
    nothing?.[index++]; // => undefined
    index;              // => 0
    复制代码

## 6. 何时使用可选链 ##

不要急于使用可选的链操作符来访问任何类型的属性:这会导致错误的使用。

#### 6.1访问潜在无效的属性 ####

`?.`一般使用在可能为空的属性:`maybeNullish?.prop`。在确定属性不为空的情况下，使用属性访问器:`.property或[propExpression]`。

// 好
    function logMovie(movie) {
      console.log(movie.director?.name);
      console.log(movie.title);
    }
    
    // 不好
    function logMovie(movie) {
      // director needs optional chaining
      console.log(movie.director.name);
    
      // movie doesn't need optional chaining
      console.log(movie?.title);
    }
    复制代码

#### 6.2 通常有更好的选择 ####

以下函数`hasPadding()`接收可选`padding`属性的样式对象。 `padding`具有`left`，`top`，`right`，`bottom`可选属性。

尝试使用可选的链操作符:

虽然函数正确地确定了元素是否有`padding`，但是对于每个属性使用可选的链有点过于麻烦了。

更好的方法是使用对象扩展操作符将`padding`对象默认为零值

这个就比可选链来的更简洁。

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：[dmitripavlutin.com/javascript-…][dmitripavlutin.com_javascript-]

## 交流 ##

干货系列文章汇总如下，觉得不错点个Star，欢迎 加群 互相学习。

> [github.com/qq449245884…][GitHub]

我是小智，公众号「大迁世界」作者，**对前端技术保持学习爱好者。我会经常分享自己所学所看的干货**，在进阶的路上，共勉！

关注公众号，后台回复**福利**，即可看到福利，你懂的。

转载于:https://juejin.im/post/5d632361e51d4561e224a35c

[GitHub]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fqq449245884%2Fxiaozhi
[nullish coalescing operator]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ftc39%2Fproposal-nullish-coalescing
[Fundebug]: https://link.juejin.im?target=https%3A%2F%2Fwww.fundebug.com%2F%3Futm_source%3Dxiaozhi
[dmitripavlutin.com_javascript-]: https://link.juejin.im?target=https%3A%2F%2Fdmitripavlutin.com%2Fjavascript-optional-chaining%2F