JavaScript 中的空值合并运算符

本文解释了JavaScript中的空值合并运算符。

YouTube Video

JavaScript 中的空值合并运算符

在JavaScript中，空值合并运算符（??）用于判断值是否为**null或undefined**，如果是，则返回一个不同的默认值。它类似于常用的逻辑或运算符（||），但不同之处在于它专用于null和undefined。

逻辑或运算符在左侧值为“falsy”时返回右侧值，而空值合并运算符仅在左侧值为“null”或“undefined”时返回右侧值。这种特性可以正确处理像0和空字符串（""）这样的值。

基本语法

1let result = value ?? defaultValue;

• value 是正在检查的值。
• defaultValue 是当 value 为 null 或 undefined 时返回的值。

空值合并运算符的使用示例

以下示例实现了当值为null或undefined时返回默认值的过程。

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

在此代码中，由于name为null，因此返回defaultName的值，即"Anonymous"。如果name是除null或undefined以外的值，则返回该值。

与逻辑或运算符的区别

空值合并运算符类似于逻辑或运算符，但有一个重要的区别。逻辑或运算符会检查“falsy”值（false、0、NaN、""、null、undefined 等），而空值合并运算符仅检查 null 和 undefined。

逻辑或运算符的示例：

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

空值合并运算符的示例：

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

通过这种方式，空值合并运算符保留了有效值，例如 0 和空字符串（""），仅在必要时返回默认值。由于逻辑或运算符将这些值视为“falsy”并返回默认值，因此根据使用场景选择合适的运算符非常重要。

组合使用时的示例：

空值合并运算符也可以与其他逻辑运算符组合使用，但在这样做时需要注意。

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• 例如，当与逻辑或运算符（||）或逻辑与运算符（&&）一起使用时，应使用括号来明确运算顺序。

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• 在此示例中，a ?? b首先被计算，由于a为null，因此返回b。然后，计算 b || c，由于 b 是假值，最终返回 c。

空值合并运算符的适用场景

以下是空值合并运算符的适用场景。

• 表单的默认值 当用户未输入任何内容时，可以在为表单输入字段设置默认值的场景中使用这一功能。

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• API响应处理 当API响应中的值为null或undefined时，可以执行回退处理。

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

总结

空值合并运算符（??）在初始化数据和处理 API 响应时非常有用，因为它在遇到 null 或 undefined 时会返回默认值。特别是，当需要正确处理 0 或空字符串等“falsy”值时，它比传统的逻辑或运算符（||）是更好的选择。

关于空值合并赋值操作符 (??=)

概述

在JavaScript中，引入了空值合并赋值操作符 ??=，用于高效地为值为 null 或 undefined 的变量分配新值。当特定值为 null 或 undefined 时，这个操作符是为变量赋值的便捷缩写方式。

基本用法

空值合并赋值运算符的功能如下：。

• 如果一个变量为 null 或 undefined，它会赋予右侧的值。
• 如果变量既不是 null 也不是 undefined，它将不做任何操作，保留当前值。

语法

空值合并赋值运算符的基本语法如下：。

1x ??= y;

• 如果 x 为 null 或 undefined，则将 y 赋值给 x。
• 如果 x 已有值（不是 null 或 undefined），x 的值不会被更改。

示例

让我们来看一个空值合并赋值运算符的基本例子：。

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• 在该代码中，由于 userName 是 null，所以赋值为 defaultName 的值。

接下来，这里有一个值既不是 null 也不是 undefined 的例子：。

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• 在这种情况下，由于 userName 已被设置为 "Alice"，因此不会进行赋值。

与其他赋值操作符的比较

JavaScript 还有其他几种赋值操作符。尤其是与逻辑或赋值操作符 (||=) 的区别是重要的。

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

逻辑或赋值运算符即使在遇到“falsy”值（例如 false、0 或空字符串（""））时也会赋值，而空值合并赋值运算符仅在值为 null 或 undefined 时进行操作。

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

由于空值合并赋值运算符仅对 null 或 undefined 起作用，因此当需要保留 0 或 false 之类的值时非常有用。

实际应用案例

空值合并赋值运算符的一个实际用例如下所示:。

1. 设置默认值

   当用户输入或API响应可能为null或undefined时，这对于设置默认值非常有用。

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. 处理可选参数

   当函数参数未指定时，它也可用于执行默认操作。

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

总结

空值合并赋值运算符（??=）仅在左侧值为 null 或 undefined 时赋值，使代码更简洁，并有助于防止意外赋值。特别是当处理像0或false这样的"falsy"值时，它比传统的逻辑或运算符（||=）更合适。

通过使用此运算符，您可以编写更健壮且更易读的代码。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video