首页 > 其他分享 >js中的双问号和“?.“的含义和使用

js中的双问号和“?.“的含义和使用

时间:2022-08-17 10:12:03浏览次数:60  
标签:obj name 含义 undefined detail cat const js 问号

总结:

 this.approveRecords[2].files[0].id 会报错 因为files:[], 所以写成this.approveRecords[2]?.files[0]?.id让它链不下去就好了

?? 表示:只有左侧的值为null或undefined的时候才使用右侧的值。

?. 表示:可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每 个引用是否有效。操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值

?.的个人理解 打个比方就是判断对象的某个属性是否存在,如果存在那么就返回整个属性的值,否则返回undefined

贴上自测的代码

const obj = {
name: 'ceshi',
detail: {
cat: 'huahua'
}
}
const name = obj.dog ?. name;
console.log(name) // undefined
因为obj不存在dog属性,所以查找dog下面的name根本没有所以返回undefined

const detail = obj.detail ?. cat;
console.log(detail)
查找obj下面detail的cat值,因为定义了,所以返回huahua

两者的结合使用

const cat = obj.detail ?. cat ?? 'default name'
console.log(cat) // huahua
这个时候存在detail然后去detail下查找cat属性,因为obj定义了cat所以返回huahua

const cat = obj.detail ?. name ?? 'default name'
console.log(cat)
上图含义是查找obj中detail属性下面name属性,但是对象中没有定义所以值是undefined,这个时候??左侧是undefied那么久使用右侧的数据所以最终返回default name
————————————————
原文链接:https://blog.csdn.net/szl199107101035/article/details/123839403

标签:obj,name,含义,undefined,detail,cat,const,js,问号
From: https://www.cnblogs.com/lsc-boke/p/16593996.html

相关文章

  • java之fastjson序列化和反序列化
    全解史上最快的JSON解析库-alibabaFastjson:https://zhuanlan.zhihu.com/p/72495484Fastjson:https://blog.csdn.net/rustwei/article/details/121162202......
  • ExtJS - UI组件 - MessageBox
    更新记录转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587505.html2022年8月17日发布。2022年8月13日从笔记迁移到博客。ExtJS教程汇总:https://www.cnblog......
  • java 注解&含义
    简介随着SpringCloud统一java编程。注解可以完成很多基础项目的配置。有的时候看不懂注解,也就看不懂代码Example@Service即将类交给Spring进行管理,一般撰写业务......
  • request.js?b775:101 Uncaught (in promise) Error: Failed to convert value of type
    request.js?b775:101Uncaught(inpromise)Error:Failedtoconvertvalueoftype'java.lang.String'torequiredtype'java.lang.Long';nestedexceptionisjava......
  • 多个Node.js版本之间切换
    本篇文章会讲windows和Mac系统下实现多个node.js版本之间的切换。1.windows下采用nvm(nvm-window)2.Mac下采用nvm和n注:window和mac下的nvm地址是不一样的一、windows系......
  • React报错之Type '() => JSX.Element[]' is not assignable to type FunctionComponen
    正文从这开始~总览当我们尝试从函数组件中返回元素组成的数组时,会产生"Type'()=>JSX.Element[]'isnotassignabletotypeFunctionComponent"错误。为了解决该错误......
  • js倒计时函数
    letcounteDate=newDate("jul1,202700:00:00").getTime();functioncountDown(){letnow=newDate().getTime()gap=......
  • JSTL_概念和JSTL_常用标签
    JSTL_概念概念:JavaServerPagesTagLibraryJSP标准标签库是由Apache组织提供的开源的免费的jsp标签<标签>作用:用于简化和替换jsp页面上的java代码使用步骤导入j......
  • 学习Js-day17
    轮播图简单轮播图的实现:(自动轮播,小圆点切换图片,左右按钮切换图片,鼠标移入有左右切换图标,移出消失,鼠标悬停停止轮播,移开继续轮播)HTML首先是html内容,布局很简单,一个图片......
  • js插入排序
    **插入排序**插入排序主要是将需要排序的数组分为两部分,取第一个元素作为已排序数组,其余元素作为未排序数组,依次取未排序数组的元素和已排序数组中的元素进行对......