ES2021: Logical assignment (逻辑分配) (&&=,||=,??=,数字分隔符)

90 阅读3分钟

逻辑与赋值运算符 &&=

&&= 是逻辑与赋值运算符。它将左侧的变量与右侧的表达式进行逻辑与(AND)运算,并仅当左侧的变量为真值时,才将右侧的表达式结果赋值给左侧变量。

// Logical Assignment Operator with && operator
let num1 = 5
let num2 = 10
num1 &&= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 && (num1 = num2)
// 2. if (num1) num1 = num2

逻辑或赋值运算符 ||=

||= 是逻辑或赋值运算符。它将左侧的变量与右侧的表达式进行逻辑或(OR)运算,并仅当左侧的变量为假值时,才将右侧的表达式结果赋值给左侧变量。

// Logical Assignment Operator with || operator
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2

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

??= 是空值合并赋值运算符。它仅当左侧的变量为 nullundefined 时,才将右侧的表达式结果赋值给左侧变量。

// Logical Assignment Operator with ?? operator
let num1
let num2 = 10
num1 ??= num2
console.log(num1) // 10
num1 = false
num1 ??= num2
console.log(num1) // false
// Line 5 can also be written as following ways
// num1 ?? (num1 = num2)

数字分隔符__(两个短的横线)

大数字文字很难使人眼快速解析,尤其是当有很多重复的数字时

Such as:

1000000000000 1019436871.42//en,很难读 
1_000_000_000_000 1_019_436_871.42//en,好读(๑•̀ㅂ•́)و✧

这里再:区分一下 ?. 、 !.、 ??、 ??=、 ||=、 &&=(有重复部分但是有点懒得删减了)

  1. 可选链操作符 ?. :

    • 允许你访问对象的深层属性,而不必检查每一级是否存在。如果对象中的任何属性是 nullundefined,那么表达式将会优雅地失败(即返回 undefined),而不是抛出错误。
    const obj = { a: { b: { c: 1 } } };
    const value = obj.a?.b.c; // 如果 obj.a 或 obj.a.b 不存在,value 将是 undefined
    
  2. 空值合并前置操作符 !. (非标准语法):

    • 这不是一个官方的 JavaScript 操作符。在某些上下文中,你可能会看到 !. 用作一个自定义的函数,但这不是 ECMAScript 规范的一部分。
  3. 空值合并运算符 ?? :

    • 当左侧的操作数是 nullundefined 时,它会返回右侧的操作数,否则返回左侧的操作数。
    const a = null;
    const b = 'default';
    const result = a ?? b; // result 的值将是 'default'
    
  4. 空值合并赋值运算符 ??=:

    • 它将右侧的值赋给变量,但仅当左侧变量的值是 nullundefined 时。
    let value;
    value ??= 'default'; // 如果 value 是 null 或 undefined,它将被赋值为 'default'
    
  5. 逻辑或赋值运算符 ||=:

    • 类似于 ??=,但它会在左侧变量为任何假值(如 0''false 等)时进行赋值。
    let value;
    value ||= 'default'; // 如果 value 是假值,它将被赋值为 'default'
    
  6. 逻辑与赋值运算符 &&=:

    • 它仅在左侧变量为真值时将右侧的值赋给左侧变量。
    let value = false;
    value &&= 'default'; // value 的值保持为 false,因为原始值为假值
    value = true;
    value &&= 'default'; // 现在 value 被赋值为 'default'
    

end...