【面试题】js 问号(?)的强大之处,你知道吗??
问号(?)的强大之处
一、问号点(?.)
obj: {
name: "末晨曦吖",
},
console.log(this.obj.age, "年龄"); //undefined
console.log(this.obj.hobby, "爱好"); //undefined
console.log(this.obj.age.data, "年龄"); //报错
console.log(this.obj.hobby.data, "爱好"); //报错
我们都知道第二个代码中打印的年龄和爱好是会报错的,因为我们在打印age和hobby时都已经是undefined的了,在undefined中有打印data属性肯定是没的了,也就报错了。
那我们都怎么避免这中值为空的问题而引发报错呢?
是的,我们可以使用前判断是否为空,若不为空时,我们再去拿其中的某个属性。
console.log(this.obj.age && this.obj.age.data, "年龄", this.obj.age.data);
console.log(this.obj.hobby && this.obj.hobby.data,"爱好",this.obj.hobby.data);
在代码中可以知道,我们在获取data属性时,首先判断前面的属性不为空在去获取。
这种方式呢我们用问号点也是可以实现的。
使用 (?.)实现判断案例:
//this.obj.age?.data === this.obj.age && this.obj.age.data
console.log(this.obj.age?.data, "年龄"); //undefined
console.log(this.obj.hobby.hobbydata, "爱好"); //报错
?.作用总结:
作用就是判断这个对象(this.obj)下的(age)下的(data)是否为null或者undefined,当其中一链为null或者undefined时就返回undefined,这样即使中间缺少一个属性也不会报错。
二、问号问号(??)
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") //''
??作用总结:
使用方式就是与 或(||)相同用法,但是要注意的是??忽略0和空字符串等错误的值
?. 与 ??联合使用
let obj ={}
console.log(obj?.a?.b ?? 233 ) //233
let obj={a:{b:1}}
console.log(obj?.a?.b??233) //1
【面试题】js 问号(?)的强大之处,你知道吗??的更多相关文章
- js中console强大之处体现在哪
js中console强大之处体现在哪 一.总结 一句话总结:在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对conso ...
- JavaScript-//FOR/IN循环。当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处。
<script> //FOR/IN循环.当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处. function getvalue(portfolio){ var ...
- 前端面试题 -- JS篇
前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数 ...
- Redis的强大之处
[Redis的强大之处] 1.拥有对脚本的支持(此处是lua),脚本可选择性的缓存. 2.提供HyperLogLog计数器. 3.提供5种数据类型的全方位支持:List.Hash.Set.Ordere ...
- 前端面试题(js)
js 基础面试题 css 面试题 js 面试题 JavaScript 有几种类型的值?,你能画一下他们的内存图吗 原始数据类型(Undefined,Null,Boolean,Number.String ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- 前端面试题 | JS部分(附带答案)
目前在找工作,所以各方收集了一堆面试题.其实刷面试题的过程也能更新自己对知识的认识,所以也提醒自己多看多理解.如果对下面题目有更深理解,会实时更新.遇到新题目,也会不定时更新.希望能帮助到部分朋友- ...
- 前端开发面试题JS
1.介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 ) 2. ...
- 微信前端面试题----js实现LazyMan
这是微信小程序的一道面试题,题目是这样的: 实现一个LazyMan,可以按照以下方式调用:LazyMan("Hank")输出:Hi! This is Hank! LazyMan(& ...
随机推荐
- 关于缓存一致性协议、MESI、StoreBuffer、InvalidateQueue、内存屏障、Lock指令和JMM的那点事
前言 事情是这样的,一位读者看了我的一篇文章,不认同我文章里面的观点,于是有了下面的交流. 可能是我发的那个狗头的表情,让这位读者认为我不尊重他.于是,这位读者一气之下把我删掉了,在删好友之前,还叫我 ...
- 如何正确理解古典概率中的条件概率 《考研概率论学习之我见》 -by zobol
"B事件发生的条件下,A事件发生的概率"? "在A集合内有多少B的样本点"? "在B约束条件下,A发生的概率变化为?" "B事件中 ...
- Linux命令格式、终端类型和获取帮助的方法
Linux用户类型 Root用户:超级管理员,权限很大 普通用户:权限有限 终端 terminal 终端类型 物理终端:鼠标.键盘.显示器 虚拟终端:软件模拟出来的终端 控制台终端: /dev/con ...
- rhel安装vmtools
第一步,vmware登录虚拟机,菜单栏找到"虚拟机"--"安装TOOLS" //如果打开虚拟机的光驱后没有文件.那么重复以上操作. 第二步,拷贝压缩文件到桌面: ...
- Ubuntu14.04.6配置阿里源
Ubuntu14.04.6配置阿里源 这两天上手 Ubuntu 系统,因为公司用的是 14.04.6 版本,所以有了一些踩坑记录. 起因是安装完系统我需要安装一个搜狗输入法,过程得安装 fcitx,需 ...
- spring boot 打包为war包方法
刚刚接触spring boot,其快速开发的特性吸引我去研究一下.于是我写了个demo,用spring boot内置的tomcat运行的很好,但是我需要把它部署到外部的tomcat中,于是从网上查找资 ...
- httrack使用cookie克隆站点
关于cookies使用在这里官方已有说明,意思是将cookies.txt文件放在项目的根目下即可,格式也给了说明.问题是cookie值太多,手动不好整理,所以就需要用到神器editthiscookie ...
- 参数化设计(多次调用同一子模块,critical warning,引脚constraint sources)
1.设计定义:4个led灯以不同的频率各自闪烁. 2.设计输入:时钟信号,复位信号,led多位输出. 思路:没有要求流水的效果,所以不需要叠加counter达到某一特定值来位移.只需要让每个灯的闪烁周 ...
- 丽泽普及2022交流赛day21 社论
A 暴力 . greater<double> -> greater<int> \(100\) -> \(50\) 代码丢了 . B dp . 考场上代码抢救一下就过 ...
- The Art of Code
目录 1. Polyglot 2. Palin 3. Others 1. Polyglot 2. Palin 3. Others