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

• 原文地址：How to conditionally build an object in JavaScript with ES6
• 原文做者：Knut Melvær
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：ssshooter
• 校對者：kezhenxu94, Park-ma

在不一樣來源之間移動用戶生成的數據，一般須要檢查特定字段是否具備值，基於這些數據構建輸出。這篇文章將會教你如何使用 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。