1

我正在尝试使用逻辑 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);

4

5 回答 5

2

&& - 表示与。

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

例如

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

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

let foo = someValue ?? "default value"; 
// when someValue is null assing default (right hand) value to variable foo.
于 2021-12-13T12:45:01.983 回答
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'|
于 2021-12-13T13:37:06.593 回答
0

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

var x = '';

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


var y; // undefined

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

于 2021-12-13T12:44:05.063 回答
0

文档中的第一条语句对于代码中的前两条语句应该是不言自明的：

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

关于，&&：AND (&&) 之后的第二个表达式仅在第一个表达式为真时检查，然后返回第二个表达式。否则返回第一个表达式。

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);

于 2021-12-13T12:45:40.227 回答
0

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

const emptyString = ""
const nullValue = null

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

const valC = emptyString && "valC" // ""
const valD = nullValue && "valD" // null
于 2021-12-13T13:03:09.300 回答