在JavaScript中,??
和 ||
是两个常用的操作符,用于处理变量的默认值和条件判断。虽然它们在某些情况下可能看起来类似,但它们有着不同的用途和行为。以下是它们的详细区别:
||
操作符
||
是逻辑或操作符,用于短路求值。它的工作原理是:如果左操作数是一个“假值”(falsy value),则返回右操作数;否则返回左操作数。JavaScript 中的“假值”包括:
false
0
-0
0n
(BigInt 零值)""
(空字符串)null
undefined
NaN
let a = 0;
let b = a || 10;
console.log(b); // 输出 10,因为 0 是假值
let c = "Hello";
let d = c || "World";
console.log(d); // 输出 "Hello",因为 c 是真值
??
操作符
??
是空值合并操作符,它只在左操作数是 null
或 undefined
时返回右操作数。其他情况下,它会返回左操作数。这个操作符主要用于处理可能为 null
或 undefined
的值。
let a = 0;
let b = a ?? 10;
console.log(b); // 输出 0,因为 0 不是 null 或 undefined
let c = null;
let d = c ?? "default";
console.log(d); // 输出 "default",因为 c 是 null
let e = undefined;
let f = e ?? "default";
console.log(f); // 输出 "default",因为 e 是 undefined
主要区别
-
处理的值类型:
||
操作符会将所有的假值(包括false
、0
、""
等)视为false
,并返回右操作数。??
操作符只会将null
和undefined
视为空值,其他值都不会影响结果。
-
使用场景:
- 使用
||
操作符可以处理任何假值的情况,适用于需要覆盖所有假值的场景。 - 使用
??
操作符则更适合在只需要处理null
或undefined
的场景下使用,避免不必要的值覆盖。
- 使用
let value1 = 0;
let result1 = value1 || "default";
let result2 = value1 ?? "default";
console.log(result1); // 输出 "default",因为 0 是假值
console.log(result2); // 输出 0,因为 0 不是 null 或 undefined