逻辑或与空值合并运算符的区别

空值合并运算符（??）在 ES 2020 中引入，用于在变量为空值或未定义时提供默认值，当左操作数 null 或 undefined 时，返回右操作数，否则返回左操作数。逻辑或运算符（||）在某些情况下可以和空值合并运算符达到相同的效果。


const a = undefined ?? 'default string';
const b = null || 'default string';

console.log(a, b); // => 'default string' 'default string'

它们之间的区别在于，逻辑或过滤的是假值，空值合并过滤的是空值。空值（null、undefined）是假值，但假值不一定是空值。

什么是假值？

假值是在 ToBoolean() 后返回 false 的值，常见的假值有：

undefined

null

+0、-0、0n、NaN

“”、‘’、``

false

document.all

⚠️

document.all 虽然是个对象，但是转换布尔值为 false。

由于 null 和 undefined 是假值，所以当左操作数为 null 或 undefined 时，逻辑或和空值合并运算符作用一样。但有时我们需要区分这种区别，例如，0 代表数值 0，并不代表没有值（空值）。


const a = 0 ?? 10; // a => 0
const b = 0 || 10; // b => 10

const c = document.all ?? {}; // c => [object HTMLAllCollection]
const d = document.all || {}; // d => {}

总结

空值合并运算符和逻辑或运算符虽然在某些情况下表现相似，但它们实际上有着本质的区别。这些细微的差别在使用过程中可能会导致截然不同的结果，因此理解二者的本质区别尤为重要。