js新增运算符?.、? ?、? ?=的介绍和使用

使用场景：

        平时在开发项目的时候经常会读取某些对象的属性值，而当这个对象为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时，才会将右边的值赋给左边。

        以上就是我对新增的运算符的了解，欢迎各位小伙伴指点改正。