TypeScript 中的空值合并操作符
在本文中，我们将解释 TypeScript 中的空值合并操作符。
YouTube Video
TypeScript 中的空值合并操作符
TypeScript 中的空值合并操作符 (??) 类似于 JavaScript 的短路求值，但更明确地用作在左侧值为 null 或 undefined 时提供替代值。此操作符允许您轻松检查值是否为 null 或 undefined，并根据需要设置默认值。
空值合并操作符 (??) 仅在左侧值为 null 或 undefined 时返回右侧的值。这允许诸如 false、空字符串或数字 0 等值按其本身进行评估。这是与传统逻辑或操作符（||）的一大区别。此操作符是在 TypeScript 3.7 中引入的。
基本语法
基本语法如下：。
1let result = value ?? defaultValue;value是被检查是否为null或undefined的目标。defaultValue是当value为null或undefined时返回的值。
示例用法
1function getUserName(userName: string | null | undefined): string {
2 return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice")); // Output: Alice
6console.log(getUserName(null)); // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User
在这里，如果 userName 为 null 或 undefined，函数 getUserName 返回 "Default User"，否则返回 userName 的值。
与逻辑或操作符的区别
空值合并操作符与逻辑或操作符之间有一个重要区别。逻辑或操作符将像 false、0 和 ""（空字符串）这样的值视为“假值”，就像 null 和 undefined 一样。另一方面，空值合并操作符仅使用 null 和 undefined 作为回退判定条件。
逻辑或操作符的示例
1function getUserAge(age: number | null | undefined): number {
2 return age || 18; // `0` also applies the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 18
7console.log(getUserAge(null)); // Output: 18
- 如图所示，即使值为
0，逻辑或操作符也会返回默认值18。
空值合并操作符的示例
1function getUserAge(age: number | null | undefined): number {
2 return age ?? 18; // `0` does not apply the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 0
7console.log(getUserAge(null)); // Output: 18
-
另一方面，空值合并操作符即使在值为
0时也会返回原始值。 -
逻辑或操作符与空值合并操作符的选择取决于是否可以接受
0或空字符串。例如，如果您希望将用户的年龄保留为0，则需要使用空值合并操作符。
与类型的结合
通过结合使用 TypeScript 的类型安全与空值合并操作符，可以增强代码的健壮性。在以下示例中，当某些属性为 null 或 undefined 时，将使用默认值。
1interface User {
2 name: string;
3 age?: number | null;
4}
5
6function displayUserInfo(user: User): string {
7 const userName: string = user.name;
8 const userAge: number = user.age ?? 18;
9 return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18
- 在
User接口中，age属性可以是number、null或undefined，因此使用空值合并操作符赋予一个默认值18。 - 同时，
name属性只允许string类型，因此直接使用该值。
总结
- 空值合并操作符仅在值为
null或undefined时帮助设置默认值。与传统的逻辑或操作符不同，它不会将false、0或空字符串视为“假值”，因此在您想保留这些值时尤其有用。此外，将其与 TypeScript 的类型系统结合使用，可以创建更健壮且更易读的代码。 - 通过有效地使用空合并操作符，可以简洁地编写设置默认值的逻辑，同时减少不必要的
null检查。
TypeScript 中的空合并赋值操作符
空合并赋值操作符 (??=) 是 TypeScript 中引入的相对较新的操作符，它提供了一种方便的方法，仅在变量为 null 或 undefined 时分配值。在这里，我们将解释此操作符的工作原理、适用的场景，并提供代码示例。
什么是空合并赋值操作符
空值合并赋值操作符是一种基于空值合并操作符的赋值操作符。此操作符仅在变量为 null 或 undefined 时用于分配新值。
1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null,
3 // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"
使用此操作符，您可以更简洁地编写“如果变量未定义或为 null 则赋值”的逻辑。
与传统赋值方法的比较
如果没有空值合并赋值操作符，您将需要使用 if 语句或三元操作符来实现相同的行为。让我们与传统的赋值方法进行比较。
传统方法
使用 if 语句，可以写成如下：。
1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
使用三元运算符的方法
或者，使用三元操作符，可以写成如下：。
1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"
使用空值合并赋值操作符的简洁方法
另一方面，使用空值合并赋值操作符，可以写成如下：。
1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"
如图所示，空值合并赋值操作符比其他赋值方法更加简洁和可读，从而提高代码的清晰度。
??= 的具体用例
空值合并赋值操作符在多种场景中非常有用，例如初始化对象属性和设置默认值。以下是一些具体示例。
对象属性的初始化
1interface Config {
2 theme?: string;
3 language?: string;
4}
5
6let config: Config = {};
7config.theme ??= "light"; // Set the default "light" theme if none is specified
8config.language ??= "en"; // Set the default "en" language if none is specified
9
10console.log(config); // Output: { theme: "light", language: "en" }
数组的初始化
1let numbers: number[] | null = null;
2numbers ??= []; // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]
为函数参数设置默认值
1function greet(name?: string) {
2 name ??= "Guest"; // Set name to "Guest" if it is undefined or null
3 console.log(`Hello, ${name}!`);
4}
5
6greet(); // Output: "Hello, Guest!"
7greet("Alice"); // Output: "Hello, Alice!"
注意事项和限制
空值合并赋值操作符非常有用，但也有一些注意事项。
仅 null 和 undefined 会成为目标。。
1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)
- 此操作符仅在值为
null或undefined时执行赋值。例如，空字符串（""）、0或false等值不会成为目标。
与其他操作符一起使用时需小心。。
1let value: string | null = null;
2
3// Targets not only "null" and "undefined" but also falsy values
4value ||= "Default";
5console.log(value); // Output: "Default"
6
7value = "";
8// An empty string is also targeted
9value ||= "Default";
10console.log(value); // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value); // Output: "Default"
- 当与其他操作符一起使用时，空值合并赋值操作符可能会产生意外结果。特别重要的是要理解它与逻辑或赋值操作符之间的区别。
示例代码
1let config: { theme?: string; language?: string } = {};
2
3// Use Nullish Coalescing Assignment to set default values
4config.theme ??= "light";
5config.language ??= "en";
6
7console.log(config); // Output: { theme: "light", language: "en" }
8
9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]
- 通过使用空值合并赋值操作符，您可以消除不必要的代码，编写更简洁、更优雅的 TypeScript 代码。
总结
空值合并赋值运算符（??=）是 TypeScript 中一种简单高效的赋值操作。当需要检查 null 或 undefined 同时设置默认值时，这特别有用。与传统的 if 语句或三元操作符相比，代码变得更加简洁和可读。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。