js中 问号点(?.)和双问号(??)的用法
当访问多层对象属性(比如 res.data.list)时,如果属性res.data为空,则会报引用错误,为此我们不得不这么处理:
1 | let dataList = res && res.data && res.data.list |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | //看着非常不美观,今天介绍的新语法就是为了解决这种问题的 (可选链操作符?.) //有了可选链,就可以对一个为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" ) //xx console.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://www.cnblogs.com/lgnblog/p/16779064.html
分类:
javaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
2019-10-11 js循环遍历数组(对象)
2019-10-11 JS判断移动设备最佳方法 并实现跳转至手机版网页
2019-10-11 js递归遍历树结构(tree)