JS中新逻辑赋值运算符使用(?.、? ?、| |=、&&=)

前言：可选链操作符、空值合并操作符(??)， AND（&&）和 OR（||）运算符等的使用让我们的代码更干净简洁。在此之前必须先了解falsy 值、 nullish 值这两个概念。

• falsy 值（虚值）：是在布尔值Boolean上下文中认定为 false 的值。在 JavaScript 中只有 8 个 falsy 值，包括undefined、null、false、空字符串 (双引号 ""、单引号’’、反引号 ``)、NaN、0。
• nullish 值：要么是 null 要么是 undefined 。nullish 值总是 falsy 。

一、可选链操作符( ?. )：允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

简单来说，可以把?.  中的这个？看成是是否存在该属性，然后再链式调用。如果?前面的值为nullish值（null或者undefined）则直接返回undefined，不会再往下执行链式调用。看代码理解：

let res = {
  say: "lemon say",
  data: {
    age: 18,
    name: "lemon",
    sex: "woman"
  }
};

// 判断是否存在name属性并赋值
if (res && res.data && res.data.name) {
    this.title = res.data.name
}
// 改成使用?.方法，如果?前面的res或者是data为nullish值（null或者undefined）则直接返回undefined，不会再往下执行链式调用
this.title = res?.data?.name    // lemon
this.sex = res?.result?.sex    // undefined

二、空值合并操作符(??)：当左侧的操作数为nullish值（null或者undefined），返回其右侧操作数，否则返回左侧操作数。

听起来好像和或运算符（||）没啥区别，实际上是有区别的。空值合并操作符（??）是根据nullish值来判断，而或运算符（||）是根据falsy 值来判断。

let count = 0;
let name = "";

// 或运算符（||）
let num = count || 666;
let str = name || "lemon";
console.log(num);     // 666
console.log(str);     // lemon

// 空值合并操作符（??）只要左边不是null或者undefined就返回左边
let num = count ?? 666;
let str = name ?? "lemon";
console.log(num);     // 0
console.log(str);     // ""

1.逻辑空分配（?? =）：x ??= y

逻辑空值运算符左到右操作，仅在x为nullish值（null或者undefined）时才将值分配x，x如果不是nullish值时压根就不会执行y了，更不存在赋值操作一说。如果y是一个函数，它也不会被调用。

let count = 3;
let name = null;
count ??= 666;
name ??= "lemon";
console.log(count); // 3
console.log(name); // lemon

2.空运算符与空值合并操作符（??）同时使用：

let res = {
  say: "lemon",
  data: {
    age: 18,
    name: "lemon" // data 的 sex 属性未有定义
  }
};

// 当 res?.data?.sex的值为nullish值时，则将woman赋值给sex
let sex = res?.data?.sex ?? 'woman'
console.log(sex) // woman

 3. 空值合并操作符（??）不能直接与 AND（&&）和 OR（||）操作符组合使用。

null || undefined ?? "lemon"; // 抛出 SyntaxError
true || undefined ?? "lemon"; // 抛出 SyntaxError

三、逻辑或分配（||=）：x ||= y

仅在左侧表达式为 falsy 值（虚值） 时才赋值。就是或运算符（||）与赋值运算符同时使用。

四、逻辑与分配（&& =）：x &&= y

逻辑赋值运算符仅在左侧为真时才赋值。就是逻辑与 (&&)与赋值运算符同时使用。