空值合并运算符在 JS 中的运作机制

前端修罗场

发布于 2022-07-29 07:57:19

1.9K0

发布于 2022-07-29 07:57:19

文章被收录于专栏：Web 技术

ES11添加了一个合并运算符，该运算符由双问号表示，如下所示：

??

在本文中，我们将探讨为什么它如此有用以及如何使用它。

背景

在JavaScript中，存在短路逻辑运算符：|| ，它返回第一个真实值。

除了它以外，以下是在JavaScript中被认为是虚假值的仅有这六个值：

false
undefined
null
""(empty string)
NaN
0

因此，如果以上列表中如果未包含任何内容，则将返回其视为真实值。

Truthy和Falsy值是强制为true的非布尔值或执行某些操作时为false。

const value1 = 1;
const value2 = 23;

const result = value1 || value2; 

console.log(result); // 1

作为|| 运算符返回第一个真实值，在上面的代码中，结果将是存储在value1中的值为1。如果value1为null，undefined，empty或任何其他虚假值，则||之后的下一个操作数将对运算符进行求值。

const value1 = 0;
const value2 = 23;
const value3 = "Hello";

const result = value1 || value2 || value3; 

console.log(result); // 23

在此，由于value1为0，因此将检查value2。因为它是一个真实值，所以整个表达式的结果将是value2。

||的问题是它不能区分false，0，空字符串“”，NaN，null和undefined。它们都被认为是虚假的值。

如果这些是||的第一个操作数，那么我们将得到第二个操作数作为结果。

为什么JavaScript需要空位合并运算符

|| 运算符的效果很好，但有时我们只希望在第一个操作数为null或undefined 时对下一个表达式求值。因此，ES11添加了空值合并运算符。

在如下表达式中：

x ?? y

如果x为null或undefined ，则结果为y
如果x不为null或undefined ，则结果将为x

这样一来，这将使条件检查和调试代码变得容易。

Try

let result = undefined ?? "Hello";
console.log(result); // Hello

result = null ?? true; 
console.log(result); // true

result = false ?? true;
console.log(result); // false

result = 45 ?? true; 
console.log(result); // 45

result = "" ?? true; 
console.log(result); // ""

result = NaN ?? true; 
console.log(result); // NaN

result = 4 > 5 ?? true; 
console.log(result); // false because 4 > 5 evaluates to false

result = 4 < 5 ?? true;
console.log(result); // true because 4 < 5 evaluates to true

result = [1, 2, 3] ?? true;
console.log(result); // [1, 2, 3]

因此，从以上所有示例中，很明显，表达式：