ES2020 骚操作:可选链 "?."

Souleigh ✨ 等级 631 0 0
标签: javascript前端

可选链 "?."

可选链 ?. 是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在,也不会出现错误。

“不存在的属性”的问题

如果你才刚开始读此教程并学习 JavaScript,那可能还没接触到这个问题,但它却相当常见。

举个例子,假设我们有很多个 user 对象,其中存储了我们的用户数据。

我们大多数用户的地址都存储在 user.address 中,街道地址存储在 user.address.street 中,但有些用户没有提供这些信息。

在这种情况下,当我们尝试获取 user.address.street,而该用户恰好没提供地址信息,我们则会收到一个错误:

let user = {}; // 一个没有 "address" 属性的 user 对象  

alert(user.address.street); // Error!  

这是预期的结果。JavaScript 的工作原理就是这样的。因为 user.addressundefined,尝试读取 user.address.street 会失败,并收到一个错误。

但是在很多实际场景中,我们更希望得到的是 undefined(表示没有 street 属性)而不是一个错误。

……还有另一个例子。在 Web 开发中,我们可以使用特殊的方法调用(例如 document.querySelector('.elem'))以对象的形式获取一个网页元素,如果没有这种对象,则返回 null

// 如果 document.querySelector('.elem') 的结果为 null,则这里不存在这个元素  
let html = document.querySelector('.elem').innerHTML; // 如果 document.querySelector('.elem') 的结果为 null,则会出现错误  

同样,如果该元素不存在,则访问 null.innerHTML 时会出错。在某些情况下,当元素的缺失是没问题的时候,我们希望避免出现这种错误,而是接受 html = null 作为结果。

我们如何实现这一点呢?

可能最先想到的方案是在访问该值的属性之前,使用 if 或条件运算符 ? 对该值进行检查,像这样:

let user = {};  

alert(user.address ? user.address.street : undefined);  

这样可以,这里就不会出现错误了……但是不够优雅。就像你所看到的,"user.address" 在代码中出现了两次。对于嵌套层次更深的属性就会出现更多次这样的重复,这就是问题了。

例如,让我们尝试获取 user.address.street.name

我们既需要检查 user.address,又需要检查 user.address.street

let user = {}; // user 没有 address 属性  

alert(user.address ? user.address.street ? user.address.street.name : null : null);  

这样就太扯淡了,并且这可能导致写出来的代码很难让别人理解。

甚至我们可以先忽略这个问题,因为我们有一种更好的实现方式,就是使用 && 运算符:

let user = {}; // user 没有 address 属性  

alert( user.address && user.address.street && user.address.street.name ); // undefined(不报错)  

依次对整条路径上的属性使用与运算进行判断,以确保所有节点是存在的(如果不存在,则停止计算),但仍然不够优雅。

就像你所看到的,在代码中我们仍然重复写了好几遍对象属性名。例如在上面的代码中,user.address 被重复写了三遍。

这就是为什么可选链 ?. 被加入到了 JavaScript 这门编程语言中。那就是彻底地解决以上所有问题!

可选链

如果可选链 ?. 前面的部分是 undefined 或者 null,它会停止运算并返回该部分。

为了简明起见,在本文接下来的内容中,我们会说如果一个属性既不是 null 也不是 undefined,那么它就“存在”。

换句话说,例如 value?.prop

  • 如果 value 存在,则结果与 value.prop 相同,

  • 否则(当 valueundefined/null 时)则返回 undefined

下面这是一种使用 ?. 安全地访问 user.address.street 的方式:

let user = {}; // user 没有 address 属性  

alert( user?.address?.street ); // undefined(不报错)  

代码简洁明了,也不用重复写好几遍属性名。

即使 对象 user 不存在,使用 user?.address 来读取地址也没问题:

let user = null;  

alert( user?.address ); // undefined  
alert( user?.address.street ); // undefined  

请注意:?. 语法使其前面的值成为可选值,但不会对其后面的起作用。

例如,在 user?.address.street.name 中,?. 允许 usernull/undefined,但仅此而已。更深层次的属性是通过常规方式访问的。如果我们希望它们中的一些也是可选的,那么我们需要使用更多的 ?. 来替换 .

不要过度使用可选链:

我们应该只将 ?. 使用在一些东西可以不存在的地方。

例如,如果根据我们的代码逻辑,user 对象必须存在,但 address 是可选的,那么我们应该这样写 user.address?.street,而不是这样 user?.address?.street

所以,如果 user 恰巧因为失误变为 undefined,我们会看到一个编程错误并修复它。否则,代码中的错误在不恰当的地方被消除了,这会导致调试更加困难。

可选链 ?. 前的变量必须已声明

