详解JavaScript的空值合并运算符（??）-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章带大家了解一下JavaScript的空值合并运算符（??）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

今年ECMAScript 2020（ES2020）将发布！自 2015 年 ECMAScript 2015（ES6）发布以来，我们每年都对 JavaScript 语言进行更新。

使用 JavaScript 空值合并运算符
使用实例
空值合并运算符与逻辑或（||）
浏览器支持
总结

在ES2020中，我们获得了在其他语言中（如 C# 和 PHP）早已可用的功能：空值合并运算符。我一直喜欢这个名字，因为每当我说这个名字时，都会觉得自己很聪明。

空值合并运算符将会遍历列表，并返回第一个不是 null 或 undefined 的值。

重要的是要注意，空值合并运算符仅查找 null 或 null 值。空值合并运算符接受虚值（Falsy values）。

使用 JavaScript 空值合并运算符（??）

让我们看一些例子。请记住，JavaScript 的空值合并运算符将遵循 ?? 链，直到找到非空或未定义的对象。如果找到 false，它将返回该值。

null      ?? 'hi'       // 'hi'
undefined ?? 'hey'      // 'hey'
 
false     ?? 'hola'     // false
0         ?? 'bonjour'  // 0
'first'   ?? 'second'   // first

在下面的例子中，我们在变量中存储了一些值：

let person  // <-- person is undefined here
 
person ?? { name: 'chris' }       // { name: 'chris' }
 
const isActive = false
 
isActive ?? true             // false

链接 JavaScript 的空值合并运算符

JavaScript 的空值合并运算符的妙处在于，我们可以根据需要将其进行多次链接。

1 2	`null` `?? undefined ??` `false` `??` `'hello'` `// false` `null` `??` `''` `??` `'hello'` `// ''`

使用实例

可以在从外部来源获取数据时使用。比如我们想从多个地方抓取博客的文章。然后可以确定哪个文章将会成为我们的精选帖子：

// 简化代码。 使用 fetch requires 需要比这更多的代码
const firstBlogPost = await fetch('...')
const secondBlogPost = await fetch('...')
const defaultBlogPost = { title: 'Default Featured Post' }
 
const featuredBlogPost = firstBlogPost ?? secondBlogPost ?? defaultBlogPost

如果不确定某些值是否存在，上面是设置默认值的好方法。