空值合并操作符（Nullish Coalescing）：处理默认值的精确控制

空值合并操作符：别再让你的代码“随便”取默认值啦！

想象一下，你正在烤一个美味的巧克力蛋糕，配方上写着：“加入可可粉，如果没写明用量，就加3汤匙。” 这听起来很合理，对吧？但如果你的厨房里正好有一盒“已经用过的”可可粉，里面只剩下一点点底儿了呢？按照“没写明用量就用默认值”的逻辑，你还是会傻乎乎地用掉这可怜的底儿，而不是直接用那3汤匙。结果呢？蛋糕的味道可能就差强人意了。

在编程世界里，类似的情况也经常发生。我们经常需要给变量设置默认值，以防万一它没有被赋值或者赋值为空。在JavaScript的世界里，过去我们通常会用“||”操作符来处理这种情况，就像这样：

const userAge = user.age || 18; // 如果user.age不存在或者为falsy值，就用18作为默认值

这段代码的意思是：如果user.age存在且不是一个“falsy”值（比如false、0、""、null、undefined、NaN），那么userAge就等于user.age，否则就等于18。

看起来似乎没毛病，但问题就出在这个“falsy”值上。 0岁也是一种年龄啊！如果user.age恰好是0，那么这段代码就会“自作聪明”地认为user.age不存在，然后把userAge设为18。一个原本应该蹒跚学步的小朋友，瞬间就变成了风华正茂的少年，这简直是JavaScript代码界的“返老还童术”！

这就是“||”操作符的局限性：它会把所有“falsy”值都当成不存在，然后一股脑儿地使用默认值。这就像一个过于热心的保姆，什么事情都要替你做主，结果反而让你哭笑不得。

空值合并操作符：更精准的“默认值”选择器

为了解决这个问题，JavaScript引入了一个新的操作符：空值合并操作符 (Nullish Coalescing Operator)，它的符号是??。它只会在左边的值为null或者undefined的时候，才返回右边的值。换句话说，它只关心“空空如也”的情况，对于0、""、false这些“虽然不充实，但起码还存在”的值，它会选择尊重事实，保留它们。

让我们用??来改写上面的代码：

const userAge = user.age ?? 18; // 如果user.age是null或者undefined，才用18作为默认值

现在，如果user.age是0，userAge就会是0，而不是18。小朋友还是小朋友，不会无缘无故地长大。 ??操作符就像一个更理智的保姆，只在你真正需要帮助的时候才会出手，不会过度干预你的生活。

空值合并操作符的应用场景：让你的代码更健壮

那么，在实际开发中，我们可以在哪些地方使用??操作符呢？除了上面提到的处理用户年龄的情况，还有很多地方可以派上用场。

处理函数参数的默认值：

想象一下，你正在编写一个函数，用来计算矩形的面积。这个函数接收两个参数：width和height。如果用户没有传递width或者height，你就需要给它们设置一个默认值。

使用||操作符：
```
function calculateArea(width, height) {
  width = width || 10; // 如果width是falsy值，就用10作为默认值
  height = height || 5; // 如果height是falsy值，就用5作为默认值
  return width * height;
}
```
如果用户传递的width是0，这段代码就会把它当成不存在，然后把width设为10，导致计算结果错误。

使用??操作符：
```
function calculateArea(width, height) {
  width = width ?? 10; // 如果width是null或者undefined，才用10作为默认值
  height = height ?? 5; // 如果height是null或者undefined，才用5作为默认值
  return width * height;
}
```
现在，即使width是0，函数也能正确地计算出面积。
处理配置文件的默认值：

在很多应用程序中，我们都会使用配置文件来存储一些设置，比如数据库连接信息、API密钥等等。如果配置文件中缺少某些设置，我们就需要使用默认值。

使用||操作符：
```
const config = {
  databaseUrl: process.env.DATABASE_URL || "localhost:5432",
  apiKey: process.env.API_KEY || "default_api_key",
};
```
如果process.env.DATABASE_URL的值是一个空字符串""，这段代码就会把它当成不存在，然后使用默认的数据库地址"localhost:5432"。这可能会导致应用程序连接到错误的数据库。

使用??操作符：
```
const config = {
  databaseUrl: process.env.DATABASE_URL ?? "localhost:5432",
  apiKey: process.env.API_KEY ?? "default_api_key",
};
```
现在，即使process.env.DATABASE_URL的值是一个空字符串""，应用程序也会使用这个空字符串作为数据库地址，而不是使用默认值。这可以避免一些潜在的问题。
简化嵌套对象的访问：

在处理嵌套对象时，我们经常需要检查对象的某个属性是否存在，以避免出现TypeError: Cannot read property '...' of undefined错误。

使用传统的&&操作符：
```
const city = user && user.address && user.address.city; // 容易出错
```
这种写法可读性差，如果嵌套层级很深，代码会变得非常冗长。

使用可选链操作符?.和空值合并操作符??：
```
const city = user?.address?.city ?? "Unknown"; // 简洁优雅
```
这段代码首先使用可选链操作符?.来安全地访问嵌套对象的属性，如果任何一个属性不存在，就会返回undefined。然后，使用空值合并操作符??来提供一个默认值"Unknown"，以防city的值是null或者undefined。这种写法更加简洁、优雅，而且不容易出错。

空值合并操作符的注意事项：理智使用，避免踩坑

虽然??操作符非常有用，但在使用时也需要注意一些事项，以避免踩坑。

??操作符不能与||和&&操作符混用：

由于??操作符的优先级较低，如果把它与||或&&操作符混用，可能会导致意想不到的结果。例如：
```
const result = a || b ?? c; // 语法错误
const result = a && b ?? c; // 语法错误
```
为了避免出现问题，建议在使用??操作符时，要么把它单独使用，要么用括号明确指定运算顺序：
```
const result = (a || b) ?? c; // 先计算a || b，再与c进行空值合并
const result = a || (b ?? c); // 先计算b ?? c，再与a进行逻辑或
```
??操作符只关心null和undefined：

记住，??操作符只会在左边的值为null或者undefined的时候，才返回右边的值。对于其他“falsy”值，比如0、""、false，它会选择尊重事实，保留它们。如果你需要处理所有“falsy”值，那么||操作符可能更适合你。

总结：选择合适的工具，让代码更优雅

空值合并操作符??是JavaScript中一个非常有用的新特性，它可以帮助我们更精准地处理默认值，让代码更加健壮、优雅。它就像一个更理智的保姆，只在你真正需要帮助的时候才会出手，不会过度干预你的生活。

当然，??操作符并不是万能的。在选择使用??还是||操作符时，我们需要根据实际情况进行判断，选择最合适的工具。就像选择烤蛋糕的配方一样，选择合适的工具才能做出美味的蛋糕。

希望这篇文章能帮助你更好地理解空值合并操作符，并在实际开发中灵活运用它。记住，写出优雅的代码，就像烤出一个美味的蛋糕一样，需要耐心、技巧和一点点幽默感！ Happy coding!

空值合并操作符：别再让你的代码“随便”取默认值啦！

空值合并操作符：更精准的“默认值”选择器

空值合并操作符的应用场景：让你的代码更健壮

空值合并操作符的注意事项：理智使用，避免踩坑

总结：选择合适的工具，让代码更优雅

发表回复 取消回复

发表回复取消回复