这个新的 JavaScript 运算符绝对改变了游戏规则

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，保留了预期的值。

空合并运算符的优点

1. 清晰度和意图：空值合并运算符清楚地传达了仅当原始值为 null 或未定义时提供默认值的意图。
2. 避免错误：通过区分假值和空值，空值合并运算符有助于避免常见错误和意外行为。
3. 简洁性：空值合并运算符提供了一种简洁且可读的方式来处理默认值，减少了对冗长条件语句的需求。

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

在此示例中，用户界面具有可选的名称和电子邮件属性。当这些属性为空或未定义时，空值合并运算符用于为这些属性提供默认值。

示例：使用数组

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

图改改

在线修改图片文字

455

查看详情

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。

最佳实践

使用空值合并运算符时，遵循最佳实践非常重要，以确保您的代码清晰、可维护且无错误。

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

结论

空合并运算符 (??) 是 javascript 和 typescript 开发人员的游戏规则改变者。它提供了一种简洁直观的方法来处理 null 和未定义的值，避免与逻辑 or 运算符相关的常见陷阱。通过使用 nullish 合并运算符，您可以编写更清晰、更易于维护且不易出现错误的代码。

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

编码愉快！

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