js 问号点操作符 (可选链双问号)

配置使用可选链?. 和 双问号?? 语法

一、什么是可选链
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

当访问多层对象属性(比如 res.data.list)时，如果属性res.data为空，则会报引用错误
为此我们不得不这么处理：

let dataList = res && res.data && res.data.list
看着非常不美观，今天介绍的新语法就是为了解决这种问题的 (可选链操作符?.)

有了可选链，就可以对一个为null或者undefined属性安全引用：

let dataList = res?.data?.list
二、什么是双问号
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

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(0 ?? 1) // 0

console.log("" ?? “foo”) // “”

如何使用
首先检查你的项目依赖中的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”
]
}
之后就可以愉快地使用了！
————————————————
版权声明：本文为CSDN博主「EncodingAESKey」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42333548/article/details/111996707

js 问号点操作符 (可选链双问号)相关推荐

php 双问号语法,JS 新语法「可选链」「双问号」已进入 Stage 3
你可能写过这样的代码 var street = user.address && user.address.street; 复制代码有了这个新语法,你可以写成 var street = ...
【JS】问号点（?.）和双问号（??）的用法
1. 问号点(?.) 当访问多层对象属性(比如 res.data.list)时,如果属性res.data为空,则会报引用错误,为此我们不得不这么处理: let dataList = res & ...
TypeScript 中问号+点 (?.) 和双问号 (??) 的含义
问号+点表达式 (可选链操作符:?.) 例如 let res = obj?.arr?.length 等价于 let res = obj && obj.arr && ob ...
Vue2 中 ?. 可选链式调用操作符出现的问题
一.什么是可选链式调用操作符可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效.?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(n ...
Swift之深入解析可选链的功能和使用
一.什么是可选链? 可选链(Optional Chaining)是一种可以请求和调用属性.方法和子脚本的过程,用于请求或调用的目标可能为nil. 可选链返回两个值: 如果目标有值,调用就会成功,返回该 ...
Swift中文教程（十七）可选链
可选链(Optional Chaining)是一种可以请求和调用属性.方法及子脚本的过程,它的自判断性体现于请求或调用的目标当前可能为空(nil).如果自判断的目标有值,那么调用就会成功:相反,如果选 ...
js 逻辑空分配双问号语法、双竖杠语法与可选链语法
可选链的语法允许开发者访问嵌套得更深的对象属性,而不用担心属性是否真的存在.也就是说,如果可选链在挖掘过程遇到了null或undefined的值,就会通过短路(short-circuit)计算,返回u ...
vue项目中使用可选链 ( ?. )和双问号 ( ??）详解
1.安装插件:@babel/plugin-proposal-optional-chaining npm install --save-dev @babel/plugin-proposal-option ...
可选链表达式与双问号表达式
x?.y 如果x和y其中一个不存在,就返回undefined 如果 ?? 左边的值是 null 或者 undefined,那么就返回右边的值. 以下为代码运用案例 res可能有以下多种结果的情况 va ...

js 问号点操作符 (可选链双问号)

js 问号点操作符 (可选链双问号)相关推荐

最新文章

热门文章

js 问号点操作符 (可选链 双问号)

js 问号点操作符 (可选链 双问号)相关推荐

最新文章

热门文章

js 问号点操作符 (可选链双问号)

js 问号点操作符 (可选链双问号)相关推荐