js语法中 ?. 和 ?? 和 ??=的含义,以及用法说明

5,030 阅读2分钟

常用的是 ?. 至于什么意思 我们来用例子演示

?. 可选链操作符(?.)

在这里插入图片描述

const obj = {hh: 'xxx'}
let res = obj?.data?.list
console.log(res)  // undefined
console.log(obj?.hh?.length)  //3
console.log(obj?.hh) // xxx
 

作用就是判断这个对象(this.element)下的(Object)下的(value)下的(length)是否为null或者undefined, (如果没有加 ?. ,有的时候会报length是null 的错误,或者说 null length 没有定义,然有了?. 就省去了好多麻烦) 当其中一链为null或者undefined时就返回undefined,这样即使中间缺少一个属性也不会报错,

?? 空值合并运算符 (??)

?? 双问号后面接的就是默认值。 当然是在没有值得时候会默认 ?? 后边的值,但是有了默认值 ,那么 ?? 后的值也就不会在去默认了,也就是变成了 赋默认值。就跟三木运算(let x = 6,y = 2; z = x>y ? x-y : x+y; )一样,不满足会执行 : 后边的

值得注意的是 :?? 是忽视 null ,undefined 等错误的值 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

var ibo = {}
console.log(ibo?.a ?? 111) //  111
var ibo = {a:{b:1}}
console.log(ibo?.a?.b ?? 111) //1

console.log(1??'2') //  1
console.log(null ?? "xx") // xx
undefined
console.log(undefined ?? "xx") //  xx
console.log( ' '?? "xx")  //  空值

空值赋值运算符 (??=)

含义解说 : 当空值赋值运算符 ??= , 左侧的值为null、undefined的时候, 才会将右侧变量的值赋值给左侧变量。其他所有值都不会进行赋值。同样在一些场景下,可以省略很多代码. 即 xx ??= 00 ,也就是说xx 为null / undefined 时候 会把00 赋值给xx ,否则保留xx的本值。 上例子

let b = '你好';
let a = 0
let c = null;
let d = '123'
console.log(b ??= a,  b, a );  // b = “你好”,  你好, 0
console.log(c ??= d,c, d )  // c = '123' 123, 123

在这里插入图片描述 在这里插入图片描述

再看一个简单的例子

let a;
let b = "不知名前端"
let c = null;
let d = 0;
let e;
e ??= a?.b ?? c ?? d?.a ?? b;
console.log(e) // 不知名前端

在这里插入图片描述 为什么呢? 解说一下,此时a,e,c, 我们都知道 a,e 都是undefined,满足赋值右侧条件,但是右侧是个判断,所以要执行右边的判断赋值。 console.log(a?.b) // a为undefined 了,那后边的b 也就自然不存在了 结果就是 undefined 在这里插入图片描述 那么b下边的c 是啥呢 如果一致 用 ?. 那后边都是undefined。 但是变成了 ?? 此时就要 合并了,也就是把后边的结果给前边,此时的 e ??= a?.b ?? c 就为null了。 在这里插入图片描述 然而我们并没有结束 e ??= a?.b ?? c ?? d 此时我们把 d 的值拿来用了一下。e ??= a?.b ?? c ?? d 就为 0 了。 在这里插入图片描述 到这里的时候你该说这个时候e就为 0 了,后边的不用走了。 但是其实它又进行了执行结果 d?.a ;d下边没有这个a属性和值,此时 结果就是undefined

在这里插入图片描述 在这里插入图片描述 这就又回到了最初的时候 null / undefined

那么 e ??= a?.b ?? c ?? d?.a ?? b; 的值就是 b 的值 你彻底理解了吧。