如果未声明变量 user,那么 user?.anything 会触发一个错误:

// ReferenceError: user is not defined  
user?.address;  

?. 前的变量必须已声明(例如 let/const/var user 或作为一个函数参数)。可选链仅适用于已声明的变量。

短路效应

正如前面所说的,如果 ?. 左边部分不存在,就会立即停止运算(“短路效应”)。

所以,如果后面有任何函数调用或者副作用,它们均不会执行。

例如:

let user = null;  
let x = 0;  

user?.sayHi(x++); // 没有 "sayHi",因此代码执行没有触达 x++  

alert(x); // 0,值没有增加  

其它变体:?.(),?.[]

可选链 ?. 不是一个运算符,而是一个特殊的语法结构。它还可以与函数和方括号一起使用。

例如,将 ?.() 用于调用一个可能不存在的函数。

在下面这段代码中,有些用户具有 admin 方法,而有些没有:

let userAdmin = {  
  admin() {  
    alert("I am admin");  
  }  
};  

let userGuest = {};  

userAdmin.admin?.(); // I am admin  

userGuest.admin?.(); // 啥都没有(没有这样的方法)  

在这两行代码中,我们首先使用点符号(user1.admin)来获取 admin 属性,因为用户对象一定存在,因此可以安全地读取它。

然后 ?.() 会检查它左边的部分:如果 admin 函数存在,那么就调用运行它(对于 user1)。否则(对于 user2)运算停止,没有错误。

如果我们想使用方括号 [] 而不是点符号 . 来访问属性,语法 ?.[] 也可以使用。跟前面的例子类似,它允许从一个可能不存在的对象上安全地读取属性。

let user1 = {  
  firstName: "John"  
};  

let user2 = null; // 假设,我们不能授权此用户  

let key = "firstName";  

alert( user1?.[key] ); // John  
alert( user2?.[key] ); // undefined  

alert( user1?.[key]?.something?.not?.existing); // undefined  

此外,我们还可以将 ?.delete 一起使用:

delete user?.name; // 如果 user 存在,则删除 user.name  

我们可以使用 ?. 来安全地读取或删除,但不能写入:

可选链 ?. 不能用在赋值语句的左侧。

例如:

let user = null;  

user?.name = "John"; // Error,不起作用  
// 因为它在计算的是 undefined = "John"  

这还不是那么智能。

总结

可选链 ?. 语法有三种形式:

  1. obj?.prop —— 如果 obj 存在则返回 obj.prop,否则返回 undefined

  2. obj?.[prop] —— 如果 obj 存在则返回 obj[prop],否则返回 undefined

  3. obj.method?.() —— 如果 obj.method 存在则调用 obj.method(),否则返回 undefined

正如我们所看到的,这些语法形式用起来都很简单直接。?. 检查左边部分是否为 null/undefined,如果不是则继续运算。

?. 链使我们能够安全地访问嵌套属性。

但是,我们应该谨慎地使用 ?.,仅在当左边部分不存在也没问题的情况下使用为宜。以保证在代码中有编程上的错误出现时,也不会对我们隐藏。


现代 JavaScript 教程:开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程[1]。

在线免费阅读:https://zh.javascript.info


参考资料

[1] React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程

技巧 | 从Element项目中探索任意主题色设定

10个不那么知名但很强大的Web API

收藏
评论区

相关推荐

