javascript 多年来已经发生了显着的发展，引入了新的功能和语法，使该语言更加强大和更具表现力。该语言最令人兴奋的新增功能之一是空合并运算符 (??)。该运算符绝对是游戏规则的改变者，提供了一种简洁直观的方法来处理 null 和未定义的值。在本文中，我们将探讨 nullish 合并运算符、其优点以及如何在 typescript 中有效使用它。
空值合并运算符简介
空合并运算符 (??) 是一个逻辑运算符，当左侧操作数为空或未定义时，它返回右侧操作数。这对于提供默认值和避免与逻辑 or (||) 运算符相关的常见陷阱特别有用。
逻辑或 (||) 的问题
在引入空值合并运算符之前，开发人员经常使用逻辑 or (||) 运算符来提供默认值。然而，这种方法有一个显着的缺点：它将假值（例如 0、'' 和 false）视为等同于 null 或未定义。
let value = 0; let defaultvalue = value || 10; console.log(defaultvalue); // output: 10
在上面的例子中，值为 0，这是一个假值。因此，即使 0 是有效数字，defaultvalue 也会被分配为 10。此行为可能会导致代码出现意外结果和错误。
空合并运算符 (??) 来救援
空合并运算符 (??) 通过在左侧操作数为空或未定义时仅返回右侧操作数来解决此问题。这使得它成为提供默认值的更可靠的选择。
let value: number | null | undefined = 0; let defaultvalue = value ?? 10; console.log(defaultvalue); // output: 0
在此示例中，值为 0，这不是空值。结果，defaultvalue 被赋值为 0，保留了预期的值。
空合并运算符的优点
- 清晰度和意图：空值合并运算符清楚地传达了仅当原始值为 null 或未定义时提供默认值的意图。
- 避免错误：通过区分假值和空值，空值合并运算符有助于避免常见错误和意外行为。
- 简洁性：空值合并运算符提供了一种简洁且可读的方式来处理默认值，减少了对冗长条件语句的需求。
在 typescript 中使用 nullish 合并运算符
typescript 完全支持 nullish 合并运算符，使其可以轻松集成到您的 typescript 项目中。让我们探索一些示例，看看如何有效地使用它。
立即学习“Java免费学习笔记（深入）”；
示例：提供默认值
空合并运算符最常见的用例之一是为函数参数提供默认值。
function greet(name: string | null | undefined, greeting: string = 'hello'): string {
const defaultname = name ?? 'guest';
return `${greeting}, ${defaultname}!`;
}
console.log(greet(null)); // output: hello, guest!
console.log(greet(undefined)); // output: hello, guest!
console.log(greet('alice')); // output: hello, alice!
在此示例中，当 name 参数为 null 或未定义时，greet 函数使用 nullish 合并运算符提供默认名称“guest”。
示例：处理可选属性
空合并运算符对于处理对象中的可选属性也很有用。
interface user {
id: number;
name?: string;
email?: string;
}
const user: user = {
id: 1,
name: null,
};
const displayname = user.name ?? 'anonymous';
const displayemail = user.email ?? 'no email provided';
console.log(`user id: ${user.id}`);
console.log(`display name: ${displayname}`);
console.log(`display email: ${displayemail}`);
在此示例中，用户界面具有可选的名称和电子邮件属性。当这些属性为空或未定义时，空值合并运算符用于为这些属性提供默认值。
使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。
示例：使用数组
空值合并运算符也可用于处理数组中的空值。
const values: (number | null | undefined)[] = [1, null, 3, undefined, 5]; const defaultvalues = values.map(value => value ?? 0); console.log(defaultvalues); // output: [1, 0, 3, 0, 5]
在此示例中，values 数组包含数字、null 和 undefined。空值合并运算符用于将空值替换为 0。
高级用例
空值合并运算符不仅仅适用于简单的默认值。它还可以用于更高级的场景，例如链接多个后备以及与其他运算符组合。
示例：链接多个后备
您可以链接多个空值合并运算符来提供多个后备值。
let value: number | null | undefined = null; let fallback1: number | null | undefined = undefined; let fallback2: number | null | undefined = 42; let result = value ?? fallback1 ?? fallback2 ?? 0; console.log(result); // output: 42
在此示例中，value 和fallback1 为nullish，因此nullish 合并运算符回退到fallback2，即42。
示例：与其他运算符组合
空合并运算符可以与其他运算符（例如三元运算符）结合使用，以创建更复杂的条件表达式。
let value: number | null | undefined = 0; let result = value !== null ? value ?? 10 : 20; console.log(result); // Output: 0
在此示例中，三元运算符用于检查 value 是否不为 null。如果不为 null，则使用空合并运算符提供默认值 10。如果 value 为 null，则结果为 20。
最佳实践
使用空值合并运算符时，遵循最佳实践非常重要，以确保您的代码清晰、可维护且无错误。
- 谨慎使用：虽然空值合并运算符功能强大，但应谨慎使用。过度使用它会使您的代码更难阅读和理解。
- 记录您的意图：使用 nullish 合并运算符时，请考虑添加注释来记录您的意图，尤其是在复杂的表达式中。
- 避免与逻辑 or 混合：将空合并运算符与逻辑 or 运算符混合可能会导致混乱和错误。坚持使用一个运算符来提供默认值。
- 彻底测试：始终彻底测试您的代码，以确保空合并运算符的行为符合预期，尤其是在边缘情况下。
结论
空合并运算符 (??) 是 javascript 和 typescript 开发人员的游戏规则改变者。它提供了一种简洁直观的方法来处理 null 和未定义的值，避免与逻辑 or 运算符相关的常见陷阱。通过使用 nullish 合并运算符，您可以编写更清晰、更易于维护且不易出现错误的代码。
无论您是提供默认值、处理可选属性还是使用数组，空值合并运算符都能满足您的需求。立即将其集成到您的 typescript 项目中并亲自体验其好处。
编码愉快！
