在 JavaScript 中，||=, &&=, ??= 和 ?. 是在 ECMAScript 2021 (ES12) 中引入的新特性。理解起来相对清晰简单就不做过多解释了， 先看结论

总结

• ||=：在左侧值为 false 时赋值。适用于需要给未定义或假值变量赋默认值的情况。
• &&=：在左侧值为 true 时赋值。适用于只在变量已有值时才修改其值的情况。
• ??=：在左侧值为 null 或 undefined 时赋值。非常适用于处理可能未定义或为 null 的变量。
• ?.：用于安全地访问对象嵌套属性，防止因访问未定义或 null 的属性而导致错误。

||=（逻辑或赋值运算符）

||= 运算符在左侧操作数为 false（假值）时才会对其进行赋值。假值包括：false、0、-0、0n、""、null、undefined 和 NaN。

想象一下，你有一个变量，如果它没有被赋值（即是 false），你想给它一个默认值，这时 ||= 就派上用场了。

let a = 0;
a ||= 1; // a 是 false，所以 a 被赋值为 1
console.log(a); // 1

let b = 2;
b ||= 1; // b 是 true，所以 b 保持原值
console.log(b); // 2

等价于：

if (!a) {
    a = 1;
}

if (!b) {
    b = 1;
}

&&=（逻辑与赋值运算符）

&&= 运算符在左侧操作数为 true（真值）时才会对其进行赋值。真值是所有非假值的值。

设想你有一个变量，只有在它已经有值（即是 true）的情况下，你才想修改它，那么 &&= 就是理想的选择。

let c = 2;
c &&= 3; // c 是 true，所以 c 被赋值为 3
console.log(c); // 3

let d = 0;
d &&= 3; // d 是 false，所以 d 保持原值
console.log(d); // 0

等价于：

if (c) {
    c = 3;
}

if (d) {
    d = 3;
}

??=（空值合并赋值运算符）

??= 运算符在左侧操作数为 null 或 undefined 时才会对其进行赋值。这非常适用于处理那些可能未定义或为 null 的变量。

let e = null;
e ??= 5; // e 是 null，所以 e 被赋值为 5
console.log(e); // 5

let f = 0;
f ??= 5; // f 是 0（非 null 或 undefined），所以 f 保持原值
console.log(f); // 0

等价于：

if (e === null || e === undefined) {
    e = 5;
}

if (f === null || f === undefined) {
    f = 5;
}

?.（可选链运算符）

?. 运算符用于安全地访问对象嵌套属性，防止因访问未定义或 null 的属性而导致错误。它允许你在链式调用中判断对象属性是否存在。

let user = {
    name: "John",
    address: {
        city: "New York"
    }
};

console.log(user?.address?.city); // "New York"
console.log(user?.contact?.phone); // undefined, 无错误

等价于：

if (user !== null && user !== undefined) {
    if (user.address !== null && user.address !== undefined) {
        console.log(user.address.city);
    }
}

if (user !== null && user !== undefined) {
    if (user.contact !== null && user.contact !== undefined) {
        console.log(user.contact.phone);
    } else {
        console.log(undefined);
    }
}

最后

如果你有任何问题或建议，欢迎在评论区留言交流！Happy coding!