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

2022-07-29 07:57:19 浏览数 (1)

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

代码语言:javascript复制
??

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

背景

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

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

代码语言:javascript复制
false
undefined
null
""(empty string)
NaN
0

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

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

代码语言:javascript复制
const value1 = 1;
const value2 = 23;

const result = value1 || value2; 

console.log(result); // 1

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

代码语言:javascript复制
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添加了空值合并运算符。

在如下表达式中:

代码语言:javascript复制
x ?? y
  • 如果x为null或undefined ,则结果为y
  • 如果x不为null或undefined ,则结果将为x

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

Try

代码语言:javascript复制
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]

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

代码语言:javascript复制
x??y

仅当x 是 undefined 或为null时,y才是y。

0 人点赞