链判断运算符

如果我们要获取一个对象的深层嵌套属性,例如获取文章标题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 || '默认标题'来说,我们通过逻辑或运算符||指定了默认值,我们可能想的是属性titleundefinednull时启用默认值,但是呢,title属性为''false0NaN时,默认值也会生效,这就背离了我们的开发初衷

如果使用Null判断运算符??的话,就解决了这样的问题,只有仅当??左侧为undefinednull才会启用默认值

const title = res?.data?.article?.title ?? '默认标题'
const account = res?.account ?? '默认账号'

需要注意的是,??&&||一起使用的时候,必须用小括号表明优先级,否则会报错。

// 报错
title && account ?? '默认标题'
title || account ?? '默认标题' // 不报错
(title && account) ?? '默认标题'
(title || account) ?? '默认标题'

链判断运算符和Null 判断运算符的更多相关文章

  1. ES2020链判断运算符?.和Null判断运算符??

    链判断运算符 ?.  业务场景: 1 // 假设data是个数组,如果data没有值,为undefinded,则直接复制会报错,因为没有length这个属性 2 3 const dateCount = ...

  2. php类型的相关函数,运算符,条件判断,循环

    类型的相关函数 函数的原型  :函数返回值类型 函数名(参数1类型 参数1,参数2类型 参数2--) 1, 任何一个函数,都要考虑它是否有返回值以及该返回值的类型,如果该函数没有返回值,就用void来 ...

  3. 前端笔记知识点整合之JavaScript(二)关于运算符&初识条件判断语句

    运算符 数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换.   //隐 ...

  4. 前端笔记之JavaScript(二)关于运算符&初识条件判断语句

    运算符 数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换. //隐式转 ...

  5. [19/09/16-星期一] Python的运算符和条件判断语句

    一.运算符 (1)算术运算符  + 加法运算符(如果是两个字符串之间进行加法运算,则会进行拼串操作) a = 10 + 5  计算 a = 'hello' + ' ' + 'world' 拼串  - ...

  6. 写给.NET开发者的Python教程(三):运算符、条件判断和循环语句

    本节会介绍Python中运算符的用法,以及条件判断和循环语句的使用方法. 运算符 运算符包括算术运算符.赋值运算符.比较运算符.逻辑运算符等内容,大部分用法和C#基本一致,下面我们来看一下: 算数运算 ...

  7. PHP NULL 合并运算符

    HP 7 新增加的 NULL 合并运算符(??)是用于执行isset()检测的三元运算的快捷方式. NULL 合并运算符会判断变量是否存在且值不为NULL,如果是,它就会返回自身的值,否则返回它的第二 ...

  8. 【前端】javascript判断undefined、null、NaN;字符串包含等

    JS中判断null.undefined与NaN的方法 这篇文章主要介绍了JS中判断null.undefined与NaN的方法,需要的朋友可以参考下 . . 写了个 str ="s" ...

  9. es6 Null 传导运算符

    Null 传导运算符 程实务中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在.比如,要读取message.body.user.firstName,安全的写法是写成下面这样. const ...

随机推荐

  1. python + selenium 搭建环境步骤

    介绍在windows下,selenium python的安装以及配置.1.首先要下载必要的安装工具. 下载python,我安装的python3.0版本,根据你自己的需要安装 下载setuptools ...

  2. deepin 安装最新版node

    安装npm sudo apt install npm 安装node sudo npm install -g n 升级node到稳定版 sudo n stable 升级到最新版 sudo n lates ...

  3. gcc和g++理解

    环境使用的编译器版本是是gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-39) 编译使用了c++11标准的程序时不能通过. 先放解决方法:g++ -std=c++11 ...

  4. node.js报错:Cannot find module 'xxx'的解决办法

    从别处拷贝一份node.js项目,如图 控制台启动 nodemon index.js 后报错:Cannot find module xxx.删除node_modules,在启动时仍提示Cannot f ...

  5. 关于Folx一些使用方面的问题详细解答

    Folx作为一款的专业的Mac系统文件下载工具,相信大家或多或少都对它的主打功能,如智能限速.制定计划任务.直链文件下载等功能有所了解,但是对于它的一些相对少见.冷门的功能,却不太熟悉. 下面小编将通 ...

  6. C语言讲义——指针函数和函数指针

    指针函数 返回值是指针的函数,如void* malloc(...) #include<stdio.h> #include<stdlib.h> #include<strin ...

  7. AgileConfig-轻量级配置中心 1.1.0 发布,支持应用间配置继承

    AgileConfig轻量级配置中心自第一个版本发布不知不觉已经半年了.在并未进行什么推广的情况下收到了250个star,对我有很大的鼓舞,并且也有不少同学试用,并且给出了宝贵的意见,非常感谢他们.其 ...

  8. Jmeter-BeanShell断言的运用一(JSON响应数据与数据库比对)

    前言 最近在学习BeanShell断言,发现有点强大哈,只要会写代码,就没有什么是断言不了的,哈哈哈,不过我现在只会写点蹩脚的代码,下面将介绍下如何将返回的JSON数据与数据库数据做对比. 注:本次涉 ...

  9. vs2019 Com组件初探-简单的COM编写以及实现跨语言调用

    前提条件 1.掌握C++基础语法 2.平台安装 vs2019 3.本地平台为 windows 10 1909 X64 4.了解vbs基础语法 本次目标 1.掌握Com组件的概念及原理 2.编写一个简单 ...

  10. 关于 spring security 对用户名和密码的校验过程

    1.执行 AuthenticationManager 认证方法 authenticate(UsernamePasswordAuthenticationToken) 2.ProviderManager ...