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}`);
登录后复制
在此示例中，用户界面具有可选的名称和电子邮件属性。当这些属性为空或未定义时，空值合并运算符用于为这些属性提供默认值。
示例：使用数组
空值合并运算符也可用于处理数组中的空值。
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 项目中并亲自体验其好处。
编码愉快！
以上就是这个新的 JavaScript 运算符绝对改变了游戏规则的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2642103.html
