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。