Nullish 合并运算符
JavaScript 中的 Nullish 合并运算符由两个问号 (??) 表示。它采用两个操作数,如果第一个操作数不是 null 或 undefined,则返回第一个操作数。否则,它将返回第二个操作数。它是 ES2020 中引入的逻辑运算符。
在许多情况下,我们可以将 null 或 空值 存储在变量中,这可能会改变代码的行为或产生错误。因此,当变量包含假值时,我们可以使用 Nullish 合并运算符来使用默认值。
语法
我们可以按照下面的语法来使用 Nullish 合并运算符。
op1 ?? op2
如果第一个操作数 (op1) 为 null 或未定义,则 nullish 合并运算符 (??) 返回第二个操作数 (op2)。否则,'res' 变量将包含 'op2'。
上面的语法类似于下面的代码。
let res;
if (op1 != null || op1 != undefined) {
res = op1;
} else {
res = op2;
}
例子
让我们借助一些示例详细了解空值合并运算符。
示例:处理 null 或 undefined
在下面的示例中,x 的值为 null。我们使用 x 作为第一个操作数,使用 5 作为第二个操作数。您可以在输出中看到 y 的值为 5,因为 x 为 null。您可以将 undefined 分配给变量。
<html>
<body>
<div id = "output"></div>
<script>
let x = null;
let y = x ?? 5;
document.getElementById("output").innerHTML =
"The value of y is: " + y;
</script>
</body>
</html>
它将产生以下结果 -
示例:处理数组中的 null 或 undefined
在下面的示例中,我们定义了一个包含数字的数组。我们使用空数组 ([]) 作为第二个操作数。因此,如果 arr 为 null 或 undefined,我们将一个空数组分配给 arr1 变量。
<html>
<body>
<div id = "output"></div>
<script>
const arr = [65, 2, 56, 2, 3, 12];
const arr1 = arr ?? [];
document.getElementById("output").innerHTML = "The value of arr1 is: " + arr1;
</script>
</body>
</html>
它将产生以下结果——
示例:访问对象属性
在下面的示例中,我们创建了包含移动相关属性的对象。之后,我们访问对象的属性并使用 value 初始化变量。该对象不包含 'brand' 属性,因此代码使用 'Apple' 初始化 'brand' 变量,您可以在输出中看到。
这样,我们可以在访问具有不同属性的对象的属性时使用 Nullish 合并运算符。
<html>
<body>
<div id = "output"></div>
<script>
const obj = {
product: "Mobile",
price: 20000,
color: "Blue",
}
let product = obj.product ?? "Watch";
let brand = obj.brand ?? "Apple";
document.getElementById("output").innerHTML =
"The product is " + product + " of the brand " + brand;
</script>
</body>
</html>
它将产生以下结果——
短循环(Short-Circuiting)
与逻辑 AND 和 OR 运算符一样,如果左侧操作数既不是 null 也不是 undefined,则 Nullish 合并运算符不会计算右侧操作数。
用??带 & & 或 ||
当我们使用 ??运算符替换为逻辑 AND 或 OR 运算符,我们应该使用括号来显式指定优先级。
let x = 5 || 7 ?? 9; // 语法错误
let x = (5 || 7) ?? 9; // works
例
在下面的示例中,我们使用了带有 OR 运算符 (||) 和 AND 运算符 (&&) 的空值合并运算符。
<html>
<body>
<div id = "output"></div>
<script>
let x = (5 || 7) ?? 9;
let y = (5 && 7) ?? 9;
document.getElementById("output").innerHTML =
"The value of x is : " + x + "<br>" +
"The value of y is : " + y;
</script>
</body>
</html>
上述程序将产生以下结果 -
The value of y is : 7