首页 > 其他分享 >js中 问号点(?.)和双问号(??)的用法

js中 问号点(?.)和双问号(??)的用法

时间:2022-10-11 14:23:50浏览次数:59  
标签:console log res undefined js xx obj 用法 问号

 当访问多层对象属性(比如 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") 		//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"
  ]
}

  

标签:console,log,res,undefined,js,xx,obj,用法,问号
From: https://www.cnblogs.com/lgnblog/p/16779064.html

相关文章

  • 接口返回JSON字符串压缩和解压
    usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.IO;usingSystem.IO.Compression;namespaceCSIBrowser.Client.Util{......
  • JSP实用教程 PDF 下载
    下载地址:https://kohler.lanzouv.com/iJVIn0dm49gf访问密码:公众号:愚生浅末回复1011获取。......
  • memo、useCallback、useMemo的区别和用法
    memo、useCallback、useMemo的区别和用法发布于2021-12-0611:26:26阅读 3980 react在渲染父子嵌套组件的时候,有时会发生不必要的渲染,根据经验总结出来,大致有......
  • JS_0066:date 相关方法 获取时间字符串 计算时间差
    1,获取时间字符串varnowdatestr=newDate().toLocaleDateString();获取时间格式如:2022/10/10 2,计算时间差$nowdate=date('Y-m-dH:i:s',time());$ret['leftday......
  • JSX语法规则
    1.定义虚拟DOM时,不要写引号。创建虚拟DOM:constVDOM=(<h2id="atguigu">HelloReact!</h2>)渲染虚拟DOM到页面ReactD......
  • 对象转JSONObject——字段空值不显示处理办法
    <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.71</version></dependency>importcom.alibaba.fastjson.J......
  • Nodejs安装
    1.安装node.js2.设置淘宝镜像npmconfigsetregistryhttps://registry.npm.taobao.org/ ,检查查看:npmconfiggetregistry3.配置npm下载插件的默认安装目录和缓......
  • 嵌套Json写入DataTable
    *json中的value的type有时候是个array,DataTable是不能写入这样的json的。但是由于业务需求有时候可能需要将json中的Array也写入DataTable。*解决方案是将DataTable中......
  • IDEA jsp 写Java脚本的时候不能使用out.print()问题
    IDEAjsp写Java脚本的时候不能使用out.print()问题参考:ideajsp无法使用out.print方法_NoBug的博客-CSDN博客_ideajspout问题:  解决:File->ProjectStructure......
  • json 格式化输出
    importjsond={"a":"我们","b":"test"}print(json.dumps(d))#{"a":"\u6211\u4eec","b":"test"}print(json.dumps(d,ensure_ascii=False,indent=2))"""{"a......