运算符的妙用

在 JavaScript 中，运算符是我们进行各种操作的重要工具，正确使用它们可以大大提高代码的简洁性和可读性。本文将从几个常见的运算符出发，详细介绍它们的用法以及相关注意事项。

相等运算符

在 JavaScript 中，== 和 === 都可以用来判断两个值是否相等，但它们的行为有明显的区别：

• ==（相等运算符）：在比较前会进行类型转换，然后比较两个值是否相等。
• ===（全等运算符）：先比较两个值的类型，如果类型不同直接返回 false，类型相同则比较它们的值。

示例代码：

console.log(1 == '1');  // true，因为类型转换后 '1' 转为数字 1
console.log(1 === '1'); // false，因为类型不同

null 和 undefined 的比较

在判断一个值是否为 null 或 undefined 时，== 和 === 也表现不同：

实际应用：

const value = null;
console.log(value == null);  // true，无需区分 null 和 undefined
console.log(value === null); // true，严格判断值是否为 null

注意事项

• 推荐优先使用 === 和 !==，以避免因类型转换导致的潜在问题。
• 在仅需判断是否为 null 或 undefined 时，可以用 == null。

逻辑运算符

JavaScript 提供了两个基本的逻辑运算符：

• &&（逻辑与）：当且仅当两个操作数都为真时返回真，否则返回假。
• ||（逻辑或）：只要两个操作数中有一个为真，就返回真，否则返回假。

示例代码：

console.log(true && false); // false
console.log(true || false); // true

逻辑运算符除了返回布尔值外，还可以返回实际的值，尤其在短路操作中非常有用：

console.log(0 || 'default');  // 'default'，因为 0 是假值
console.log(1 && 'valid');    // 'valid'，因为 1 是真值

赋值运算符

在 JavaScript 中，=是赋值运算符，可以将右边的值赋给左边的变量。例如：

let a = 1;
a = 2;
console.log(a); // 2

除了基本的赋值运算符外，还有一些常用的逻辑赋值运算符，如 ||=, &&= 和 ??=。它们是简化代码的利器。

||= 逻辑或赋值运算符

当变量为假值时（如 0, NaN, false, "", null, undefined），可以用 ||= 给变量赋值默认值：

let a = null;
a ||= 1; 
console.log(a); // 1

等价于：

let a = null;
if (!a) {
  a = 1;
}
console.log(a); // 1

&&= 逻辑与赋值运算符

当变量为真值时，可以用 &&= 给变量赋值新值：

let a = 1;
a &&= 2; 
console.log(a); // 2

等价于：

let a = 1;
if (a) {
  a = 2;
}
console.log(a); // 2

??= 逻辑空赋值运算符

当变量为 null 或 undefined 时，可以用 ??= 给变量赋值新值：

let a = null;
a ??= 1;
console.log(a); // 1

等价于：

let a = null;
if (a == null) {
  a = 1;
}
console.log(a); // 1

||= 和 ??= 的区别

• ||= 判断变量是否为假值（如 0, NaN, false, "", null, undefined），如果为假则赋值。
• ??= 仅判断变量是否为 null 或 undefined，如果是则赋值。

对比示例：

let a = 0;

// 使用 ||= 时，0 被认为是假值，因此赋值
a ||= 1;
console.log(a); // 1

// 使用 ??= 时，0 不是 null 或 undefined，因此不赋值
let b = 0;
b ??= 1;
console.log(b); // 0