TL;DR

  • ||（逻辑或运算符）：用于设置默认值，在遇到falsy值(false、0、''、null、undefined和NaN)时返回默认值。
  • ??（空值合并运算符）：用于设置默认值，在遇到null或undefined时返回默认值。

在 JavaScript 中，||（逻辑或运算符）和 ??（空值合并运算符）都是用于设置默认值的运算符，但它们的行为却有所不同。这篇文章将对这两个运算符进行比较，帮助你理解何时使用它们。

1. 基本概念

逻辑或运算符 (||)

逻辑或运算符返回第一个真值（truthy）或最后一个值。它会将所有falsy值（如false、0、''、null、undefined和NaN）视为需要替换的情况。

1
2
3
4
let value = null;
let defaultValue = "默认值";

let result = value || defaultValue; // 结果为 '默认值'

空值合并运算符 (??)

空值合并运算符仅在操作数为null或undefined时返回右侧的值。它不会将其他falsy值视为需要替换的情况。

1
2
3
4
let value = 0;
let defaultValue = "默认值";

let result = value ?? defaultValue; // 结果为 0

2. 具体示例

让我们通过具体示例来比较这两个运算符的行为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let value1 = null;
let value2 = undefined;
let value3 = 0;
let value4 = "";

let defaultValue = "默认值";

console.log(value1 || defaultValue); // 输出: '默认值'
console.log(value2 || defaultValue); // 输出: '默认值'
console.log(value3 || defaultValue); // 输出: '默认值'
console.log(value4 || defaultValue); // 输出: '默认值'

console.log(value1 ?? defaultValue); // 输出: '默认值'
console.log(value2 ?? defaultValue); // 输出: '默认值'
console.log(value3 ?? defaultValue); // 输出: 0
console.log(value4 ?? defaultValue); // 输出: ''

从上面的例子可以看到，||运算符会在遇到0或''时返回默认值，而??运算符则会保留这些值。

3. 何时使用

  • **使用||**：

    当你希望在所有falsy值（包括0、''等）被视为需要替换的情况。

  • **使用 ??**：

    当你只想在值为null或undefined的情况下提供默认值，并希望保留其他falsy值。