这个新的 JavaScript 运算符绝对改变了游戏规则-js教程-PHP中文网

This New JavaScript Operator is an Absolute Game Changer

JavaScript持续进化，不断引入新特性和语法，提升语言的效能和表达力。其中最令人兴奋的改进之一便是空值合并运算符 (??)。此运算符堪称游戏规则改变者，提供了一种简洁直观的处理null和undefined值的方法。本文将深入探讨空值合并运算符，分析其优势，并讲解如何在TypeScript中有效使用它。

空值合并运算符简介

空值合并运算符 (??) 是一种逻辑运算符，当左侧操作数为null或undefined时，返回右侧操作数。这在提供默认值和避免与逻辑或 (||) 运算符相关的常见陷阱方面特别有用。

逻辑或 (||) 运算符的问题

在引入空值合并运算符之前，开发人员经常使用逻辑或 (||) 运算符来提供默认值。然而，这种方法有一个显着缺点：它将虚值 (例如 0, '', 和 false) 等同于 null 或 undefined。

let value = 0;
let defaultValue = value || 10;
console.log(defaultValue); // 输出：10

登录后复制

在上面的例子中，value 为 0，这是一个虚值。因此，defaultValue 被赋值为 10，即使 0 是一个有效数字。这种行为可能导致代码中出现意外结果和错误。

空值合并运算符 (??) 的解决方案

空值合并运算符 (??) 通过仅在左侧操作数为 null 或 undefined 时返回右侧操作数来解决此问题。这使其成为提供默认值的更可靠选择。

let value: number | null | undefined = 0;
let defaultValue = value ?? 10;
console.log(defaultValue); // 输出：0

登录后复制

在这个例子中，value 为 0，它不是空值。因此，defaultValue 被赋值为 0，保留了预期的值。

空值合并运算符的优势

清晰的意图: 空值合并运算符清晰地传达了仅当原始值为 null 或 undefined 时才提供默认值的意图。
避免错误: 通过区分虚值和空值，空值合并运算符有助于避免常见的错误和意外行为。
简洁性: 空值合并运算符提供了一种简洁易读的处理默认值的方法，减少了对冗长条件语句的需求。

在 TypeScript 中使用空值合并运算符

TypeScript 完全支持空值合并运算符，使其易于集成到您的 TypeScript 项目中。让我们来看一些例子，看看它如何有效地使用。

示例：提供默认值

空值合并运算符最常见的用例之一是为函数参数提供默认值。

function greet(name: string | null | undefined, greeting: string = 'Hello'): string {
  const defaultName = name ?? 'Guest';
  return `${greeting}, ${defaultName}!`;
}

console.log(greet(null)); // 输出：Hello, Guest!
console.log(greet(undefined)); // 输出：Hello, Guest!
console.log(greet('Alice')); // 输出：Hello, Alice!

登录后复制

在这个例子中，greet 函数使用空值合并运算符，当 name 参数为 null 或 undefined 时提供默认名称 'Guest'。

示例：处理可选属性

空值合并运算符也可用于处理对象中的可选属性。

let value = 0;
let defaultValue = value || 10;
console.log(defaultValue); // 输出：10

登录后复制

在这个例子中，User 接口具有可选的 name 和 email 属性。空值合并运算符用于在这些属性为 null 或 undefined 时提供默认值。

示例：使用数组

空值合并运算符也可用于处理数组中的空值。

let value: number | null | undefined = 0;
let defaultValue = value ?? 10;
console.log(defaultValue); // 输出：0

登录后复制

在这个例子中，values 数组包含数字、null 和 undefined。空值合并运算符用于将空值替换为 0。

高级用例

空值合并运算符不仅仅用于简单的默认值。它还可用于更高级的场景，例如链接多个回退值和与其他运算符组合。

示例：链接多个回退值

您可以链接多个空值合并运算符来提供多个回退值。

function greet(name: string | null | undefined, greeting: string = 'Hello'): string {
  const defaultName = name ?? 'Guest';
  return `${greeting}, ${defaultName}!`;
}

console.log(greet(null)); // 输出：Hello, Guest!
console.log(greet(undefined)); // 输出：Hello, Guest!
console.log(greet('Alice')); // 输出：Hello, Alice!

登录后复制

在这个例子中，value 和 fallback1 是空值，因此空值合并运算符回退到 fallback2，其值为 42。

示例：与其他运算符组合

空值合并运算符可以与其他运算符（例如三元运算符）组合，以创建更复杂的条件表达式。

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}`);

登录后复制

在这个例子中，三元运算符用于检查 value 是否不为 null。如果它不为 null，则空值合并运算符用于提供默认值 10。如果 value 为 null，则结果为 20。

最佳实践

使用空值合并运算符时，务必遵循最佳实践，以确保您的代码清晰、易于维护且无错误。

谨慎使用: 虽然空值合并运算符功能强大，但应谨慎使用。过度使用它可能会使您的代码难以阅读和理解。
记录您的意图: 使用空值合并运算符时，请考虑添加注释以记录您的意图，尤其是在复杂的表达式中。
避免与逻辑或混合: 将空值合并运算符与逻辑或运算符混合可能会导致混淆和错误。坚持使用一个运算符来提供默认值。
彻底测试: 始终彻底测试您的代码，以确保空值合并运算符按预期工作，尤其是在极端情况下。

结论

空值合并运算符 (??) 对于 JavaScript 和 TypeScript 开发人员来说是一个改变游戏规则的特性。它提供了一种简洁直观的处理 null 和 undefined 值的方法，避免了与逻辑或运算符相关的常见陷阱。通过使用空值合并运算符，您可以编写更清晰、更易于维护且不易出错的代码。

无论您是提供默认值、处理可选属性还是使用数组，空值合并运算符都能满足您的需求。立即将其集成到您的 TypeScript 项目中，并亲身体验其优势。

祝您编码愉快！

以上是这个新的 JavaScript 运算符绝对改变了游戏规则的详细内容。更多信息请关注PHP中文网其他相关文章！