234 - 逻辑赋值运算符 - 运算符类型 - 与、或、空值逻辑赋值

逻辑赋值运算符 - 运算符类型 - 与、或、空值逻辑赋值

在 JavaScript 的奇妙世界里，逻辑赋值运算符是一组相当实用且强大的工具。它们结合了逻辑运算符和赋值运算符的功能，能让代码更加简洁高效。本文将深入探讨三种主要的逻辑赋值运算符：逻辑与赋值（&&=）、逻辑或赋值（||=）和空值合并赋值（??=）。

逻辑与赋值（&&=）

语法与原理

逻辑与赋值运算符 &&= 的语法形式为 x &&= y，它等价于 x = x && y。这意味着只有当 x 的值为真值（即非 false、0、''、null、undefined、NaN）时，才会将 y 的值赋给 x；如果 x 为假值，那么 x 的值保持不变。

示例代码

let num1 = 10;
let num2 = 20;
num1 &&= num2;
console.log(num1); // 输出: 20
let str1 = '';
let str2 = 'hello';
str1 &&= str2;
console.log(str1); // 输出: ''

代码解释

在第一个例子中，num1 的初始值为 10，是真值，所以会将 num2 的值 20 赋给 num1。而在第二个例子中，str1 的初始值为空字符串 ''，是假值，因此 str1 的值保持不变。

逻辑或赋值（||=）

语法与原理

逻辑或赋值运算符 ||= 的语法形式为 x ||= y，它等价于 x = x || y。也就是说，只有当 x 的值为假值时，才会将 y 的值赋给 x；如果 x 为真值，那么 x 的值保持不变。

示例代码

let num3 = 0;
let num4 = 30;
num3 ||= num4;
console.log(num3); // 输出: 30
let str3 = 'world';
let str4 = 'hi';
str3 ||= str4;
console.log(str3); // 输出: 'world'

代码解释

在第一个例子中，num3 的初始值为 0，是假值，所以会将 num4 的值 30 赋给 num3。而在第二个例子中，str3 的初始值为 'world'，是真值，因此 str3 的值保持不变。

空值合并赋值（??=）

语法与原理

空值合并赋值运算符 ??= 的语法形式为 x??= y，它等价于 x = x?? y。这里的 ?? 是空值合并运算符，只有当 x 的值为 null 或 undefined 时，才会将 y 的值赋给 x；否则，x 的值保持不变。

示例代码

let value1 = null;
let value2 = 'new value';
value1??= value2;
console.log(value1); // 输出: 'new value'
let value3 = 0;
let value4 = 100;
value3??= value4;
console.log(value3); // 输出: 0

代码解释

在第一个例子中，value1 的初始值为 null，所以会将 value2 的值 'new value' 赋给 value1。而在第二个例子中，value3 的初始值为 0，虽然 0 是假值，但不是 null 或 undefined，因此 value3 的值保持不变。

总结表格

逻辑赋值运算符为 JavaScript 开发者提供了一种简洁而高效的方式来处理变量赋值。通过合理运用这些运算符，可以让代码更加清晰易读，同时减少冗余代码。希望本文能帮助你更好地理解和使用这些强大的运算符。