|| 之间的区别和 ？？运营商

Question

JS 中的 ?? 和 || 有什么区别

const a = {}

const b = a.name ?? 'varun 1'

console.log(b)

const d = a.name || 'varun 2'

console.log(d)

在上面的代码中，它们的工作方式相同。我知道 || 是 OR，即如果第一个语句是 false 然后设置下一个的值。 ?? 是否相同？

Answer 1

你可以看到差异

const a = ''

const b = a ?? 'varun 1'

console.log(b)

const d = a || 'varun 2'

console.log(d)

因为只有当 a ?? 'varun 1' 为空或未定义时，'varun 1' 才返回 a，但如果 a || 'varun 2' 为假，'varun 2' 返回 a。一些假值是空字符串、零和布尔假。

Answer 2

主要区别在于，只有当左操作数是 nullish coalescing(??) 或 null 时，undefined 运算符才会将结果作为右操作数给出。

而 OR (||) 运算符会将结果作为左操作数的所有假值的右操作数。

下面是一些例子

• 代码段 1：以 0 作为输入

const a = 0;
//a || 10 --> Will result in 10, as || operator considers it as falsy value and resulting the right side operand
console.log(`a || 10 = ${a || 10}`);
//a ?? 10 --> Will result in 0, as ?? operator consider it as truthy value and resulting the left side operand
console.log(`a ?? 10 = ${a ?? 10}`);

• 代码段 2：以 '' 作为输入

const a = ''
console.log(`a || "ABC" = ${a || "ABC"}`);
console.log(`a ?? "ABC" = ${a ?? "ABC"}`);

• 代码段 3：以 null 作为输入

const a = null;
console.log(`a || 10 = ${a || 10}`);
console.log(`a ?? 10 = ${a ?? 10}`);

• 代码段 4：以 undefined 作为输入

const a = {}
//Here a.name will be undefined, hence both of the operands results the right side operand
console.log(`a.name ?? 'varun 1' = ${a.name ?? 'varun 1'}`);
console.log(`a.name || 'varun 2' = ${a.name || 'varun 2'}`);

const a = {name: ''}
//As, here a.name will be '' then 

//?? will result ''
console.log(`a.name ?? 'varun 1' = ${a.name ?? 'varun 1'}`);
//|| will result in varun 2
console.log(`a.name || 'varun 2' = ${a.name || 'varun 2'}`);

• 代码段 5：以 false 作为输入

const a = false;
console.log(`a || 10 = ${a || 10}`);
console.log(`a ?? 10 = ${a ?? 10}`);

如上所述，当输入为 null 或 undefined 时，这两个运算符的行为相似。当我们提供 falsy 值（例如 0、''、false、NaN）时，我们将看到真正的区别。