Coding Hero

We solve your problems

ES6 Optional Chaining 實戰

2019-10-13 Frankjavascript

type-error.jpg

本篇要介紹的是如何在現行使用 babel 轉譯 ES6 語法的專案中使用 TC39 的提案 feature - optional chaining。

What is optional chaining?


Optional chaining 是一個來自 TC39 javascript 新語言特性的提案,目前來到 Stage 3。

註一:Optional chaining 的提案進度與說明可以參照 Github 的連結
註二:什麼是 TC39
註三:在 proposal 階段的東西穩嗎?回答是:大膽用吧!基本上到了 Stage 3 相信已是勢在必行,我們公司的 production code 都已經在用了,而且 babel 會幫忙轉譯,免驚!😄

相信寫過 javascript 的人對於文章的 cover 圖片所傳遞的訊息一定都不陌生,在 javascript 的世界裡,遇到巢狀的物件要逐一檢查是否為空實在是非常痛苦的一件事情。

Optional chaining 這件概念源自於 iOS 的 Swift,將物件的型別指定為 optional,意思是「可為空值」,對於型別的檢查與預防程式 crash 有相當大的幫助,可以大致參照一下 此文章

在 javascript 的世界裡導入 optional chaining 有兩個最大的好處:

  • 不再需要做巢狀式的型別檢查,統一檢查一次即可
  • 若 optional chaining 最後連結的是 funcion call,在中間的型別檢查遇到空值,該段程式碼不會被執行,而不是像之前會直接 crash 掉

Optional Chaining Operator in JavaScript

↑ 這個 YouTuber 時常講解 javascipt 的實用觀念,內容也十分有趣,可以點擊參考,此篇介紹的就是 optional chaining

提供一段簡單的範例,讓你看看 optional chaining 寫起來爽度有多高!

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // detailed address is unknown
  }
}

let customerCity = customer.details?.address?.city

// … this also works with optional chaining function call
let duration = vacations.trip?.getTime?.()

以上的 customerCityduration 都是成立的,若中間有空值,例如 details 後面就沒有 address 的話,customerCityundefined 而不是直接 crash 掉,duration 也是,若 getTimeundefined,則這樣的 function call 也是安全的,不會 crash。

在 React 裡面,判斷是否資料存在,若存在才 render 的情境,程式碼也可以大幅簡化。示意範例如下:

// 沒有optional chaining的情形
const foo = ({ customer }) => {
  return (
    <div>
      {customer && customer.basicInfo && customer.basicInfo.address && (
        <DeliveryAddress>{customer.basicInfo.address}</DeliveryAddress>
      )}
    </div>
  )
}

而有了 optional chaining 之後,可以寫成這樣:

// 有optional chaining的情形
const foo = ({ customer }) => {
  // DeliveryAddress裡,大括弧內的customer.basicInfo.address
  // 不需要再用問號連接
  // 因為在前面的customer?.basicInfo?.address
  // 判斷要確定有值才會render後面的東西
  return (
    <div>
      {customer?.basicInfo?.address && (
        <DeliveryAddress>{customer.basicInfo.address}</DeliveryAddress>
      )}
    </div>
  )
}



安裝步驟


我們要讓專案可以使用這個新特性,要處理兩件事情:

  • 讓 babel 會轉譯問號
  • 讓 formatter 可以認得問號

首先安裝套件

$ npm i @babel/plugin-proposal-optional-chaining --save-dev

接著在.babelrc 加入以下設定

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

完成上述動作,就可以在專案裡盡情使用 optional chaining。

Happy coding!

附上 Babel optional chaining plugin 的 Github