Debug-011-ES6中的链判断运算符(?.)

这个问题的来源是:

        前端在请求后端接口,拿到的数据,有可能是这样的:

data:{a:{b:{c:{d:""}}}
}

我们前端小伙伴联调时需要取到d的值,我以前是这样写的:

// 错误的写法
const value= data.a.b.c.d   || '给个默认值'

上面明显是一个错误写法,因为有时候接口返回的数据data中是没有a的,data有可能是{} 或者null ,这个时候再这样取值肯定会报错。就像下面的例子一样:

大家肯定不会像我一样踩过这个坑吧。

以前链判断没有出现之前有这样一种写法:


// 正确的写法
const value= (data && data.a  && data.a.b && data.a.b.c && data.a.b.c.d) || '给个默认值'

这样写其实就是判断data是否有值,如果有就继续判断data.a是否有值,如果没有就会使用“给个默认值”,有就继续往下找,以此类推。

显然这样写非常麻烦,代码过于臃肿了。

因此引出链判断运算符            ?. 

//简化写法
const value= data?.a?.b?.c?.d   || '给个默认值'

?.运算符,直接在链式调用的时候判断,左侧的对象是否为null或者undefined,如果是的,就不再往下运算,而是返回undefined

---------------------------------------------------补充---------------------------------------------------

Null 判断运算符(??)

  1. || 属性的值为null、undefined、为空字符串、false、0,默认值就会是 || 右边的值
  2. ?? 只有运算符左侧的值为null或undefined时,才会返回右侧的值
  3. ??  ||  && 三者谁的优先级更高,现在的要求是必须添加小括号包裹,不然会报错,下面是我在控制台上面的打印。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/17953.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ACM Proceedings Template 使用方法

模板导入 打开ACM Primary Article Template官网,可以看到自带overleaf模板,接下来我们使用overleaf来自动导入模板。 选择你需要的ACM Conference or Journals模板,然后Open as Template 栏目说明 接下来依次解释一下左边栏目的作用 …

5月28号总结

刷题记录 1.A. Phone Desktop 输入: 11 1 1 7 2 12 4 0 3 1 0 8 1 0 0 2 0 15 0 8 2 0 9 输出: 1 1 2 2 1 1 0 1 1 2 5 题意:题目给我们1x1和2x2的图标个数,让我们求最少需要多少个5x3的屏幕。 思路:当只看2x2的图…

MySql开源闪回工具MyFlash

MyFlash是由美团点评公司技术工程部开发并维护的一个开源的MySQL闪回工具,主要用于回滚DML(数据操纵语言)操作,如INSERT、UPDATE和DELETE。这个工具通过解析MySQL的binlog文件(版本v4),来实现数…

开源与闭源:AI大模型发展路径的博弈

一、引言 在人工智能(AI)领域,大模型以其卓越的性能和广泛的应用前景,成为了近年来技术发展的热点。然而,在大模型的发展路径上,开源与闭源两种模式一直存在着激烈的博弈。本文将深入探讨这两种模式在大模…

代码即世界

在阿德莱德,我再次强烈感受到了Community这个概念。小地方人,外来人口少,他们只关注本地的生态、经济和事件,对外国人、甚至悉尼墨尔本发生的事情都不感兴趣。这点和中国人不一样,中国人即使是在穷乡僻壤的一个秀才&am…

天地图api总结

天地图案例 <template><div id"map" class"tdmap"><div class"button_click"><el-button click"mark" type"primary" size"mini">添加点位</el-button><el-button click"…

module ‘plotting‘ has no attribute ‘EpisodeStats‘

plotting.py 的版本不同&#xff0c;可以使用下列版本 reinforcement-learning/lib/plotting.py at master dennybritz/reinforcement-learning GitHubImplementation of Reinforcement Learning Algorithms. Python, OpenAI Gym, Tensorflow. Exercises and Solutions to a…

C++之左值、右值、完美转发

1、左值、右值概念 左值&#xff1a; 是指在内存中有明确的地址&#xff0c;可以进行取地址操作。 // 以下的a、p、*p、b都是左值 int a 3; int* p &a; *p; const int b 2; 右值&#xff1a; 只提供数据&#xff0c;无法进行取地址操作。 double x …

如何将云服务器上操作系统由centos切换为ubuntu

本文将介绍如何将我们购买的云服务器上之前装的centos切换为ubuntu&#xff0c;云服务器以华为云为例&#xff0c;要切换的ubuntu版本为ubuntu20.04。 参考官方文档&#xff1a;切换操作系统_弹性云服务器 ECS (huaweicloud.com) 首先打开华为云官网&#xff0c;登录后点击右…

