首頁 > web前端 > js教程 > 詳解JavaScript的空值合併運算子(??)

詳解JavaScript的空值合併運算子(??)

青灯夜游
發布: 2020-12-02 18:02:51
轉載
3399 人瀏覽過

本篇文章帶大家來了解JavaScript的空值合併運算子(??)。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

詳解JavaScript的空值合併運算子(??)

今年ECMAScript 2020(ES2020)將會發佈!自 2015 年 ECMAScript 2015(ES6)發布以來,我們每年都會對 JavaScript 語言進行更新。

目錄

  • 使用JavaScript 空值合併運算子
  • 使用實例
  • 空值合併運算子與邏輯或(||
  • 瀏覽器支援
  • #總結

在ES2020中,我們獲得了在其他語言中( 如C# 和PHP)早已可用的功能:空值合併運算子。我一直喜歡這個名字,因為每當我說這個名字時,我都會覺得自己很聰明。 

空白值合併運算子將會遍歷列表,並傳回第一個不是  null  或  undefined 的值。

重要的是要注意,空值合併運算子只尋找 nullnull 值。空值合併運算子接受虛值(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 ?? &#39;hello&#39;     // false
null ?? &#39;&#39; ?? &#39;hello&#39;                     // &#39;&#39;
登入後複製

使用實例

可以從外部來源取得資料時使用。例如我們想從多個地方抓取部落格的文章。然後可以確定哪一篇文章將會成為我們的精選貼文:

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

const featuredBlogPost = firstBlogPost ?? secondBlogPost ?? defaultBlogPost
登入後複製

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

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

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

邏輯或運算子||)。

本質上,它與空合併運算子的作用相同,只是它消除了虛值。
    空值合併運算子將跳過
  • nullundefined
  • 邏輯或運算子會跳過
  • nullundefinedfalse
  • false ?? &#39;hello&#39;    // false
    false || &#39;hello&#39;    // &#39;hola&#39;
    登入後複製
    如果你不想使用要虛值,可以使用

    ||。如果只想檢查是否為 nullundefined#,就用 ??

    瀏覽器支援

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

    詳解JavaScript的空值合併運算子(??)

    總結

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

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

    作者:Chris on Code

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

    更多程式相關知識,請造訪:

    程式設計入門! !

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

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板