JS 实现单链表
要存储多个元素,数组(或列表)可能是最常用的数据结构。但这种数据结构有一个缺点:(在大多数语言中)数据的大小是固定的,从数组的起点或中间插入或移除项的成本很高。   链表存储有序的集合,但不同于数组,链表中的元素在内存中并不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成。   相对于传统的数组,链表的一个好处是
JavaScript ES12 新特性抢先体验
而每年,JavaScript都会更新添加新的特性新标准,在今年ES2020发布了,而ES2020(ES12)也预计将在明年即2021年年中发布。每年
如何用不到200行代码写一款属于自己的js类库
前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的类库。我们将会学到如下知识点: 闭包:减少变量污染,缩短变量查找范围 自执行函数在对象中的运用 extend的实现原理 如何实现跨浏览器的事件监听 原型链与继承 接下来我会对类库
昨天写了这些骚代码,今天上班差点被同事揍了
昨天写了这些骚代码,今天上班差点被同事揍了 前端开发 微信号 qianduan1024 功能介绍 专注于Web前端技术文章分享,包含JavaScript、HTML5、CSS3等前端基础知识,以及Vue.js,React,Augular等前端框架 收录于话题 来自:掘金,作者:布拉德特皮 链接:h
前端进阶之从零到一实现单向 & 双向链表
前言 前端工程师对于算法和数据结构这块的知识的掌握程度,是进阶高级工程师的非常重要的标志之一,为了总结一下数据结构和算法方面的知识,笔者今天继续把链表这一块的知识补上,也作为自己知识体系的一个梳理,笔者早在去年就写过一篇关于使用javascript实现二叉树和二叉搜索树的文章,如果感兴趣或者想进阶高级的朋友们可以参考学习一下: JavaScript 中的二
ES2020 骚操作:可选链 "?."
可选链 "?." 可选链 ?. 是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在,也不会出现错误。 “不存在的属性”的问题 如果你才刚开始读此教程并学习 JavaScript,那可能还没接触到这个问题,但它却相当常见。 举个例子,假设我们有很多个 user 对象,其中存储了我们的用户数据。 我们大多
【数据结构之链表】详细图文教你花样玩链表
【系列文章推荐阅读】 0. 提要钩玄 文章已经介绍了链式存储结构,介绍了链式存储结构的最基本(简单)实现——单向链表。单向链表,顾名思义,它是单向的。因为单链表的每个结点只有一个数据域和一个指针域,而该指针域只存储了下一个结点的地址,所以我们只能通过某结点找到其直接后继结点,却不能通过某节点找到其直接前驱结点。此外,由于单链表到尾结点(链表的最后一
10个略骚的 Vue 开发技巧
路由参数解耦一般在组件内使用路由参数,大多数人会这样做:export default methods: getParamsId() return this.$route.params.id 在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只
ES 家族新特性,闪亮登场!
前言前端学习永无止境,学习吧骚年 本文集合了 ES6 至 ES11 常用到的特性,包括还在规划的 ES12,只列举大概使用,详细介绍的话内容量将十分巨大.。PS:使用新特性需要使用最新版的 bable 就行转义 新特性ES6(2015) 1\. 类(class) class Man    constructor(name)      this.n
vant 组件库中 toast组件 是怎么写的(vue2版本)
经常使用vant组件库,今天也是有空去看了看vant源码,看看能不能薅到点什么骚操作,菜是原罪,于是选择了个人认为的软柿子 Toast 来学习。 1、回忆写法我们在使用中经常是 this.$toast( option ),或者单纯的使用 Toast(xxx),里面可以传递对象,也可以传递单个内容,也可以通过指定的方法(success,fail)等方式来调用
ES11来了,不进来看看嘛
前言ES2020 (ES11)是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。本文以简单的代码示例来介绍 ES2020新特性。这样,你可以很快理解这些新功能,而不需要多么复杂的解释,好了,废话不多说我们进入正文🔛 私有变量类的主要作用之一是将我们的代码包含在可重用的
秀的一批,那些你不得不知的 PyCharm 高效操作
本文转载自公众号【Python技术】,详情可以点击上方卡片,关注该公众号,获取更多好文推荐。 文 | 豆豆 来源:Python 技术「ID: pythonall」 熟话说,工欲善其事,必先利其器,PyCharm 作为最好用的 IDE 工具,有着各种各样的骚操作,这是高级开发工程师必须熟悉的基本技能。今天就给大家推荐一些秀的一批的高效操作。让你脱离 CV
Redis发布订阅:最简单最通俗的文章
前言可能小伙伴的工作年限大部分已经超过三年甚至四年五年,不知道是否有一种危机感,我们写了那么多的需求代码没有20w行也有个10w行了吧,但是出去找工作的时候不是笔试被pass掉就是面试被pass,你会发现好多你只是知道但是回答不上来。这个时候你才知道去补习知识点,其实这种做法对自身发展不太友好的。我去年疫情期间,在大家都不敢跳槽季节我义无反顾选择跳槽,进入大
ACM金牌选手整理的【LeetCode刷题顺序】
算法和数据结构 知识结构图首先,了解算法和数据结构有哪些知识点,在学习中形成 大局观,对学习和刷题十分有帮助。下面是我花了一天时间整理的算法和数据结构的知识结构,大家可以看看。<img src"https://tva1.sinaimg.cn/large/008i3skNly1gsbvbwd5u1j30ys0u0tl6.jpg" alt"image202107
手把手教你利用JavaScript 获取任意网站图片链接
前言大家好,我是IT共享者,人称皮皮。妹纸图这个网站想必大家都非常熟悉了,老司机的天堂。小编第一次进表示身体逐渐变得空虚,表示一定要克制自己,远离这种正能量的网站。话不多说,今天带大家获取妹纸图上的图片链接。然后大家都懂得。 一、项目准备360浏览器,仅此而已 二、项目目的获取页面所有美女图片 三、项目步骤 1.打开浏览器,搜索图片,我们以美女图片为例:画面