当前位置：首页 > 科技 > 软件

每个开发者都必须要知道的，三个JS高效运算符：?. || ?? || ??=

来源：责编：时间：2024-05-07 09:15:09 93观看

导读Hello，大家好，我是 Sunday。今天是五一小长假的第三天，祝大家都可以五一玩的愉快 0.0昨天，帮一位同学看了一个 bug （因为该同学要五一后找工作，所以五一期间也不能停），代码大概是这样的：伪代码然后得到了以下的错误：图片有经验

Hello，大家好，我是 Sunday。

今天是五一小长假的第三天，祝大家都可以五一玩的愉快 0.0

昨天，帮一位同学看了一个 bug （因为该同学要五一后找工作，所以五一期间也不能停），代码大概是这样的：

伪代码

然后得到了以下的错误：

图片

有经验的同学都知道，这个错误是由于 user 中的 priv 是 undefined，所以从 priv 中获取 idCard 的时候，抛出了 Cannot read properties of undefined (reading 'idCard') 的错误

而想要解决这个问题，其实非常简单，只需要进行一个判空就可以，所以我帮他写下了这样的代码：

图片

接下来该同学就问了我一个问题：“老师，这个 ? 是什么意思？为什么这样就不报错了？”

这应该不是一个个例，我印象中有很多同学问到过这个问题，所以咱们今天就一口气把 3 个常见的提效操作符（?.、??、??=），分享给大家，帮大家大幅提升开发效率

01：可选链操作符 (?.)

可选链运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效（是否为 undefined || null）。这也是为什么在上述的描述中，添加了 ?. 之后就不会报错的原因

咱们以下面的这段代码为例：

// mdn 示例：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chainingconst adventurer = {  name: 'Alice',  cat: {    name: 'Dinah',  },};const dogName = adventurer.dog?.name; // 可以简单理解为 adventurer.dog ? adventurer.dog.name : undefinedconsole.log(dogName); // undefined

使用场景：当我们不确定一个对象是否存在时，调用对象属性，可以使用该操作符

02：空值合并操作符（??）

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

以下面这段代码为例：

// mdn 示例：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescingconst foo = null ?? 'default string';console.log(foo); // "default string"

有点类似与 ||（逻辑或），与逻辑或的区别在于 ?? 操作符对 0 和 '' 会判断为真。

比如：

const baz = 0 ?? 42;console.log(baz); // 0。因为 0 在 ?? 中被判断为 真----const baz = 0 || 42;console.log(baz); // 42。因为 0 在 || 中被判断为 假

使用场景：当需要把 0 或 '' 作为真时，使用 ?? ，否则使用 ||

03：逻辑空赋值（??=）

逻辑空赋值运算符（x ??= y）仅在 x 是空值（null 或 undefined）时对其赋值。以下面这段代码为例：

// mdn 示例：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignmentconst a = { duration: 50 };a.duration ??= 10; // a.duration 存在，所以 不赋值console.log(a.duration); //  50 a.speed ??= 25; // a.speed 不存在，所以 赋值console.log(a.speed); // 25

这个在某些场景下非常有用，比如为定时器赋值时：

let timer = nullfunction start () {  // if (!timer) {  //   timer = setInterval(() => { ... })  // }  timer ??= setInterval(() => { ... })}

使用场景：当你需要通过 if 判断某个变量不存在时，才需要为该变量赋值时使用

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-87037-0.html每个开发者都必须要知道的，三个JS高效运算符：?. || ?? || ??=

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：有人抵触Ref？有人抵触Reactive？

下一篇： Python 推导式在接口自动化里的运用

标签：

热门焦点

MIX Fold3包装盒泄露新机本月登场

小米的全新折叠屏旗舰MIX Fold3将于本月发布，近日该机的真机包装盒在网上泄露。从图上来看，新的MIX Fold3包装盒在外观设计方面延续了之前的方案，变化不大，这也是目前小米旗舰
石头智能洗地机A10 Plus体验：双向自清洁治好了我的懒癌

一、前言和介绍专为家庭请假懒人而生的石头科技在近日又带来了自己的全新旗舰新品，石头智能洗地机A10 Plus。从这个产品名上就不难看出，这次石头推出的并不是常见的扫地机器
太卷！Redmi MAX 100英寸电视便宜了：12999元买Redmi史上最大屏

8月5日消息，从小米商城了解到，Redmi MAX 100英寸巨屏电视日前迎来官方优惠，到手价12999元，比发布价便宜了7000元，在大屏电视市场开卷。据了解，Redmi MAX 100
让我们一起聊聊文件的操作

文件【1】文件是什么？文件是保存数据的地方，是数据源的一种，比如大家经常使用的word文档、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存数据，它既可以保
在线图片编辑器，支持PSD解析、AI抠图等

自从我上次分享一个人开发仿造稿定设计的图片编辑器到现在，不知不觉已过去一年时间了，期间我经历了裁员失业、面试找工作碰壁，寒冬下一直没有很好地履行计划.....这些就放在日
每天一道面试题-CPU伪共享

前言：了不起：又到了每天一到面试题的时候了！学弟，最近学习的怎么样啊了不起学弟：最近学习的还不错，每天都在学习，每天都在进步！了不起：那你最近学习的什么呢？了不起学弟：最近在学习C
中国家电海外掘金正当时｜出海专题

作者｜吴南南编辑｜胡展嘉运营｜陈佳慧出品｜零态LT（ID：LingTai_LT）2023年，出海市场战况空前，中国创业者在海外纷纷摩拳擦掌，以期能够把中国的商业模式、创业理念、战略打法输出海外，他们依
认真聊聊东方甄选：如何告别低垂的果实

来源：山核桃作者：财经无忌爆火一年后，俞敏洪和他的东方甄选依旧是颇受外界关心的“网红”。7月5日至9日，为期5天的东方甄选“甘肃行”首次在自有App内直播，
最薄的14英寸游戏笔记本电脑 Alienware X14已可以购买

2022年1月份在国际消费电子展(CES2022)上首次亮相的Alienware新品——Alienware X14现在已经可以购买了，这款笔记本电脑被誉为世界上最薄的 14 英寸游戏笔