【JS】问号点(?.)和双问号(??)的用法
1. 问号点(?.)
当访问多层对象属性(比如 res.data.list)时,如果属性res.data为空,则会报引用错误,为此我们不得不这么处理:
let dataList = res && res.data && res.data.list
看着非常不美观,今天介绍的新语法就是为了解决这种问题的 (可选链操作符?.)
有了可选链,就可以对一个为null或者undefined属性安全引用:
let dataList = res?.data?.list
作用就是判断这个对象(this.element)下的(businessObject)下的(value)下的(length)是否为null或者undefined,当其中一链为null或者undefined时就返回undefined,这样即使中间缺少一个属性也不会报错,双问号后面接的就是默认值。
var obj ={}
console.log(obj ?. a ?. b) // undefined
console.log(obj ?. a ?. b ?? 88 ) // 88
console.log(obj) // Object
console.log(obj.a) // undefined
console.log(obj.a.b) // 报错var obj={a:{b:1}}
console.log(obj ?. a ?. b) // 1
console.log(obj ?. a ?. b ?? 66) // 1
console.log(obj) // {a:{b:1}}
console.log(obj.a) // {b:1}
console.log(obj.a.b)// 1
双问号(??)
value1 ?? value2
??在value1和value2之间,只有当value1为null或者 undefined 时取value2,否则取value1(0,false,""被认为是有意义的,所以还是取value1)
const obj = {}
const c_or_d = obj.c ?? 'd'
console.log(c_or_d) // 'd'
console.log(1 || "xx") //1
console.log(0 || "xx") //xx
console.log(null || "xx") //xx
console.log(undefined || "xx") //xx
console.log(-1 || "xx") //-1
console.log("" || "xx") //xxconsole.log(1 ?? "xx") //1
console.log(0 ?? "xx") //0
console.log(null ?? "xx") //xx
console.log(undefined ?? "xx") //xx
console.log(-1 ?? "xx") //-1
console.log("" ?? "xx") //''
如何使用
首先检查你的项目依赖中的babel版本,如果你的babel版本<7,那么很遗憾,你得先解决babel版本升级的问题。
如果是babel7以上的版本,可以添加以下2个devDependencies依赖:
@babel/plugin-proposal-optional-chaining // 可选链
@babel/plugin-proposal-nullish-coalescing-operator // 双问号
后在.babelrc或者babel.config.js中这加入2个插件(plugins属性放在JSON顶层):
{"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator","@babel/plugin-proposal-optional-chaining"]
}
原文链接:https://blog.csdn.net/qq_45677671/article/details/119383892
【JS】问号点(?.)和双问号(??)的用法相关推荐
- 【JS】问号点和双问号的用法
1. 问号点(?.) 当访问多层对象属性(比如 res.data.list)时,如果属性res.data为空,则会报引用错误,为此我们不得不这么处理: 1 let dataList = res ...
- js 逻辑空分配双问号语法 、双竖杠语法 与 可选链语法
可选链的语法允许开发者访问嵌套得更深的对象属性,而不用担心属性是否真的存在.也就是说,如果可选链在挖掘过程遇到了null或undefined的值,就会通过短路(short-circuit)计算,返回u ...
- TypeScript 中问号+点 (?.) 和双问号 (??) 的含义
问号+点表达式 (可选链操作符:?.) 例如 let res = obj?.arr?.length 等价于 let res = obj && obj.arr && ob ...
- php 7.2 双问号,PHP7的双问号“??”语法以及和“?:”的区别
PHP7中增加了双问号"??"的语法,我们来讨论一下这个新语法怎么使用,先看下面这个简单的语句:echo $a ?? -1; 这行语句是一个判断语句,判断变量$a是否存在,存在的话 ...
- php两个问号??表示什么意思,PHP两个问号运算符,双问号表达式
其实两个问题??是php7新推出的表达式, c = a ?? b; 表示如果a非空,则c = a, 如果a为空,则 c = b: php7以前经常使用到三元运算表达式, $name = issset( ...
- TypeScript 中的问号+冒号、双问号、问号+点、感叹号+点
?: ?: 是指可选参数,可以理解为参数自动加上undefined function fun(x: number, y?: number) { // 可选参数return x + (y || 0); ...
- php 双问号 语法,JS 新语法「可选链」「双问号」已进入 Stage 3
你可能写过这样的代码 var street = user.address && user.address.street; 复制代码 有了这个新语法,你可以写成 var street = ...
- js 问号点操作符 (可选链 双问号)
配置使用可选链?. 和 双问号?? 语法 一.什么是可选链 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Oper ...
- 双问号??在 js 中的应用
1.什么是双问号 双问号是ES2020 的一个新特性,它的作用是,当一个表达式为 null 或 undefined 的时候为变量设置一个默认值. ECMAScript® 2020 Language S ...
最新文章
- insertionSortList
- c++经典书籍--c++ primer 第6版
- Python爬虫爬取部分学校的新闻标题、时间、对应的新闻链接
- 程序员第一次相亲,因请女方吃肯德基而被怒删!
- java核心面试_Java核心面试问题
- 格式化zookeeper命令_zookeeper原理篇Zookeeper的数据存储与恢复原理
- 【论文解读】[目标检测]retinanet
- 十四、final关键字
- java.exe 0xc000012d_应用程序无法正常启动0xc000012d,此情况要怎么解决,望大神交一交...
- 计算机原理 · 全加器
- 湖北飞young使用任意路由器教程
- 加密文件夹里的图片打不开
- 计算机操作系统存在的意义,电脑操作系统的作用
- imageview设置资源图片
- 【开源夏令营优秀开题报告】专题之三-云与大数据合集
- 如何设置某些动作在凌晨12点时自动更新
- thinkphp 实现汉字转换成拼音
- ACTION_DATE_CHANGED不响应
- python 任务管理系统_python bottle框架开发任务管理系统 V_1.0版
- 多人同步在线编辑文档(onlyoffice)服务器部署-测试