詳解JavaScript的空值合併運算子（??）

本篇文章帶大家來了解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: &#39;chris&#39; }       // { name: &#39;chris&#39; }

const isActive = false

isActive ?? true             // false

連結JavaScript 的空值合併運算子

JavaScript 的空值合併運算子的妙處在於，我們可以根據需要將其進行多次連結。

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

如果不確定某些值是否存在，上面是設定預設值的好方法。

空合併運算子與邏輯或（<span style="font-size: 18px;">||</span>#）

##如果要消除虛值，可以用

邏輯或運算子 （||）。

本質上，它與空合併運算子的作用相同，只是它消除了虛值。

空值合併運算子將跳過
• null，undefined
邏輯或運算子會跳過
• null，undefined，false

false ?? 'hello'    // false
false || 'hello'    // 'hola'

如果你不想使用要虛值，可以使用

||。如果只想檢查是否為 null 或 undefined#，就用 ??。

瀏覽器支援

在撰寫本文時，最新版本的 Chrome、Firefox、Edge 和 Safari 可以使用空值合併運算子。

總結

空值合併運算子是該 JavaScript 語言不錯的補充。擁有更多檢查值的選擇並沒有什麼壞處。

英文原文網址：https://scotch.io/tutorials/javascripts-null-coalescing-operator

作者：Chris on Code

#譯文地址： https://segmentfault.com/a/1190000023577464

更多程式相關知識，請造訪：

程式設計入門！ ！

以上是詳解JavaScript的空值合併運算子（??）的詳細內容。更多資訊請關注PHP中文網其他相關文章！