JavaScript - Nullish 合并运算符

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>

它将产生以下结果 -

The value of y is: 5

示例：处理数组中的 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>

它将产生以下结果——

The value of arr1 is: 65,2,56,2,3,12

示例：访问对象属性

在下面的示例中，我们创建了包含移动相关属性的对象。之后，我们访问对象的属性并使用 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>

它将产生以下结果——

The product is Mobile of the brand Apple

短循环（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 x is : 5
The value of y is : 7

打印本页