TypeScript: Nullish Coalescing (空值合并) —— ??

看到这篇文章标题的第一眼，是不是有点懵呢？

好吧，可能知道的人一点儿也不懵，但是，不知道的人肯定是懵的！这点，毋庸置疑，比如我自己😂😂

说实话，第一次看到这两个单词 “Nullish Coalescing” 的时候，我是非常懵的，因为第 2 个单词我不认识😂（请原谅我的愚蠢）。

经过查阅资料(翻译)，我认识了这个单词 “coalesce” ,它是个动词，是 “合并，联合” 的意思😄。

所以，这个 “Nullish Coalescing” 整体的意思呢，就是 “空值合并”。

但是，虽然 “空”、“值”、“合”、“并” 这 4 个字我都认识，但是，合在一起后，我就又不认识了😢

于是，我又继续往下看了看，突然，我似乎明白了！

我看到了一个操作符!

没错，就是 ——> ??

好吧，虽然看到了 ?? ，但我还是不明白这个 ?? 到底代表的是什么？

我还是看看官方爸爸的文档吧！

定义

遇到一个新的概念，先看定义！

官方爸爸给出的定义是这样的：

The nullish coalescing operator is another upcoming ECMAScript feature that goes hand-in-hand with optional chaining, and which our team has been involved with championing in TC39.

em…

即将到来的 ECMAScript 的功能？有点小期待呢😄

好吧，这句话没啥用！继续往下看！

You can think of this feature - the ?? operator - as a way to “fall back” to a default value when dealing with null or undefined.

咦咦咦！似乎有点意思哦！继续往下看！

let x = foo ?? bar();

一行代码，而且用到了主角 ?? ，那么，这个神秘的 ?? 到底起什么作用呢？

官方爸爸再次给出了一句话：

this is a new way to say that the value foo will be used when it’s “present”; but when it’s null or undefined, calculate bar() in its place.

看到这里，我恍然大悟！

原来如此！搜噶！

简单来说，在 let x = foo ?? bar(); 中，如果 foo 为 null 或 undefined ,则 x = bar() , 否则 x = foo ;

代码对比

看完了官方的解释，我真是差点笑出猪叫😂

话不多说，来看下代码对比：

• 版本一：

  let x = (foo !== null && foo !== undefined)
      ? foo
      : bar();
  

• 版本二：

  let x = foo ?? bar();
  

简直不要太方便啊！

突然，我想到一个问题，虽然这个 ?? 确实很方便，但是，我以前也可以很方便的实现啊！

比如这样：

let x = foo || bar();

突然，我又给了自己一巴掌，真是傻*！

注意( ?? 真正的好处)

let x = foo || bar();

这行代码虽然看似也解决了 foo 为 null 或 undefined 的这个难题，但是，这行代码其实是一个真正的货真价实的坑货！

存在一种情况，如果 foo = 0

这个时候，简直是 B le 🐶了，0 默认和 false 是相等的，也就是说，这个时候，即便 foo 实际上是有值的(虽然为 0 )，但是，最终的结果依旧会是 x = bar() 。

这简直错到离谱！

但是，很多时候，我们往往会出现这样的思维误区，并且难以发现！

而 ?? 就避免了这样的隐患！

所以，如果你的 TypeScript 版本在 3.7 以上，那么请使用 ?? ,而不是下面的愚蠢形式：⬇️

let x = (foo !== null && foo !== undefined)
    ? foo
    : bar();

如果你的 TypeScript 版本在 3.7 以下，请尽量升到 3.7 以上！