关闭

你可能不知道的JS特性:可选链

时间: 2019-12-09阅读: 645标签: 特性

今天我们来介绍一个你可能没见过的 js 新特性,目前处于 Stage 3 阶段,它叫作 可选链(optional chaining),它可能解决很多人都面对过的痛点,让我们来了解这下~


为什么我们需要它

想象一下你从某个 api 获取数据,返回的对象嵌套了好多层,这就意味着你需要写很长的属性访问:

// API response object
const person = {
    details: {
        name: {
            firstName: "Michael",
            lastName: "Lampe",
        }
    },
    jobs: [
        "Senior Full Stack Web Developer",
        "Freelancer"
    ]
} 
// Getting the firstName
const personFirstName = person.details.name.firstName;

上面的代码很容易产生错误,我们一般会这么改进:

// Checking if firstName exists
if( person &&
    person.details &&
    person.details.name ) {
        const personFirstName = person.details.name.firstName || 'stranger';
}

可以看到为了访问某个人的 firstName,代码变得非常不优雅。我们可以用 lodash 来优化一下:

_.get(person, 'details.name.firstName', 'stranger');

lodash 的写法可读性更高,但是需要引入额外的依赖,而且在团队内部大家可能不会统一都这么写,那么有没有更好的办法呢?


解决方案

可选链 就是为了解决这个问题而诞生的。

用法

可选链在语法上可能看起来比较陌生,但是用了几次之后你就会很容易适应这种写法。

const personFirstName = person?.details?.name?.firstName;

其实就是在属性访问符 . 的前面加了个问号。我们看上面语句中第一个 ?. ,从 js 层面,它表示如果 person 的值为 null 或者 undefined,就不会报错而返回 undefined,否则才继续访问后面的 details 属性。而如果后面的属性访问链中有任何一个属性为 null 或者 undefined,那么最终的值就为 undefined。

默认值

为了优雅地设置默认值,我们引入另外一个特性:空值合并运算符(nullish-coalescing-operator),听起来好像很复杂,其实也很简单:

const personFirstName = person?.details?.name?.firstName ?? 'stranger';

这个运算符就是 ??,如果它左侧表达式的结果是 undefined,personFirstName,就会取右侧的 stranger。
是不是跟短路运算符 || 很像,那假如我们把 ?? 换成 || 呢?
上面的例子中,如果 firstName 的值为 0 或者空字符串等非 undefined 的 falsy 值,那么最终的结果就不一样了。
?? 就是为了取代 || ,来做设置默认值这件事的。

动态属性

如果你需要使用动态属性,同样很简单:

const jobNumber = 1;
const secondJob = person?.jobs?.[jobNumber] ?? 'none';

上面的代码中, jobs?.[jobNumber] 和 jobs[jobNumber] 的含义是一样的,区别就是前者不会报错。

函数或方法调用

同样的,如果想安全调用一个方法,只需要使用 ?.():

const currentJob = person?.jobs.getCurrentJob?.() ?? 'none';

如果 getCurrentJob 不是一个函数,currentJob 的值就是 none

现在就使用这个特性

很显然,这个特性的兼容性感人,不过没关系,我们有 babel!
立刻,马上就能让你使用它:babel-plugin-proposal-optional-chaining


最后的话

这个特性在很多其他的语言如 C#,Swift 中都有实现,并且 TypeScript 中也已经加入该特性。感兴趣的小伙伴还不快尝试一下,如果嫌安装 babel plugin 太麻烦,直接使用 lodash 的 get 也不失为一种保守的选择~

原文链接


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6781

关闭

神奇的javascript

虽然js是弱类型语言,声明变量时也不需要显式指定类型。但是,数据本身依旧还是有类型的,比如数字和字符串就是以不同形式存在的数据。在js中,所有数字的类型都为number。其中,一个特殊的数字就是NaN(Not a number)

CSS 的特性值

在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正,也就是浏览器容错

typescript 3.7中值得注意的3个新特性

距 typescript 3.7 正式发布已经有一段时间了,这段时间正在对手上的项目进行 typescript 的迁移工作,所以会特别留意每一次的 release。对于 3.7 中包含的新特性,其实相比较之前几次 release 来说

编程语言中的 6 个有趣特性

Java 是一门不断发展的语言,这是一件好事。然而,其他语言的一些特性也是值得研究的。语言的结构是人们思考问题的方式,也是人们设计解决方案的方式。学习或至少熟悉其他语言是借鉴其设计的好方法

解密HTTP/2与HTTP/3 的新特性

HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

CSS新特性contain,控制页面的重绘与重排

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

ES6 Math方法和Number新特性简介

Math.sign() 函数返回一个数字的符号, 指示数字是正数,负数还是零。此函数共有5种返回值, 分别是 1, -1, 0, -0, NaN. 代表的分别是正数, 负数, 正零, 负零, NaN。

十个超级实用的 JS 特性

你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性

ES6 新特性之Generator

实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部有一个yield的关键字

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!