[译] 如何使用 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、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。