JavaScript 中的 Nullish 合并运算符由两个问号 (??) 表示。它接受两个操作数,如果第一个操作数不是 null 或 undefined,则返回第一个操作数;否则返回第二个操作数。这是一个在 ES2020 中引入的逻辑运算符。
在许多情况下,变量中可能会存储 null 或空值,这可能会改变代码的行为或生成错误。因此,我们可以使用 Nullish 合并运算符,在变量包含假值时使用默认值。
语法
我们可以按照以下语法使用 Nullish 合并运算符:
op1 ?? op2
Nullish 合并运算符 (??) 如果第一个操作数 (op1) 是 null 或 undefined,则返回第二个操作数 (op2)。否则,'res' 变量将包含 'op1'。
上述语法类似于以下代码:
let res;
if (op1 != null || op1 != undefined) {
res = op1;
} else {
res = op2;
}
示例
让我们通过一些示例详细理解 Nullish 合并运算符。
示例:处理 null 或 undefined
在下面的示例中,x 的值为 null。我们将 x 作为第一个操作数,5 作为第二个。从输出中可以看到,由于 x 是 null,因此 y 的值为 5。您可以将 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
示例:访问对象属性
在下面的示例中,创建了包含与手机相关的属性的对象。然后,我们访问对象的属性,并初始化变量。由于对象中没有 '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
短路求值
与逻辑 AND 和 OR 运算符类似,如果左操作数既不是 null 也不是 undefined,Nullish 合并运算符也不会评估右操作数。
使用 ?? 与 && 或 ||
当我们使用 ?? 运算符与逻辑 AND 或 OR 运算符结合时,应使用括号明确指定优先级。
let x = 5 || 7 ?? 9;
let x = (5 || 7) ?? 9;
示例
在下面的示例中,我们使用了 Nullish 合并运算符与 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