frm一级4个1大神复习经验分享系列(二)

先说一下自己的情况&#xff0c;8月份中旬开始备考&#xff0c;中间一直是跟着网课走&#xff0c;notes和官方书都没看&#xff0c;然后10月份下旬开始刷题一直到考试。下面分享一些自己备考的经验和走过的弯路。 一级 一级整体学习下来的感受是偏重于基础的理论知识。FRM一级侧…

MongoDB分片集群容灾方案

MongoDB分片集群容灾方案 1. 集群同步工具介绍1.1 第三方数据同步工具mongoshake1.2 官方同步工具mongosync 2. 工具对比2.1 数据一致性2.2 稳定性和可靠性2.3 维护成本 3. 总结 1. 集群同步工具介绍 最近客户咨询MongoDB分片集群市面上主流的容灾方案&#xff0c;所以抽空整理…

Java | String类型使用注意事项

String不支持下标访问&#xff01; String s1"wgh";中&#xff0c;创建了一个String对象&#xff08;此语句等效为String s1new String("wgh")&#xff09;。直接用字符串字面量构造的字符串在常量池里&#xff1b;用new String方法构造的字符串在堆里。 …

安卓六种页面加载优化方案对比总结

根据工作经验&#xff0c;笔者提炼了六种页面加载优化方式&#xff0c;按照业务与非业务&#xff0c;将六种加载方式分为两类&#xff1a; 业务类 控制业务与UI的执行顺序、控制多业务之间的执行顺序 ①预加载&#xff1a;是指在进入页面之前&#xff0c;提前获得页面所需得数据…

Conda入门教程

Conda是一个强大的开源包和环境管理系统&#xff0c;专为Python设计&#xff0c;但也可以用于其他语言。以下是Conda的入门教程&#xff0c;帮助你开始使用Conda进行Python环境和包的管理。 一、安装Conda 访问Conda的官网&#xff08;https://conda.io/projects/conda/en/la…

操作系统 - 计算机系统概述

事前提一嘴 室友考完研了&#xff0c;下一年就是我了&#xff0c;真不想和他们一起考&#xff0c;压力太大了&#xff0c;这里分享一点笔记吧 采用王道考研的书以及视频&#xff0c;去掉了一些书上的废话&#xff0c;加上了视频中的重点&#xff0c;最后总结出来的 如有侵权&a…

直播预告|中服云第5代`工业物联产品线上发布会

我国作为全球制造业的领军者&#xff0c;拥有世界上最完整且健全的制造业产业链。但随着各企业规模的扩大和设备的增加&#xff0c;企业设备管理面临的难点和挑战也越来越多。 为了满足企业不断提高的设备管理需求&#xff0c;中服云即将推出全新的“设备全生命周期管理系统5.…

SOA 与“微服务”的区别

SOA&#xff08;面向服务的架构&#xff09;与微服务之间的区别可以从多个维度进行分析。以下是一些主要的区别点&#xff1a; 服务粒度&#xff1a; SOA&#xff1a;服务粒度相对较粗。在SOA中&#xff0c;服务可能涵盖多个功能或业务领域&#xff0c;例如&#xff0c;在一个大…

机器学习之聚类学习

聚类算法 概念 根据样本之间相似性&#xff0c;将样本划分到不同类别种&#xff0c;不同相似度计算方法&#xff0c;会得到不同聚类结果&#xff0c;常用相似度计算方法为&#xff1a;欧氏距离 目的是在没有先验知识情况下&#xff0c;自动发现数据集种内在结构和模式 无监督…

告别裸奔,聊聊主流消息队列的认证和鉴权!

大家好&#xff0c;我是君哥。 我们在使用消息队列时&#xff0c;经常关注的是消息队列收发消息的功能。但好多时候需要对客户端有一定的限制&#xff0c;比如只有持有令牌的客户端才能访问集权&#xff0c;不允许 Producer 发送消息到某一个 Topic&#xff0c;或者某一个 Top…

朗之万动力学(Langevin dynamics)

朗之万动力学&#xff08;Langevin dynamics&#xff09; 是一种模拟经典粒子运动的方法&#xff0c;常用于物理、化学和材料科学等领域。它是由法国物理学家保罗朗之万&#xff08;Paul Langevin&#xff09;于1908年提出的&#xff0c;用于描述布朗运动&#xff0c;即微小粒…