&& 和 ?? 之间的区别 在 JavaScript 中

Question

我正在尝试使用逻辑与 &&和空合并运算 ??符来条件渲染变量/值。但由于某种原因，我不清楚这两个运算符的用法以及它们是如何工作的。

请解释这两者之间的区别以及我们何时应该使用其中任何一个而不是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  |
     null, 'default'    |'default'|   null  |'default'|
undefined, 'default'    |'default'|undefined|'default'|
     true, 'default'    |  true   |'default'|  true   |
       20, 'default'    |   20    |'default'|   20    |

Answer 2

&& - 表示“与”。

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

例如

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

空值合并运算符??区分空值（空、未定义），其中 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