JavaScript 空值合并运算符

空值合并运算符

JavaScript 中的空值合并运算符用两个问号 (??) 表示。它接受两个操作数，如果第一个操作数不是null 或undefined，则返回第一个操作数。否则，它返回第二个操作数。它是一个在 ES2020 中引入的逻辑运算符。

在许多情况下，变量中可能存储空值或空值，这可能会改变代码的行为或产生错误。因此，当变量包含虚假值时，可以使用空值合并运算符使用默认值。

语法

可以使用以下语法使用空值合并运算符。

op1 ?? op2

空值合并运算符 (??) 如果第一个操作数 (op1) 为null 或undefined，则返回第二个操作数 (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

示例：访问对象属性

在下面的示例中，我们创建了包含移动相关属性的对象。之后，我们访问对象的属性并使用值初始化变量。对象不包含 'brand' 属性，因此代码使用 'Apple' 初始化 'brand' 变量，您可以在输出中看到。

这样，在访问具有不同属性的对象的属性时，可以使用空值合并运算符。

<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，则空值合并运算符不会评估右操作数。

将 ?? 与 && 或 || 一起使用

当我们将 ?? 运算符与逻辑 AND 或 OR 运算符一起使用时，应使用括号明确指定优先级。

let x = 5 || 7 ?? 9; // Syntax Error
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

打印页面