&& 和 ?? 的区别在 JavaScript 中

Question

我正在尝试使用 Logical AND && 和 Nullish 合并运算符 ?? 运算符来条件呈现变量/值。 但由于某种原因，我不清楚这两个运算符的用法以及它们的工作原理。

请解释这两者之间的区别以及我们何时应该使用其中任何一个来代替if 语句。

/* --------------------  ?? operator -------------------- */
const foo = null ?? '?? default string';
console.log(foo);

const baz = 0 ?? 10;
console.log(baz);

/* --------------------  && operator -------------------- */

const foo_1 = null && '&& default string';
console.log(foo_1);

const baz_1 = 0 && 20;
console.log(baz_1);

Answer 1

要查看差异并确定何时使用一个或另一个运算符，您可以制作如下表格：

                        |    ||   |    &&   |    ??   |
    --------------------+---------+---------+---------+
        0, 'default'    |'default'|    0    |    0    |
       '', 'default'    |'default'|   ''    |   ''    |
    false, 'default'    |'default'|  false  |  false  |
     true, 'default'    |  true   |'default'|  true   |
       20, 'default'    |   20    |'default'|   20    |
     null, 'default'    |'default'|   null  |'default'|
undefined, 'default'    |'default'|undefined|'default'|

Answer 2

&& - 表示与。

?? - 当左侧表达式为空或未定义时，仅返回右侧表达式的运算符。

例如

if(someValue && otherValue) {
//if someValue is true AND otherValue is true
}

??也称为空值合并算子。它是一个运算符，当左侧表达式为 null 或未定义时，仅返回右侧表达式。

let foo = someValue ?? "default value"; 
// when someValue is null assing default (right hand) value to variable foo.

Answer 3

文档中的第一条语句应该对代码中的前两条语句进行自我解释：

nullish 合并运算符 (??) 是一种逻辑运算符，当其左侧操作数为 null 或未定义时返回其右侧操作数，否则返回其左侧操作数。

关于，&&： AND(&&) 之后的第二个表达式只有在第一个表达式是truthy 时才会被检查，然后返回第二个表达式。否则返回第一个表达式。

const foo_1 = null && '&& default string';
console.log(foo_1);

const baz_1 = 0 && 20;
console.log(baz_1);

const baz_2 = 20 && 30;
console.log(baz_2);

Answer 4

空值合并运算符 ?? 区分空值（null、未定义），其中 OR 运算符 || 或 AND 运算符 && 检查包含 "" 0 false 的虚假值nullundefined

var x = '';

console.log(x ?? "default"); // ''
console.log(true && x); // ''


var y; // undefined

console.log(y ?? "default"); // 'default'
console.log(true && y); // undefined

Answer 5

??当其左侧操作数为 null 或未定义时，返回其右侧操作数

const emptyString = ""
const nullValue = null

const valA = emptyString ?? "valA"  // ""
const valB = nullValue ?? "valB" // "ValB"

const valC = emptyString && "valC" // ""
const valD = nullValue && "valD" // null