JavaScript - 空值合并运算符

你好，有抱负的程序设计师们！今天，我们将深入探讨JavaScript的一个非常有趣的功能，这个功能可以让你的代码更干净、更高效。它被称为“空值合并运算符”，我保证一旦你理解了它的力量，你会和我一样兴奋！

空值合并运算符是什么？

在我们深入了解细节之前，让我们从一个简单的问题开始：你有没有在使用一个值之前检查过它是否为null或undefined？如果你点头了，那么接下来的内容你一定会喜欢！

空值合并运算符（由??表示）是一个逻辑运算符，当其左操作数为null或undefined时，返回其右操作数，否则返回其左操作数。

我知道这可能一开始听起来有点令人困惑，但别担心！我们会通过大量的例子一步步来解释。

语法

空值合并运算符的语法出奇地简单：

leftExpr ?? rightExpr

在这里，leftExpr和rightExpr可以是任何类型的表达式。如果leftExpr是null或undefined，运算符返回rightExpr。否则，它返回leftExpr。

示例

让我们通过一些示例来看看这在实际中是如何工作的。

示例 1：基本使用

let username = null;
let displayName = username ?? "匿名用户";

console.log(displayName); // 输出： "匿名用户"

在这个例子中，username是null，所以空值合并运算符返回"匿名用户"。这就像是在说："如果username有值，就用那个。如果没有，就用'匿名用户'。"

示例 2：与逻辑或运算符的比较

你可能在想："我们不是可以直接使用逻辑或运算符（||）吗？" 好吧，让我们看看区别：

let count = 0;

let result1 = count || 10;
let result2 = count ?? 10;

console.log(result1); // 输出： 10
console.log(result2); // 输出： 0

惊喜！逻辑或运算符将0视为假值并返回10，而空值合并运算符只检查null或undefined，所以它返回0。

示例 3：嵌套空值合并

我们甚至可以链式使用多个空值合并运算符：

let user = {
name: "Alice",
age: null
};

let userAge = user.age ?? user.yearOfBirth ?? "未知";

console.log(userAge); // 输出： "未知"

在这里，我们首先检查user.age是否不是null或undefined。由于它是null，然后我们检查user.yearOfBirth。由于它不存在（undefined），我们最终回退到"未知"。

短路求值

空值合并运算符的一个非常酷的特性是短路求值。这意味着如果左操作数不是null或undefined，右操作数甚至不会被评估！

let x = 5;
let y = x ?? console.log("这不会被打印");

console.log(y); // 输出： 5

在这个例子中，由于x不是null或undefined，右边的console.log()永远不会执行。这对于性能优化非常有帮助！

方法表

下面是一个方便的表格，总结了我们已经覆盖的关键方法和概念：

方法/概念	描述	示例
空值合并运算符 (??)	当左操作数为null或undefined时返回右操作数	let result = null ?? "默认值"
短路求值	如果左操作数不是null或undefined，右操作数不会被评估	let y = 5 ?? expensiveOperation()
链式使用	可以链式使用多个??运算符	let z = a ?? b ?? c ?? "默认值"

结论

就这样，各位！空值合并运算符是JavaScript工具箱中的一个强大工具。它帮助你编写更干净、更具表现力的代码，尤其是在处理可能为null或undefined的值时。

记住，编程就是解决问题，空值合并运算符就像是一把瑞士军刀，用于处理那些讨厌的null和undefined情况。所以勇敢地前进，充满信心地编码！

在我们结束之前，让我分享一个小故事，来自我的教学经验。我曾经有一个学生，他们在处理代码中的null值时遇到了困难。他们到处使用复杂的if-else语句，使得代码难以阅读和维护。当我向他们介绍空值合并运算符时，他们的眼睛亮了起来，就像发现了魔法一样。他们的代码一夜之间变得清晰起来，他们不停地谈论这是如何让他们的生活变得更容易。谁知道呢？也许你也会在编程旅程中有一个类似的"恍然大悟"时刻！

继续练习，保持好奇心，快乐编码！

Credits: Image by storyset