JavaScript空值合併運算符

翻譯：瘋狂的技術宅

做者：Chris on Code

原文：https://scotch.io/tutorials/j...

未經容許嚴禁轉載

今年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 的空值合併運算符的妙處在於，咱們能夠根據須要將其進行屢次連接。

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

若是不肯定某些值是否存在，上面是設置默認值的好方法。

空合併運算符與邏輯或（||）

若是要消除虛值，能夠用 邏輯或運算符 （||）。

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

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

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

若是你不想用要虛值，可使用 ||。若是隻想檢查是否爲 null 或 undefined，就用 ??。

瀏覽器支持

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

總結

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

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...