Nullish Coalescing (??)：处理 null 或 undefined 的默认值 (ES2020+)

引言

嘿，大家好！今天我们要聊一聊 JavaScript 中一个非常实用的新特性——Nullish Coalescing Operator (??)。这个操作符在 ES2020 中引入，专门用来处理 null 和 undefined 的默认值问题。它不仅让代码更加简洁，还能避免一些常见的坑。接下来，我们就一起深入探讨一下这个新玩具吧！

为什么需要 Nullish Coalescing？

在 JavaScript 中，我们经常会遇到这样的场景：某个变量可能是 null、undefined，或者是其他“空值”，比如 0、''（空字符串）、false 等。以前，我们通常会使用逻辑或运算符 (||) 来给这些变量设置默认值，比如：

let user = null;
let name = user || 'Guest';
console.log(name); // 输出: 'Guest'

看起来没问题对吧？但这里有个小陷阱！|| 操作符不仅仅会检查 null 和 undefined，它还会把所有“假值”（falsy values）都视为“无效”，包括 0、''、false 等等。这意味着如果你的变量是 0 或者空字符串，它也会被替换为默认值。

let score = 0;
let finalScore = score || 100;
console.log(finalScore); // 输出: 100

显然，这不是我们想要的结果！0 是一个有效的分数，不应该被替换为 100。那么，怎么才能只处理 null 和 undefined，而不影响其他“假值”呢？这就是 Nullish Coalescing Operator (??) 的用武之地了！

Nullish Coalescing Operator (??) 到底是什么？

?? 操作符的作用非常简单：它只会检查变量是否为 null 或 undefined，如果是，则返回右边的默认值；如果不是，则保留原来的值。它不会把其他“假值”（如 0、''、false）视为无效。

来看个例子：

let user = null;
let name = user ?? 'Guest';
console.log(name); // 输出: 'Guest'

let score = 0;
let finalScore = score ?? 100;
console.log(finalScore); // 输出: 0

在这个例子中，name 是 null，所以它会被替换为 'Guest'；而 score 是 0，所以它不会被替换为 100。完美解决了我们之前遇到的问题！

表格对比：|| vs ??

为了更直观地理解两者的区别，我们可以用一个表格来对比它们的行为：

变量值	`var		‘default’`	var ?? 'default'
null	'default'	'default'
undefined	'default'	'default'
0	'default'	0
''	'default'	''
false	'default'	false
NaN	'default'	NaN

从表中可以看出，|| 会对所有“假值”生效，而 ?? 只对 null 和 undefined 生效。

实战应用

1. 处理 API 返回的空值

假设你正在调用一个 API，API 返回的数据中可能包含 null 或 undefined，而你希望为这些空值提供默认值。使用 ?? 可以让你轻松实现这一点：

async function fetchUserData() {
  const response = await fetch('/api/user');
  const data = await response.json();

  const username = data.username ?? 'Anonymous';
  const age = data.age ?? 18;

  console.log(`User: ${username}, Age: ${age}`);
}

在这个例子中，如果 data.username 是 null 或 undefined，则会显示 'Anonymous'；如果 data.age 是 null 或 undefined，则会显示 18。

2. 避免不必要的默认值覆盖

有时候，我们可能会遇到这种情况：某些配置项允许用户输入 0 或空字符串，但我们又不想把这些值替换为默认值。?? 就能很好地解决这个问题：

function configureSettings(settings) {
  const volume = settings.volume ?? 50;  // 如果用户没有设置音量，默认为 50
  const theme = settings.theme ?? 'light';  // 如果用户没有设置主题，默认为 'light'

  console.log(`Volume: ${volume}, Theme: ${theme}`);
}

// 用户设置了音量为 0
configureSettings({ volume: 0 });  // 输出: Volume: 0, Theme: light

// 用户没有设置主题
configureSettings({});  // 输出: Volume: 50, Theme: light

3. 嵌套对象的默认值处理

在处理嵌套对象时，?? 也可以帮助我们避免不必要的错误。假设我们有一个嵌套的对象结构，某些属性可能不存在：

const user = {
  profile: {
    name: 'Alice',
    address: null,
  },
};

// 使用 ?? 处理嵌套对象中的 null 或 undefined
const street = user.profile.address?.street ?? 'No address provided';
console.log(street);  // 输出: 'No address provided'

在这个例子中，user.profile.address 是 null，所以我们使用 ?? 提供了一个默认值 'No address provided'。同时，我们还使用了可选链操作符 (?.) 来安全地访问嵌套属性，避免抛出错误。

性能与兼容性

性能

?? 操作符的性能非常好，因为它只是一个简单的二元操作符，不会引入额外的复杂性。实际上，它的性能与 || 操作符相当，甚至在某些情况下更快，因为 ?? 只检查 null 和 undefined，而不需要处理其他“假值”。

兼容性

?? 操作符是在 ES2020 中引入的，因此它在现代浏览器和 Node.js 环境中都得到了广泛支持。如果你需要支持较旧的环境（如 IE 或旧版本的 Node.js），你可以使用 Babel 等工具将其转换为兼容的代码。

结语

好了，今天的讲座就到这里啦！通过 ?? 操作符，我们可以更精确地处理 null 和 undefined，而不会误伤其他“假值”。这不仅让代码更加简洁，还能避免一些潜在的 bug。希望大家在日常开发中多多使用这个新特性，写出更优雅的代码！

如果你还有任何问题，或者想了解更多关于 JavaScript 的新特性，欢迎随时提问哦！下次见！