问号(?)的强大之处

点击打开视频讲解更加详细

一、问号点(?.)

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

若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!!!

【面试题】js 问号(?)的强大之处,你知道吗??的更多相关文章

  1. js中console强大之处体现在哪

    js中console强大之处体现在哪 一.总结 一句话总结:在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对conso ...

  2. JavaScript-//FOR/IN循环。当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处。

    <script> //FOR/IN循环.当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处. function getvalue(portfolio){ var ...

  3. 前端面试题 -- JS篇

    前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数 ...

  4. Redis的强大之处

    [Redis的强大之处] 1.拥有对脚本的支持(此处是lua),脚本可选择性的缓存. 2.提供HyperLogLog计数器. 3.提供5种数据类型的全方位支持:List.Hash.Set.Ordere ...

  5. 前端面试题(js)

    js 基础面试题 css 面试题 js 面试题 JavaScript 有几种类型的值?,你能画一下他们的内存图吗 原始数据类型(Undefined,Null,Boolean,Number.String ...

  6. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  7. 前端面试题 | JS部分(附带答案)

    目前在找工作,所以各方收集了一堆面试题.其实刷面试题的过程也能更新自己对知识的认识,所以也提醒自己多看多理解.如果对下面题目有更深理解,会实时更新.遇到新题目,也会不定时更新.希望能帮助到部分朋友- ...

  8. 前端开发面试题JS

    1.介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 ) 2. ...

  9. 微信前端面试题----js实现LazyMan

    这是微信小程序的一道面试题,题目是这样的: 实现一个LazyMan,可以按照以下方式调用:LazyMan("Hank")输出:Hi! This is Hank! LazyMan(& ...

随机推荐

  1. python中 OS模块中 os.path.join() 函数用法简介

    基础用法 os.path.join() 用于拼接文件的路径,可以传入多个待拼接的路径 若各个路径之间不存在 " / ", 则其会自动为各个路径之间增加连接符 " / &q ...

  2. 领导:谁再用redis过期监听实现关闭订单,立马滚蛋!

    日前拜读阿牛老师的大作 领导:谁再用定时任务实现关闭订单,立马滚蛋! 发现其方案有若干瑕疵,特此抛砖引玉讨论一二. 在电商.支付等领域,往往会有这样的场景,用户下单后放弃支付了,那这笔订单会在指定的时 ...

  3. Python基础学习笔记_01

    Python的介绍 1989年圣诞节创造,1991年正真出生,目前更新到3.0版本 具有最庞大的"代码库",人称"胶水语言",无所不能 一种跨平台的计算机程序设 ...

  4. 摸鱼人常备5个Python迷你项目,玩一整天不是问题(附源码)

    大家好鸭,我是小熊猫 在使用Python的过程中,我最喜欢的就是Python的各种第三方库,能够完成很多操作. 下面就给大家介绍5个通过Python构建的项目,以此来学习Python编程. 一.石头剪 ...

  5. NC20276 [SCOI2010]传送带

    NC20276 [SCOI2010]传送带 题目 题目描述 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度为P,在CD ...

  6. 常用API(Java)

    常用API Object toString方法 场景:当我们使用toString方法想要输出对象变量时,官方提供的toString方法会直接输出对象所在的地址,而不是我们想要的对象变量,所以我们要把t ...

  7. SQL练习六--More JOIN operations

    movie Field name Type Notes id INTEGER An arbitrary unique identifier title CHAR(70) The name of the ...

  8. 002 JWT令牌

    1.JWT数据 Json Web Token 添加数据 --> 解析数据 --> 传递数据 1.1 JWT数据处传递流程 注意:JWT数据必须携带在请求头(Request Header)的 ...

  9. Solution -「构造」专练

    记录全思路过程和正解分析.全思路过程很 navie,不过很下饭不是嘛.会持续更新的(应该). 「CF1521E」Nastia and a Beautiful Matrix Thought. 要把所有数 ...

  10. 多线程与高并发(二)—— Synchronized 加锁解锁流程

    前言 上篇主要对 Synchronized 的锁实现原理 Monitor 机制进行了介绍,由于 Monitor 基于操作系统调用,上下文切换导致开销大,在竞争不激烈时性能不算很好, 在 jdk6 之后 ...