在ECMAScript中，空值合并运算符（??）和逻辑或运算符（||）有何不同？

Question

ES2020引入了空值合并运算符(??)，如果左操作数为 null 或 undefined，则返回右操作数。这个功能类似于逻辑或运算符 (||)。例如，下面的表达式返回相同的结果。

const a = undefined
const b = "B"

const orOperator = a || b
const nullishOperator = a ?? b
  
console.log({ orOperator, nullishOperator })

结果：

{
    orOperator:"B",
    nullishOperator:"B"
}

那么空值运算符有何不同，并且它的用例是什么？

- francis

---

一处不同在于它处理“false”的方式。 - Matt

a || b === a ? a : b , a ?? b === a != null ? a : b - Felix Kling

一个人不必寻找比MDN文档更远的地方。 - Felix Kling

例如，下面的表达式返回相同的结果。您可以找到许多示例，其中特定值使用不同的运算符产生相同的结果。例如，0 + 0，0 - 0，0 * 0都会产生0，但我希望没有人会认为这些运算符执行不同的操作。如果您想了解运算符之间的区别，仅查看一个示例是不够的。 - Felix Kling

Answer 1

|| 运算符仅在左侧为falsy值时，才会计算右侧的表达式。

?? 运算符（空值合并）仅在左侧为 null 或 undefined 时，才会计算右侧的表达式。

false、0、NaN、""（空字符串）等都被视为falsy值，但有时您可能需要这些值。在这种情况下，使用 ?? 运算符是正确的选择。

- Phillip

Answer 2

如果你想为一个可能是NaN的数字提供一个默认值，可以这样做：

a = a || 0

// Not this
// a = a ?? 0

另请参阅将NaN转换为零。

解释：

这两个运算符通常用于为变量提供默认值。处理可能的NaN值的情况可能会有一些差异：

let userAge = null

let age1 = userAge || 21
let age2 = userAge ?? 21
console.log(age1) // 21
console.log(age2) // 21

let userAge = parseFloat(null)

let age1 = userAge || 21
let age2 = userAge ?? 21
console.log(age1) // 21
console.log(age2) // NaN

如果你希望将可能为NaN的值回退到默认值，选择使用||。而双问号（也称为空值运算符）??在这里不起作用。

- tinystone