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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

咱们以下面的这段代码为例:g6d28资讯网——每日最新资讯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

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

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

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

以下面这段代码为例:g6d28资讯网——每日最新资讯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 和 '' 会判断为真。g6d28资讯网——每日最新资讯28at.com

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

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

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

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

逻辑空赋值运算符(x ??= y)仅在 x 是空值(null 或 undefined)时对其赋值。 以下面这段代码为例:g6d28资讯网——每日最新资讯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

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

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

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

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

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

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

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

标签:
  • 热门焦点
  • 中兴AX5400Pro+上手体验:再升级 双2.5G网口+USB 3.0这次全都有

    2021年11月的时候,中兴先后发布了两款路由器产品,中兴AX5400和中兴AX5400 Pro,从产品命名上就不难看出这是隶属于同一系列的,但在外观设计上这两款产品可以说是完全没一点关系
  • 石头智能洗地机A10 Plus体验:双向自清洁治好了我的懒癌

    一、前言和介绍专为家庭请假懒人而生的石头科技在近日又带来了自己的全新旗舰新品,石头智能洗地机A10 Plus。从这个产品名上就不难看出,这次石头推出的并不是常见的扫地机器
  • 消息称迪士尼要拍真人版《魔发奇缘》:女主可能也找黑人演员

    8月5日消息,迪士尼确实有点忙,忙着将不少动画改成真人版,继《美人鱼》后,真人版《白雪公主》、《魔发奇缘》也在路上了。据外媒消息称,迪士尼将打造真人版
  • 摸鱼心法第一章——和配置文件说拜拜

    为了能摸鱼我们团队做了容器化,但是带来的问题是服务配置文件很麻烦,然后大家在群里进行了“亲切友好”的沟通图片图片图片图片对比就对比,简单对比下独立配置中心和k8s作为配
  • 把LangChain跑起来的三个方法

    使用LangChain开发LLM应用时,需要机器进行GLM部署,好多同学第一步就被劝退了,那么如何绕过这个步骤先学习LLM模型的应用,对Langchain进行快速上手?本片讲解3个把LangChain跑起来
  • 得物效率前端微应用推进过程与思考

    一、背景效率工程随着业务的发展,组织规模的扩大,越来越多的企业开始意识到协作效率对于企业团队的重要性,甚至是决定其在某个行业竞争中突围的关键,是企业长久生存的根本。得物
  • 一个注解实现接口幂等,这样才优雅!

    场景码猿慢病云管理系统中其实高并发的场景不是很多,没有必要每个接口都去考虑并发高的场景,比如添加住院患者的这个接口,具体的业务代码就不贴了,业务伪代码如下:图片上述代码有
  • 2023年,我眼中的字节跳动

    此时此刻(2023年7月),字节跳动从未上市,也从未公布过任何官方的上市计划;但是这并不妨碍它成为中国最受关注的互联网公司之一。从2016-17年的抖音强势崛起,到2018年的“头腾
  • 华为HarmonyOS 4.0将于8月4日发布 或搭载AI大模型技术

    华为宣布HarmonyOS4.0将于8月4日正式发布。此前,华为已经针对开发者公布了HarmonyOS4.0,以便于开发者提前进行适配,也因此被曝光出了一些新系统的特性
Top