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

news2024/11/25 21:51:45

这个问题的来源是:

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

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.coloradmin.cn/o/1709196.html

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

相关文章

抖音小程序如何生成二维码

1.页面结构 <image src{{imgUrl}}></image>2.代码结构 onLoad(options) {if (options.param) {var qrCode 13246897451257 //传入生成二维码的字符串this.generateQRCode(qrCode);}},//调起第三方库qrCodegenerateQRCode(text) {//调用了qrCode里面的apiconst api…

达梦数据库查看字符集、页大小

1.查看字符集select UNICODE (); 0 表示 GB18030&#xff0c;1 表示 UTF-8&#xff0c;2 表示 EUC-KR 2.查看页大小select SF_GET_PAGE_SIZE(); 也可以通过管理工具去查看

PHP对接百度语音识别技术

PHP对接百度语音识别技术 引言 在目前的各种应用场景中&#xff0c;语音识别技术已经越来越常用&#xff0c;并且其应用场景正在不断扩大。 百度提供的语音识别服务允许用户通过简单的接口调用&#xff0c;将语音内容转换为文本。 本文将通过PHP语言集成百度的语音识别服务…

C# 读取 CSV 文件的方法汇总

文章目录 1. 使用System.IO命名空间中的类2. 处理标题行和指定列3. 使用CsvHelper库4. 高级功能和异常处理5. 使用 LINQ6. 总结 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff09;文件是一种简单的文本文件格式&#xff0c;用于存储表格数据。在C#中&a…

C/C++连接MySQL

本章Gitee仓库地址&#xff1a;mysql连接基本操作 文章目录 1. mysql connect库2. mysql相关接口2.1 mysql_init()2.2 mysql_real_connect()2.3 mysql_query()2.4 mysql_store_result()2.41 mysql_num_rows2.42 mysql_num_fields2.43 mysql_fetch_row2.44 mysql_fetch_fields 2…

Enable Full Line suggestions 启用全行建议

开启后效果如下&#xff1a; 直接提示可能要输入的参数

【UE5.1 角色练习】06-角色发射火球-part2

目录 效果 步骤 一、火球生命周期 二、添加可被伤害的NPC 三、添加冲量 在上一篇&#xff08;【UE5.1 角色练习】06-角色发射火球-part1&#xff09;基础上继续实现角色发射火球相关功能 效果 步骤 一、火球生命周期 为了防止火球没有命中任何物体而一直移动下去&#…

React@16.x(12)ref 转发-forwardRef

目录 1&#xff0c;介绍2&#xff0c;类组件如何使用4&#xff0c;应用场景-高阶组件HOC 1&#xff0c;介绍 上篇文章中提到&#xff0c;ref 只能对类组件使用&#xff0c;不能对函数组件使用。 而 ref 转发可以对函数组件实现类似的功能。 使用举例&#xff1a; import Re…

【Linux】线程安全及锁的使用

文章目录 前言一、锁1.定义一个锁变量2.pthread_mutex_init3.pthread_mutex_destroy4.pthread_mutex_lock/pthread_mutex_unlock5.静态变量锁和全局变量锁的初始化 二、问题描述及锁的运用三、RAII风格的锁 前言 临界资源: 在多个线程或进程间共享的资源. 临界区: 代码中访问临…

《TCP/IP网络编程》(第十二章)I/O复用(1)

本章将讨论实现并发服务器的第二种办法&#xff0c;基于I/O复用的服务器端构建。 I/O复用它允许单个进程或线程同时处理多个输入/输出&#xff08;I/O&#xff09;操作&#xff0c;而无需为每个I/O操作创建一个独立的线程或进程。这种技术可以显著提高应用程序的效率和性能&…

2024最新TikTok抖音国际版,tiktok正版免拔卡安装来了!

保姆级教程&#xff01;2024最新TikTok抖音国际版&#xff0c;无限制&#xff01;tiktok正版免拔卡安装方法来了&#xff01; TikTok这款APP为何让全球都为之疯狂&#xff1f;因为它更懂人性&#xff0c;懂的人都懂&#xff01; 我是你的老朋友阿星&#xff0c;今天阿星要给大…

CTF网络安全大赛简单的web抓包题目:HEADache

题目来源于&#xff1a;bugku 题目难度&#xff1a;简单 题目 描  述: > Wanna learn about some types of headache? > Lets dig right into it! 下面是题目源代码&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"&…

通过提示工程将化学知识整合到大型语言模型中

在当今快速发展的人工智能领域&#xff0c;大型语言模型&#xff08;LLMs&#xff09;正成为科学研究的新兴工具。这些模型以其卓越的语言处理能力和零样本推理而闻名&#xff0c;为解决传统科学问题提供了全新的途径。然而&#xff0c;LLMs在特定科学领域的应用面临挑战&#…

《java数据结构》--队列详解

一.认识队列&#x1f431; 初识队列&#x1f638; 队列和栈类似都对数据的存取有着严格的要求&#xff0c;不同的是栈遵循先进后出的原则&#xff0c;而队列遵循先进先出的原则&#xff0c;栈是只有一端可以存取&#xff0c;队列是一端存&#xff0c;一端取。这里我来画一个图…

echarts-象形柱图

象形柱图 一般的柱图都是纯色柱图&#xff0c;使用象形柱图可以给柱图定义自己的样式。 样式的调节与柱图一样&#xff0c;核心在于symbol调节柱图的组成。 let options {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3&qu…

Golang | Leetcode Golang题解之第103题二叉树的锯齿形层序遍历

题目&#xff1a; 题解&#xff1a; func zigzagLevelOrder(root *TreeNode) (ans [][]int) {if root nil {return}queue : []*TreeNode{root}for level : 0; len(queue) > 0; level {vals : []int{}q : queuequeue nilfor _, node : range q {vals append(vals, node.V…

啊哈!算法-第2章-栈、队列、链表

啊哈!算法-第2章-栈、队列、链表 第1节 解密qq号——队列第2节 解密回文——栈第3节 纸牌游戏——小猫钓鱼第4节 链表第5节 模拟链表 第1节 解密qq号——队列 新学期开始了&#xff0c;小哈是小哼的新同桌(小哈是个大帅哥哦~)&#xff0c;小哼向小哈询问 QQ 号&#xff0c; 小…

揭秘:如何使用Python统计女友生日还剩几天?

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;为何需要统计生日天数&#xff1f; 二、需求分析与准备 1. 用户输入格…

【设计模式】JAVA Design Patterns——Curiously Recurring Template Pattern(奇异递归模板模式)

&#x1f50d;目的 允许派生组件从与派生类型兼容的基本组件继承某些功能。 &#x1f50d;解释 真实世界例子 对于正在策划赛事的综合格斗推广活动来说&#xff0c;确保在相同重量级的运动员之间组织比赛至关重要。这样可以防止体型明显不同的拳手之间的不匹配&#xff0c;例如…

云服务器平台AutoDL--基本介绍与使用感受

因为课程作业需要复现DreamBooth&#xff0c;找了几个教程之后&#xff0c;发现了AutoDL这个好东西&#xff0c;芜湖~ 相关概念 以下回答来自于ChatGPT。 云计算平台&#xff1a;云服务器平台是提供按需计算资源和服务的在线平台&#xff0c;通常包括存储、处理能力、数据库、…