[譯] 如何使用 JavaScript ES6 有條件地構造物件

ssshooter發表於2018-10-03
JavaScript物件

[譯] 如何使用 JavaScript ES6 有條件地構造物件

在不同來源之間移動使用者生成的資料，通常需要檢查特定欄位是否具有值，基於這些資料構建輸出。這篇文章將會教你如何使用 JavaScript ES6 特性更簡潔地完成這件事。

自 Sanity.io（我工作的地方）贊助 Syntax 以來，我一直在 CLIs 和 Express, and Serverless functions 處理播客 RSS-feeds。這包含處理和構建包含大量欄位和資訊的複雜物件。因為處理的資料來源各不相同，所以很難保證所有欄位都被填充。還有一些欄位是選填的，但你不希望在 RSS XML 或 JSON FEED 輸出沒有值的標籤。

之前我會通過在物件上新增新的鍵來解決這個問題：

function episodeParser(data) {
  const { id, 
   title,
   description,
   optionalField,
   anotherOptionalField
  } = data
  const parsedEpisode = { guid: id, title, summary: description }
  if (optionalField) {
    parsedEpisode.optionalField = optionalField
  } else if (anotherOptionalField) {
    parsedEpisode.anotherOptionalField = anotherOptionalField
  }
  // and so on
  return parsedEpisode
}
複製程式碼

這不夠優雅（但它確實有效），如果有大量可選欄位，你就必須寫很多 if- 語句。我也曾通過迴圈物件 key 處理這個問題，但這麼做程式碼會更復雜，並且讓人難以直觀地看懂這個物件。

這時候，ES6 新語法又來救場啦。我發現可以將程式碼重寫為以下模式：

function episodeParser({
  id, 
  title, 
  description = 'No summary', 
  optionalField, 
  anotherOptionalField
}) {
  return {
    guid: id,
    title,
    summary: description,
    ...(optionalField && {optionalField}),
    ...(anotherOptionalField && {anotherOptionalField})
  }
}
複製程式碼

這個函式使用了兩個 ES6 新特性。第一個是引數物件解構，如果你需要在函式中處理大量的引數，這是一個很好的模式。可以取代這種寫法：

function episodeParser(data) {
  const id = data.id
  const title = data.title
  // and so on...
}
複製程式碼

改寫為：

function({id, title}) {
  // and so on...
}
複製程式碼

這也是避免函式引數過多的好方法。還要注意物件解構的 description = 'No summary' 部分，這就是所謂的預設引數。如果 description 未定義，它將被預設定義為字串 No summary。

第二個 ... 是展開語法。如果條件為真（&& 的作用），它將會 “unwrap（解包）”物件：

{
  id: 'some-id',
  ...(true && { optionalField: 'something'})
}

// is the same as

{
  id: 'some-id',
  optionalField: 'someting'
}
複製程式碼

你最終得到的是一個簡潔又易於測試的函式。關於使用 && 運算子有一點需要注意：數字 0 將被視為 false，因此對於某些資料型別需要小心處理。

實際使用此函式，會像這樣：

const data = { 
  id: 1, 
  title: 'An episode', 
  description: 'An episode summary', 
  anotherOptionalField: 'some data' 
}
episodeParser(data)
//> { guid: 1, title: 'An episode', summary: 'An episode summary', anotherOptionalField: 'some data' }
複製程式碼

你可以在我們為 express.js 和 netlify lambdas 實現的播客訂閱中看到實際效果。如果你想親自嘗試 Sanity.io，你可以在 sanity.io/freecodecam… 獲得一個免費的開發者計劃。 ✨

首發於 www.sanity.io。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章