如何優雅判斷屬性值爲空

想必相似的 Bug 你們確定碰見過

這是由於咱們嘗試從 undefined 或者 null 中取出數據。

解決這種問題其實很簡單，假如咱們有以下對象：

const a = {
  b: {
    c: 1
  }
}
複製代碼

假設咱們如今須要取出 a.b.c，可是並不清楚它們是否都存在，那麼代碼會寫成這樣：

if (a && a.b) {
  const c = a.b.c
}
複製代碼

其實這樣的代碼在項目中出現的頻率是很高的，若是須要取的值層級過深的話，代碼也會寫的很噁心，那麼咱們是否能夠優雅的來解決這個呢？

解決辦法確定是有的啦，就是使用新語法可選鏈。

不過這個語法當下尚未正式發佈，可是咱們能夠經過安裝 Babel 插件去使用它。

npm install --save-dev @babel/plugin-proposal-optional-chaining
複製代碼

安裝完畢後修改下 Babel 配置文件便可。

{
   "plugins": ["@babel/plugin-syntax-optional-chaining"]
}
複製代碼

接下來咱們就可使用可選鏈將上述的代碼改形成這樣：

const c = a?.b?.c
複製代碼

Babel 會將代碼編譯成這樣：

const c = a === null || a === null ? undefined : a.b === null || a.b === undefined ? undefined : a.b.c
複製代碼

雖然編譯後的代碼看着有點囉嗦，可是確實很優雅的簡單了判空的寫法。

不過可選鏈在某些場景下仍是存在坑的，好比說：

const a = {
  b: {
    c: false
  }
}
複製代碼

假如說咱們但願在取值 a.b.c 中給 c 設置一個默認值 true

// true
const c = a?.b?.c || true
複製代碼

可是在這個場景下就會出現 Bug，預期值是 false，結果答案爲 true。

解決這個問題也很簡單，再引入一個新語法雙問號便可。這個語法的做用和 || 是相似的，可是隻有當取值爲 null 或者 undefined 時纔會使用默認值。

// false
const c = a?.b?.c ?? true
複製代碼

一樣雙問號也並無正式發佈，可是也是能夠經過 Babel 插件解決問題的，具體的安裝這裏就不過多贅述了。

以上就是本文的內容，說句題外話，感受之後 JS 代碼中會被各類問號所佔據。

最後

雖然題目看着簡單，可是考察的內容仍是多方面的，固然最想說的仍是 fuckJS 了。

以爲內容有幫助能夠關注下個人公衆號 「前端真好玩」咯，按期分享如下主題內容：

• 前端小知識、冷知識
• 原理內容
• 提高工做效率
• 我的成長