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

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

来源: 责编: 时间:2024-05-07 09:15:09 254观看
导读Hello,大家好,我是 Sunday。今天是五一小长假的第三天,祝大家都可以五一玩的愉快 0.0昨天,帮一位同学看了一个 bug (因为该同学要五一后找工作,所以五一期间也不能停),代码大概是这样的:伪代码然后得到了以下的错误:图片有经验

Hello,大家好,我是 Sunday。8Vq28资讯网——每日最新资讯28at.com

今天是五一小长假的第三天,祝大家都可以五一玩的愉快 0.08Vq28资讯网——每日最新资讯28at.com

昨天,帮一位同学看了一个 bug (因为该同学要五一后找工作,所以五一期间也不能停),代码大概是这样的:8Vq28资讯网——每日最新资讯28at.com

伪代码伪代码8Vq28资讯网——每日最新资讯28at.com

然后得到了以下的错误:8Vq28资讯网——每日最新资讯28at.com

图片图片8Vq28资讯网——每日最新资讯28at.com

有经验的同学都知道,这个错误是由于 user 中的 priv 是 undefined,所以从 priv 中获取 idCard 的时候,抛出了 Cannot read properties of undefined (reading 'idCard') 的错误8Vq28资讯网——每日最新资讯28at.com

而想要解决这个问题,其实非常简单,只需要进行一个判空就可以,所以我帮他写下了这样的代码:8Vq28资讯网——每日最新资讯28at.com

图片图片8Vq28资讯网——每日最新资讯28at.com

接下来该同学就问了我一个问题:“老师,这个 ? 是什么意思?为什么这样就不报错了?”8Vq28资讯网——每日最新资讯28at.com

这应该不是一个个例,我印象中有很多同学问到过这个问题,所以咱们今天就一口气把 3 个常见的提效操作符(?.、??、??=),分享给大家,帮大家大幅提升开发效率8Vq28资讯网——每日最新资讯28at.com

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

可选链运算符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效(是否为 undefined || null)。这也是为什么在上述的描述中,添加了 ?. 之后就不会报错的原因8Vq28资讯网——每日最新资讯28at.com

咱们以下面的这段代码为例:8Vq28资讯网——每日最新资讯28at.com

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

使用场景: 当我们 不确定 一个对象是否存在时,调用对象属性,可以使用该操作符8Vq28资讯网——每日最新资讯28at.com

02:空值合并操作符(??)

空值合并运算符(??)是一个逻辑运算符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。8Vq28资讯网——每日最新资讯28at.com

以下面这段代码为例:8Vq28资讯网——每日最新资讯28at.com

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

有点类似与 ||(逻辑或),与逻辑或的区别在于 ?? 操作符对 0 和 '' 会判断为真。8Vq28资讯网——每日最新资讯28at.com

比如:8Vq28资讯网——每日最新资讯28at.com

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

使用场景: 当需要把 0 或 '' 作为 真 时,使用 ?? ,否则使用 ||8Vq28资讯网——每日最新资讯28at.com

03:逻辑空赋值(??=)

逻辑空赋值运算符(x ??= y)仅在 x 是空值(null 或 undefined)时对其赋值。 以下面这段代码为例:8Vq28资讯网——每日最新资讯28at.com

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

这个在某些场景下非常有用,比如 为定时器赋值时:8Vq28资讯网——每日最新资讯28at.com

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

使用场景: 当你需要通过 if 判断某个变量不存在时,才需要为该变量赋值时使用8Vq28资讯网——每日最新资讯28at.com

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

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

上一篇: 有人抵触Ref?有人抵触Reactive?

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

标签:
  • 热门焦点
  • 一加Ace2 Pro真机揭晓 钛空灰配色质感拉满

    终于,在经过了几波预热之后,一加Ace2 Pro的外观真机图在网上出现了。还是博主数码闲聊站曝光的,这次的外观设计还是延续了一加11的方案,只是细节上有了调整,例如新加入了钛空灰
  • vivo TWS Air开箱体验:真轻 臻好听

    在vivo S15系列新机的发布会上,vivo的最新款真无线蓝牙耳机vivo TWS Air也一同发布,本次就这款耳机新品给大家带来一个简单的分享。外包装盒上,vivo TWS Air保持了vivo自家产
  • 6月iOS设备好评榜:第一蝉联榜首近一年

    作为安兔兔各种榜单里变化最小的那个,2023年6月的iOS好评榜和上个月相比没有任何排名上的变化,仅仅是部分设备好评率的下降,长年累月的用户评价和逐渐退出市场的老款机器让这
  • K8S | Service服务发现

    一、背景在微服务架构中,这里以开发环境「Dev」为基础来描述,在K8S集群中通常会开放:路由网关、注册中心、配置中心等相关服务,可以被集群外部访问;图片对于测试「Tes」环境或者
  • 零售大模型“干中学”,攀爬数字化珠峰

    文/侯煜编辑/cc来源/华尔街科技眼对于绝大多数登山爱好者而言,攀爬珠穆朗玛峰可谓终极目标。攀登珠峰的商业路线有两条,一是尼泊尔境内的南坡路线,一是中国境内的北坡路线。相
  • 自律,给不了Keep自由!

    来源 | 互联网品牌官作者 | 李大为编排 | 又耳 审核 | 谷晓辉自律能不能给用户自由暂时不好说,但大概率不能给Keep自由。近日,全球最大的在线健身平台Keep正式登陆港交所,努力
  • 小米MIX Fold 3下月亮相:今年唯一无短板的全能折叠屏

    这段时间以来,包括三星、一加、荣耀等等有不少品牌旗下的最新折叠屏旗舰都有新的进展,其中荣耀、三星都已陆续发布了最新的折叠屏旗舰,尤其号荣耀Magi
  • 超闭合精工铰链 彻底消灭缝隙 三星Galaxy Z Flip5与Galaxy Z Fold5发布

    2023年7月26日,三星电子正式发布了Galaxy Z Flip5与Galaxy Z Fold5。三星新一代折叠屏手机采用超闭合精工铰链,让折叠后的缝隙不再可见。同时,配合处
  • 半导体需求下滑 三星电子DS业务部门今年营业亏损预计超10万亿韩元

    7月17日消息,据外媒报道,去年下半年开始的半导体需求下滑,影响到了三星电子、SK海力士、英特尔等诸多厂商,营收明显下滑,部分厂商甚至出现了亏损。作为
Top