ES2020新特性链操作符 '?.'和'??'
ES2020新特性,js中的可选链操作符?.
概述
回想一下,我们是如何访问可能含有空值(null或undefined)属性的嵌套对象,比如访问web api 返回结果的user详情,可以使用嵌套的三元运算符像这样:
const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null) : null) : null;
或者使用if语句进行空值检查:
let userName = null;
if(response && response.data && response.data.user){
userName = response.data.user.name;
}
或者写的更好点:
const userName = response && response.data && response.data.user && response.data.user.name;
上面代码中的共同点是,代码有时会非常冗长,并且变得难以格式化和阅读。这就是可选链操作符 ?. 救场的地方, 它提供隐式无效检查使我们的代码更精炼更好。
const userName = response?.data?.user?.name;
语法
可选链操作符 ?. 是在 Javascript ES2020 中引入的,其语法如下:
obj.val?.prop 如果val存在返回 obj.val.prop, 否则 undefined.
obj.func?.(args) 如果func存在返回 obj.func(args) , 否则 undefined.
obj.arr?.[index] 如果array存在返回 obj.array[index] , 否则 undefined.
用法
以user对象为例,学习 ?. 的用法
const user = {
name: "John",
age: 21,
homeaddress: {
country: "USA"
},
hobbies: [{name: "Coding"}, {name: "Cooking"}],
getFirstName: function(){
return this.name;
}
}
对象
访问存在的属性返回值:
console.log(user.homeaddress.country);
// 打印 "USA";
访问不存在的属性会报错:
console.log(user.officeaddress.country);
// throws error "Uncaught TypeError: Cannot read property 'country' of undefined"
使用可选链操作符 ?. 访问不存在的属性。返回 undefined :
console.log(user.officeaddress?.country);
// 打印 "undefined"
方法
调用存在的方法:
console.log(user.getFirstName());
// 打印 "John";
调用不存在的方法会抛出异常
console.log(user.getLastName());
// throws error "Uncaught TypeError: user.getLastName is not a function";
使用可选链操作符 ?. 访问不存在的方法,返回 undefined :
console.log(user.getLastName?.());
// prints "undefined"
数组
访问数组存在的索引返回值:
console.log(user.hobbies[0].name);
// 打印 "Coding";
访问数组不存在的索引抛出异常:
console.log(user.hobbies[3].name);
// throws error "Uncaught TypeError: Cannot read property 'name' of undefined"
使用可选链操作符 ?. 访问数组不存在的索引,返回 undefined
console.log(user.hobbies[3]?.name);
// prints "undefined"
访问不存在的数组,会抛出异常
console.log(user.dislikes[0].name);
// throws error "Uncaught TypeError: Cannot read property '0' of undefined"
使用可选链操作符 ?. 访问不存在的数组,返回 undefined :
console.log(user.dislikes?.[0]?.name);
// prints "undefined"
与空值合并操作符??
一起使用
有的时候,我们希望不返回 undefined 而是返回一个默认值,这个时候,我们可以使用空值合并操作符??完成这一工作。
不使用 ?? ,返回 undefined :
const country = user.officeaddress?.country;
console.log(country);
// 打印 "undefined"
与 ?? 合用,返回一个默认值
const country = user.officeaddress?.country ?? "China";
console.log(country);
// 打印 "China"
ES2020新特性链操作符 '?.'和'??'的更多相关文章
- ES2020新特性记录
1.可选链操作符 // oldlet ret = obj && obj.first && obj.first.second// newlet ret = obj?.fi ...
- Python3.8新特性-- 海象操作符
“理论联系实惠,密切联系领导,表扬和自我表扬”——我就是老司机,曾经写文章教各位怎么打拼职场的老司机. 不记得没关系,只需要知道:有这么一位老司机, 穿上西装带大家打拼职场! 操起键盘带大家打磨技术! ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- 几个ES6新特性
ES6是JavaScript语言的下一代标准,已经在2015年6月正式发布了,因为ES6的第一个版本是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).本文主要讲述的是E ...
- PHP 7 值得期待的新特性(上)
这是我们期待已久的 PHP 7 系列文章的第一篇. 或许你已经知道了,我在 PHP 5.0.0 时间轴 提的 RFC (Request For Comments)通过了, PHP 7 成为 PHP 下 ...
- 相比于python2.6,python3.0的新特性。
这篇文章主要介绍了相比于python2.6,python3.0的新特性.更详细的介绍请参见python3.0的文档. Common Stumbling Blocks 本段简单的列出容易使人出错的变动. ...
- [转载] C++11新特性
C++11标准发布已有一段时间了, 维基百科上有对C++11新标准的变化和C++11新特性介绍的文章. 我是一名C++程序员,非常想了解一下C++11. 英文版的维基百科看起来非常费劲,而中文版维基百 ...
- 在C++98基础上学习C++11新特性
自己一直用的是C++98规范来编程,对于C++11只闻其名却没用过其特性.近期因为工作的需要,需要掌握C++11的一些特性,所以查阅了一些C++11资料.因为自己有C++98的基础,所以从C++98过 ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
随机推荐
- 文本域textarea的一个小细节
文本域代码在编写时,最好写在一行上,就像: 如果没写在一行上,如: 那么就会在后续生成的页面上输入的时候就会产生一段空白无法删除: 这是写文本框的时候的一个小细节
- CentOS 文本编辑器
目录 1.Nano 1.1.基础命令 1.2.快捷操作 1.3.配置文件 2.Vim 2.1.四大模式 2.2.基础命令 2.3.标准操作 2.4.高级操作 2.5.配置文件 Linux 终端的文本编 ...
- Golang通脉之类型定义
自定义类型 在Go语言中有一些基本的数据类型,如string.整型.浮点型.布尔等数据类型, Go语言中可以使用type关键字来定义自定义类型. type是Go语法里的重要而且常用的关键字,type绝 ...
- 什么是关系图 (ERD)?
首先,什么是实体关系图? 实体关系图,也称为ERD,ER图或ER模型,是一种用于数据库设计的结构图.一个ERD包含不同的符号和连接器,它们可视化两个重要信息:系统范围内的主要实体,以及这些实体之间的相 ...
- 【二食堂】Beta - Scrum Meeting 1
Scrum Meeting 1 例会时间:5.13 18:30~18:50 进度情况 组员 当前进度 今日任务 李健 1. 查阅资料,解决划词勾选和右键菜单的问题issue2. 修复了Alpha阶段的 ...
- 最长子序列(线性DP)学习笔记
子序列和子串不一样.子串要求必须连续,而子序列不需要连续. 比如说\(\{a_1,a_2\dots a_n\}\),他的子串就是\(\{a_i,a_{i+1},\dots, a_j|1\leq i\l ...
- STM32程序异常——中断处理要谨慎
问题背景 最近有一个新项目(车载项目),板子上除了原来的ARM + STM32F030K6Tx又多了一个8bit的mcu的单片机,这可真是嵌入式全家福了. 系统的主要核心工作是由arm来完成,但是在开 ...
- Tarjan算法离线 求 LCA(最近公共祖先)
本文是网络资料整理或部分转载或部分原创,参考文章如下: https://www.cnblogs.com/JVxie/p/4854719.html http://blog.csdn.net/ywcpig ...
- heihei
adb shell screencap -p /sdcard/p1.pngadb pull /sdcard/p1.png c:\BaiduYunDownloadadb shell rm /sdcard ...
- Spring Cloud Alibaba 使用RestTemplate进行服务消费
创建服务提供者工程 创建spring-cloud-alibaba-service-member工程,会员中心服务该服务提供用户会员信息. pom.xml <?xml version=" ...