嘿！您是否曾因尝试处理 JavaScript 代码中的 null 或未定义值而感到沮丧？空合并是一项新功能，可以使这一切变得更加容易。在这篇文章中，我们将解释无效合并。 这意味着简单的术语、有趣的示例，并且没有复杂的术语。到最后，您很快就会编写出干净、简洁的 JS 代码。 那么空合并到底是什么？基本上，这是一种在某些内容为 null 或未定义时提供默认值的简短方法。您可以使用双问号运算符 (??) 来合并为默认值，而不是使用混乱的嵌套三元组或逻辑 OR 语句。 听起来很混乱？别担心，我们将通过一些易于理解的示例向您展示它是如何工作的。系好安全带，这将是一次有趣的旅程！ 空合并运算符到底是什么？ 您是否曾在 JavaScript 中处理空值时陷入困境？我知道我有。好吧，我的朋友，让我向您介绍空值合并运算符 (??)。这个小家伙会让你的生活变得更加轻松。 那么空值合并运算符到底是什么？基本上，这是当某些内容可能为空或未定义时提供默认值的快捷方式。而不是写：   let name = obj.name || 'default name'; 你现在可以简单地写：   let name = obj.name ?? 'default name'; 这 ？？如果左侧不为 null（即 null 或未定义），则运算符将返回左侧，否则将返回右侧。因此，在上面的示例中，如果 不为 null 或未定义，则 name 将设置为  。但如果 为 null 或未定义，则 name 将为“默认名称”。 obj.name obj.name obj.name 非常方便，对吧？其他一些例子：   let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25 let email = user.email ?? 'no email provided'; let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array 我希望这有助于简化 JavaScript 中的一些条件逻辑。 我们都可以联想到的现实世界的例子 您是否曾经去付过某样东西，却发现自己少了几块钱？我们都去过那里。空合并就像在你的口袋里找到一些额外的美元，这样你就可以真正买得起你想买的东西。 假设您前往您最喜欢的咖啡店享用早晨常见的咖啡。你手里拿着 3 美元走到柜台前，准备点餐。但当咖啡师告诉您总金额时，税后金额为 3.50 美元。 就像突然想起你口袋里还有一美元，所以你仍然可以喝咖啡。唷！ 空合并 在 JavaScript 中，  是一种提供默认值的方法，以防某些内容解析为 null 或未定义。例如，假设您有一个可能返回值也可能不返回值的函数： nullish 合并   function getCoffeePrice() { // Returns $3.50 or undefined } let price = getCoffeePrice() ?? '$3.50'; 在这里，如果 返回未定义，由于  ，默认情况下 将为 无效合并运算符。因此，无论哪种方式，您都可以保证为您的咖啡定价。 getCoffeePrice() ?? price '$3.50' 空合并通过在变量为空或未定义时提供后备默认值，使您的代码更具弹性。就像在咖啡店里在口袋里找到多余的美元一样，它可以确保您拥有完成交易所需的东西。非常方便，对吧？ 现在您可以高枕无忧了，因为您知道自己像专业人士一样了解无效合并。快乐编码并享受咖啡！ 在 JavaScript 中使用 Nullish 合并 如果空值合并运算符 (??) 不为空值，则返回其左操作数；否则，它返回其正确的操作数。 使困惑？让我们来分解一下。 “空”值要么为空，要么为未定义。那么 运算符检查左侧值是否为空，如果是，则返回右侧值。 ?? 例如：   const name = bob ?? 'anonymous'; 如果定义了 bob，这会将 name 的值分配给“bob”。如果 bob 未定义或为 null，它将分配字符串“anonymous”。 为什么这有用？ 没有？？运算符，你必须这样做：   const name = bob !== null && bob !== undefined ? bob : 'anonymous'; 这 ？？运算符为我们提供了更短、更清晰的语法，本质上可以做同样的事情。 它可以在 JavaScript 中的任何地方使用 - 在 、  、对象属性等中。通常使用 || 的任何地方。 (或) 运算符作为默认值，您现在可以使用 ??为“空”默认值。 变量 函数参数 几个例子：   const foo = null ?? 'default string'; // foo is 'default string' const bar = 0 ?? 42; // bar is 0 const qux = 0 || 42; // qux is 42 - || returns first truthy value function doSomething(x = 0) { x = x ?? 10; // If x is nullish, set default of 10 console.log(x); } doSomething(null); // Prints 10 doSomething(5); // Prints 5 我希望这有助于解释空值合并运算符！ 为什么空合并比 OR (||) 更好 OR (||) 运算符将返回第一个真值。  OR (||) 运算符的工作原理是返回它遇到的第一个真值。如果两个值都是假的，它将返回最后一个值。例如：   let name = null; let user = name || 'John'; // user is 'John' 在这里，  为 null（假），因此 获取第二个值“John”。 name user 空合并运算符 (??) 更聪明。 空合并运算符 (??) 在 ES2020 中引入，比 OR (||) 更聪明。它将返回第一个定义的值（不是空/未定义）。因此，如果第一个值是空字符串、0 或 false，它将返回该值。例如：   let name = ''; let user = name ?? 'John'; // user is '' 这里，  是一个空字符串，因此 获取  （第一个定义的值）。 name user name  Nullish Coalescing Operator 允许我们以更简洁的方式提供默认值。我们可以为 null/未定义值设置默认值，而不必担心 0、空字符串、false 等错误值。 例如，假设我们有一个返回用户年龄的函数，但有时年龄为空：   function getAge() { return age; // could be null } let userAge = getAge() || 30; // Uses OR, not ideal 此处，如果 为0、''或false，则 将错误地为30。 age userAge 使用 Nullish Coalescing Operator 可以解决此问题：   let userAge = getAge() ?? 30; // Uses ?? 现在，如果 为 null 或未定义，则 只会为 30。将使用任何其他虚假值（例如 0）。 age userAge 总之，当您想要为 null/undefined 提供默认值，而不是为 0、空字符串或 false 等虚假值提供默认值时，请使用 Nullish Coalescing Operator (??) 而不是 OR (||)。 您的代码将更加干净并且不易出现错误！ 关于空合并的常见问题 您已经听说过 JavaScript 中这个奇特的新 Nullish Coalescing 运算符 (??) 并有一些疑问。不用担心，我已经帮你解决了！ 空值合并适用于哪些数据类型？  Nullish 合并适用于 JavaScript 中的任何数据类型，包括： 数字： 0 ?? 1 // 返回 1 字符串： '' ?? '你好' // 返回'你好' 布尔值：假？？ true // 返回 true 对象：{} ?? {name: 'John'} // 返回 {name: 'John'} 数组：[] ?? [1, 2, 3] // 返回 [1, 2, 3] 和更多！  || 有什么区别（或）和？ （空合并）运算符？  ||如果左操作数为假（假、0、空字符串、null、未定义、NaN），(OR) 运算符将返回右操作数。 这 ？？如果左操作数为空或未定义，（空合并）运算符将仅返回右操作数。 所以关键的区别是？认为 0 和空字符串是有效值，而 ||才不是。 我应该什么时候使用？结束||？ 使用 当您想要为 null 或 undefined 提供默认值，但将 0 和空字符串视为有效值时。 ?? 使用||当您想为任何“虚假”值提供后备时。 希望这有助于解决您对 Nullish Coalescing 运算符的一些紧迫问题！如果您还有其他问题，请告诉我。 结论 现在您已经了解了 nullish 合并及其在 JavaScript 中的工作原理。很简单，对吧？这个小运算符可以通过以简洁的方式提供默认值来节省您的时间并使您的代码更清晰。 所以，继续前进，将无效的价值观融合到你心中的内容中吧！您已顺利掌握现代 JavaScript 功能。 快乐编码！

Proof of Work - Portfolio

Read My Stories

Buy Me a Coffee

Portfolio

該音頻是用故事的原始語言製作的！

适合普通人的空合并（JS 语言）教程

About Author

註釋

標籤

这篇文章刊登在

Related Stories

如何将您的工作流程提高 10 倍：17 个必备应用程序

Telegram：加密岛通往大陆的桥梁

加密货币增长：创建有效的用户角色

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

如何将您的工作流程提高 10 倍：17 个必备应用程序

Telegram：加密岛通往大陆的桥梁

加密货币增长：创建有效的用户角色

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps