在 JavaScript 中，双问号（??）和或运算符（||）的区别和使用

---

1.?? 和 || 的区别

在 JavaScript 中，双问号（??）和或运算符（||）都可以用来设置默认值，但是它们处理 Falsy 值的方式不同。

|| 运算符在遇到 Falsy 值时会返回第一个真值（Truthy）操作数，否则返回最后一个操作数。例如：

const x = null;
const y = x || "default";
console.log(y); // "default"

在上面的代码中，变量 y 的值将是 “default”，因为 x 的值为 null，null 是一个 Falsy 值，所以 y 的值返回了 “default”。

而双问号运算符（??）只在左侧的值为 null 或 undefined 时返回右侧的值，否则返回左侧的值。例如：

const x = null;
const y = x ?? "default";
console.log(y); // null

在上面的代码中，变量 y 的值将是 null，因为 x 的值为 null，而 ?? 运算符只会在左侧的值为 null 或 undefined 时返回右侧的默认值。

因此，双问号运算符和或运算符的区别在于它们在处理 Falsy 值时的行为不同。或运算符会将 Falsy 值视为假，而双问号运算符只在左侧的值为 null 或 undefined 时才返回右侧的默认值。

在实际使用中，当需要设置默认值时，可以使用双问号运算符来避免将 Falsy 值视为默认值。例如：

const x = 0;
const y = x ?? 42;
console.log(y); // 0

在上面的代码中，变量 y 的值将是 0，因为 x 的值为 0，而 0 不是 Falsy 值，所以 y 的值返回了 0。如果使用或运算符来设置默认值，那么 y 的值将会是 42，这可能不是我们期望的结果。

总之，双问号运算符可以更加准确地设置默认值，避免将 Falsy 值视为默认值。

2.?? 和 || 的使用

在 JavaScript 中，双问号（“??”）被称为 Nullish Coalescing 运算符，它用于处理变量值为 null 或 undefined 的情况。

具体来说，双问号运算符返回其左侧的操作数，如果它的值是 null 或 undefined，则返回右侧的操作数。例如：

const x = null;
const y = x ?? "default";
console.log(y); // "default"

在上面的代码中，变量 y 的值将是 “default”，因为 x 的值为 null，而双问号运算符会返回右侧的默认值。

请注意，双问号运算符仅在其左侧的值为 null 或 undefined 时才返回右侧的默认值。如果左侧的值为 “”（空字符串）、0 或 false，则左侧的值仍然被视为有效值，双问号运算符不会返回右侧的默认值。

例如：

const a = "";
const b = a ?? "default";
console.log(b); // ""

在上面的代码中，变量 b 的值将是 “”，因为 a 的值为 “”，而双问号运算符会将其视为有效值，不会返回右侧的默认值。

总之，双问号运算符是一种方便的方式来处理可能为 null 或 undefined 的变量值。