ES2020链判断运算符?.和Null判断运算符??
链判断运算符 ?.
业务场景:
1 // 假设data是个数组,如果data没有值,为undefinded,则直接复制会报错,因为没有length这个属性
2
3 const dateCount = data.length // 报错
4
5 // 正常的处理情况是,加个判断
6 if (data) {
7 const dateCount = data.length
8 }
9
10
11 // 使用链判断符,就可一步到位
12 const dataCount = data?.length // data不存在时,直接返回undefined
上面代码使用了?.运算符,直接在链式调用的时候判断,左侧的对象是否为null或undefined。如果是的,就不再往下运算,而是返回undefined。
这样好像没有链的感觉,再举个例子
1 const name = (data && data.person && data.person.name) || 'no name'
2 // 这样的判断机制非常麻烦
3
4 // 使用链判断符
5 const name = data?.Person?.Name || 'no name'
6 // 非常精简
注意点:
一、短路
a?.[++x]
// 等同于
a == null ? undefined : a[++x] // 假如为Ture,右侧永不执行
由于短路的机制,使用delete运算符时,如果为true,则无法执行。
二、括号影响
const name = (data?.person).name
// 不管data是否为空,.name一定会执行,所以不推荐使用链运算符的时候使用括号
三、右侧不能是十进制数值
这是为了兼容三元与运算符。a ? .3 : 0,如果按照?.作为链运算符的话,就会冲突到
四、禁止场合
1、禁止在构造函数(new)的时候使用
2、?.右侧有模板字符串``
3、?.左侧是super
4、?.用于赋值运算的左侧。(右侧可)
null 判断运算符??
业务场景:
设置变量默认值的时候,正常使用||进行赋值。
const name = data.name || 'tom'
原意是data,name为空,则使用tom这个默认值,但是如果data.name为false或者0, 默认值也会生效
1 const name = data.name ?? 'tom'
使用??来处理,则data.name必须是null或者undefined时,才会使用默认值
ES2020链判断运算符?.和Null判断运算符??的更多相关文章
- 链判断运算符和Null 判断运算符
链判断运算符 如果我们要获取一个对象的深层嵌套属性,例如获取文章标题res.data.article.title,然后为了安全起见,我们肯定不能直接这样获取,万一res对象没有article属性了呢, ...
- php类型的相关函数,运算符,条件判断,循环
类型的相关函数 函数的原型 :函数返回值类型 函数名(参数1类型 参数1,参数2类型 参数2--) 1, 任何一个函数,都要考虑它是否有返回值以及该返回值的类型,如果该函数没有返回值,就用void来 ...
- 前端笔记知识点整合之JavaScript(二)关于运算符&初识条件判断语句
运算符 数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换. //隐 ...
- 前端笔记之JavaScript(二)关于运算符&初识条件判断语句
运算符 数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换. //隐式转 ...
- [19/09/16-星期一] Python的运算符和条件判断语句
一.运算符 (1)算术运算符 + 加法运算符(如果是两个字符串之间进行加法运算,则会进行拼串操作) a = 10 + 5 计算 a = 'hello' + ' ' + 'world' 拼串 - ...
- 写给.NET开发者的Python教程(三):运算符、条件判断和循环语句
本节会介绍Python中运算符的用法,以及条件判断和循环语句的使用方法. 运算符 运算符包括算术运算符.赋值运算符.比较运算符.逻辑运算符等内容,大部分用法和C#基本一致,下面我们来看一下: 算数运算 ...
- PHP NULL 合并运算符
HP 7 新增加的 NULL 合并运算符(??)是用于执行isset()检测的三元运算的快捷方式. NULL 合并运算符会判断变量是否存在且值不为NULL,如果是,它就会返回自身的值,否则返回它的第二 ...
- 【前端】javascript判断undefined、null、NaN;字符串包含等
JS中判断null.undefined与NaN的方法 这篇文章主要介绍了JS中判断null.undefined与NaN的方法,需要的朋友可以参考下 . . 写了个 str ="s" ...
- es6 Null 传导运算符
Null 传导运算符 程实务中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在.比如,要读取message.body.user.firstName,安全的写法是写成下面这样. const ...
随机推荐
- 华为云推UGO:一手抓结构迁移,一手抓SQL转换
摘要:UGO,一款专注于异构数据库对象迁移和应用迁移的专业化工具. 近日,华为云推出数据库和应用迁移 UGO,这是一款专注于异构数据库对象迁移和应用迁移的专业化工具,通过预迁移评估.结构迁移两大核心功 ...
- 目标检测:SSD算法详解
一些概念 True Predict True postive False postive 预测为正类 False negivate True negivate 预测为负类 真实为 ...
- 我要吹爆这份阿里中间件技术内部的RM笔记,简直佩服到五体投地
消息队列 RocketMQ 版是阿里云基于 Apache RocketMQ 构建的低延迟.高并发.高可用.高可靠的分布式消息中间件.该产品最初由阿里巴巴自研并捐赠给 Apache 基金会,服务于阿里集 ...
- thinkphp上传图片,生成缩略图
Image.php <?php /** * 实现图片上传,图片缩小, 增加水印 * 需要定义以下常量 * define('ERR_INVALID_IMAGE', 1); * define('ER ...
- npm包的发布和管理
npm包管理 npm其实是Node.js的包管理工具(node package manager). 为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScrip ...
- P5664 Emiya 家今天的饭
题面 link 前言 去年把我做自闭的一道题,看了一眼题面,发现只有 t1 有点思路,结果写到一半发现自己读错题了,又只能花时间来重构,结果后面的暴力一点都没写(主要是自己当时不会) 然后,这道题还因 ...
- Java基础系列-RandomAccess
原创文章,转载请标注出处:https://www.cnblogs.com/V1haoge/p/10755424.html Random是随机的意思,Access是访问的意思,合起来就是随机访问的意思. ...
- Black-Lives-Matter-Resources
下载 Black-Lives-Matter-ResourcesBlack-Lives-Matter-Resources 关于最近在美国发生的事件的资源列表 链接 描述 由于(可选) 插入链接 在这里插 ...
- 安装redis,phpstudy
第一步: 先下载一下我分享自己的百度网盘里面的资料,网友们下载即可 链接:https://pan.baidu.com/s/1SVO-yAEqbFuvhiiI6Dm3VQ 提取码:u8t0 复制这段内容 ...
- Prometheus第一篇:Prometheus架构解析
Prometheus是新一代的监控系统解决方案,原生支持云环境,和kubernetes无缝对接,的却是容器化监控解决方案的不二之选.当然对传统的监控方案也能够兼容,通过自定义或是用开源社区提供的各种e ...