js里的一些新的操作符

一些比较新的运算符

??

该操作符算是||的加强版，它也和|| &&两个操作符一起被归为二元逻辑运算符，||只会在左边的值为假值时返回右边的值，而??是在左边的值为undefined或者null时才会返回右边的值，简单来说??是判断有没有值，||是判断真假。

这个操作符在根据对象的属性设置值时就很好用：

const test = {
    a: 0,
};
const data = { a: test.a ?? "aaa", b: test.b ?? "bbb" };
console.log(data); // a:0 b:"bbb"

??=

既然带个等号当然是和赋值有关系了，这个操作符首先会对左边的值进行一次??运算，当左边的值为undefined或null时才会把右边值赋给它。

a ??= b  等价于  a ?? (a = b)  // a为空时赋值 

&&= ||=

这两个操作符也和??=相似

a &&= b  等价于  a && (a = b)  // a为真时赋值
a ||= b  等价于  a || (a = b)  // a为假时赋值

?.

这个操作符叫做可选链操作符，是访问对象属性.的升级版，可以在访问属性时先隐式地判断储存该属性的对象是否存在，如果不存在会返回undefined，如果存在会返回该属性对应的值。

const test = {
    a: {
        aa: "aa",
    },
    c() {
        return "i am c";
    },
};
let hh = null;
console.log(hh?.a); // undefined hh为undefined或null都会返回undefined 这里用了null
console.log(test.a?.aa); // aa
console.log(test.b?.bb); // undefined test.b为undefined

该操作符能通过在属性后添加?.()的形式执行方法，同样会先检测该方法是否存在，如果对一个非方法的属性运用，会报错

console.log(test.c?.()); // i am c
console.log(test.d?.()); // undefined
// console.log(test.a?.()); // 报错

该操作符还能使用方括号的形式对属性进行访问

let str = "aa";
console.log(test.a?.[str]); //aa
console.log(test.a?.["xxx"]); // undefined