使用场景:
平时在开发项目的时候经常会读取某些对象的属性值,而当这个对象为undefined或者null时,如果直接利用.运算符操作,那么将会直接报错:
所以为了避免出现这种情况,我们需要在读取属性值之前对对象进行空值判断,常用的方法就是三元运算符、if else条件语句判断,以及&&运算符,这些方法会导致代码比较冗余,影响代码可阅读性,维护起来也比较麻烦。
?.(可选链运算符)
let obj = { name: "ggb" };
let obj2;
let name = obj?.name; //ggb
let name2 = obj2?.name; //undefined
是不是瞬间感觉高大上起来了,并且代码也简洁明了,可选链运算符主要用在读取对象属性值的场景下,它替代传统的if else语句对对象进行空值判断,当对象存在时读取该对象属性值,不存在时就为undefined。
并且?.运算符可以多次调用:
let obj = {
name: "pzw",
age: "12",
child: {
gender: "男"
}
}
let gender = obj?.child?.gender; //男
?? (空值合并运算符)
我相信很多小伙伴在开发的时候遇到过使用!运算符来判断一个变量是否存在时,它会把0也会认为是非状态,例如:
let a = 0;
if(!a){
a = 0;
} else {
a++;
}
console.log(a); // 0
我们如果需要识别0,就得额外添加条件 if( !a || a===0),而当你碰到这个情况的时候,??运算符可以登场了
let a = 0;
let b = 2;
let c;
c = a ?? b;
console.log(c); // 0
??运算符只有在左边值为undefined或者null时,才会取右边的值。
??=(空值赋值运算符)
在开发过程中,我们通常会利用接口来获取数据,那么当接口返回的数据为空时,我们需要设置一个默认值来保证页面中各级调用能够正常运行。
let a;
let b = { name: "pzw" };
let c = 0;
a ??= b; // a值为{ name: "pzw" }
c ??= b; // c值为0
??=运算符只有在左边值为undefined或者null时,才会将右边的值赋给左边。
以上就是我对新增的运算符的了解,欢迎各位小伙伴指点改正。