链判断运算符和Null 判断运算符
链判断运算符
如果我们要获取一个对象的深层嵌套属性,例如获取文章标题res.data.article.title
,然后为了安全起见,我们肯定不能直接这样获取,万一res
对象没有article
属性了呢,直接原地爆炸
// 不安全
const { title} = res.data.article
绝大多数情况下我是这样获取
// 安全
const title = res&&res.data&&res.res.data.article&&res.data.article.title || '默认标题'
如果嵌套层级不深的话还可以使用三目运算符,例如获取res.account
const account = res ? res.account : '柏成'
上面的写法稍微有些臃肿,如果使用链判断运算符?.
可以稍稍简化些代码,是不是变得更优雅...
const title = res?.data?.article?.title || '默认标题'
const account = res?.account || '默认账号'
Null判断运算符
对于res?.data?.article?.title || '默认标题'
来说,我们通过逻辑或运算符||
指定了默认值,我们可能想的是属性title
为undefined
或null
时启用默认值,但是呢,title
属性为''
、false
、0
、NaN
时,默认值也会生效,这就背离了我们的开发初衷
如果使用Null判断运算符??
的话,就解决了这样的问题,只有仅当??
左侧为undefined
或null
才会启用默认值
const title = res?.data?.article?.title ?? '默认标题'
const account = res?.account ?? '默认账号'
需要注意的是,??
和&&
、||
一起使用的时候,必须用小括号表明优先级,否则会报错。
// 报错
title && account ?? '默认标题'
title || account ?? '默认标题'
// 不报错
(title && account) ?? '默认标题'
(title || account) ?? '默认标题'
链判断运算符和Null 判断运算符的更多相关文章
- ES2020链判断运算符?.和Null判断运算符??
链判断运算符 ?. 业务场景: 1 // 假设data是个数组,如果data没有值,为undefinded,则直接复制会报错,因为没有length这个属性 2 3 const dateCount = ...
- 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 ...
随机推荐
- python + selenium 搭建环境步骤
介绍在windows下,selenium python的安装以及配置.1.首先要下载必要的安装工具. 下载python,我安装的python3.0版本,根据你自己的需要安装 下载setuptools ...
- deepin 安装最新版node
安装npm sudo apt install npm 安装node sudo npm install -g n 升级node到稳定版 sudo n stable 升级到最新版 sudo n lates ...
- gcc和g++理解
环境使用的编译器版本是是gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-39) 编译使用了c++11标准的程序时不能通过. 先放解决方法:g++ -std=c++11 ...
- node.js报错:Cannot find module 'xxx'的解决办法
从别处拷贝一份node.js项目,如图 控制台启动 nodemon index.js 后报错:Cannot find module xxx.删除node_modules,在启动时仍提示Cannot f ...
- 关于Folx一些使用方面的问题详细解答
Folx作为一款的专业的Mac系统文件下载工具,相信大家或多或少都对它的主打功能,如智能限速.制定计划任务.直链文件下载等功能有所了解,但是对于它的一些相对少见.冷门的功能,却不太熟悉. 下面小编将通 ...
- C语言讲义——指针函数和函数指针
指针函数 返回值是指针的函数,如void* malloc(...) #include<stdio.h> #include<stdlib.h> #include<strin ...
- AgileConfig-轻量级配置中心 1.1.0 发布,支持应用间配置继承
AgileConfig轻量级配置中心自第一个版本发布不知不觉已经半年了.在并未进行什么推广的情况下收到了250个star,对我有很大的鼓舞,并且也有不少同学试用,并且给出了宝贵的意见,非常感谢他们.其 ...
- Jmeter-BeanShell断言的运用一(JSON响应数据与数据库比对)
前言 最近在学习BeanShell断言,发现有点强大哈,只要会写代码,就没有什么是断言不了的,哈哈哈,不过我现在只会写点蹩脚的代码,下面将介绍下如何将返回的JSON数据与数据库数据做对比. 注:本次涉 ...
- vs2019 Com组件初探-简单的COM编写以及实现跨语言调用
前提条件 1.掌握C++基础语法 2.平台安装 vs2019 3.本地平台为 windows 10 1909 X64 4.了解vbs基础语法 本次目标 1.掌握Com组件的概念及原理 2.编写一个简单 ...
- 关于 spring security 对用户名和密码的校验过程
1.执行 AuthenticationManager 认证方法 authenticate(UsernamePasswordAuthenticationToken) 2.ProviderManager ...