脚本宝典收集整理的这篇文章主要介绍了如何使用ES6在JavaScript中有条件地构建对象，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

如何使用ES6在JavaScript中有条件地构建对象

return{ "sersion":"https://www.js-code.COM", ...(tITle && {title:suBTitle ? '${title} ${subtitle}': title}), ...(home_page_url &&{home_page_url}), categories:[ Primary ? PRimary :'', secondary ? secondary :'', tertiary ? tertiary :'' ].filter(notFalse => notFalse), }  

在源之间移动用户生成的数据通常需要您检查字段是否具有值。然后基于此构建输出。这就是你如何使用JavaScript中的一些ES6功能来更简洁地完成它。

自从Sanity.io（我工作的地方）赞助了Syntax以来，我一直在修补CLI，ExPress和无服务器功能中的播客的RSS-feeds 。这涉及解析和构造具有大量字段和信息的复杂对象。由于您处理来自不同来源的用户生成的数据，因此无法保证字段始终填充。某些字段也是可选的。并且您不希望输出RSS XML或JSON FEED中没有值的标记。

之前我会通过在这样的对象上应用新键来解决这个问题：

function  episodeParser（data）{
  const { id，
   标题，
   描述，
   optionalField，
   anotherOptionalField
  } =数据
  const  parsedEpisode  = {guid ： id，title，summary ： description}
  if（optionalField）{
    parsedEpisode。optionalField  = optionalField
  } else  if（anotherOptionalField）{
    parsedEpisode。anotherOptionalField  = anotherOptionalField
  }
  //等等
  return parsedEpisode
}

 

这不是很顺利（但它有效），如果你有很多字段，你很快会得到很多if-陈述。我也可以通过循环对象键等来做好事。这意味着代码更复杂，并且您无法很好地理解数据对象是什么。

再一次，ES6中的新语法得以拯救。我找到了一个模式，我可以将代码重写为以下内容：

function  episodeParser（{
  ID， 
  标题， 
  description =  '没有摘要'，
  optionalField， 
  anotherOptionalField
}）{
  返回 {
    guid ： id，
    标题，
    摘要：描述，
    ...（optionalField && {optionalField}），
    ...（anotherOptionalField && {anotherOptionalField}）
  }
}

此功能有几个功能。第一个是参数对象解构，如果你想在函数中处理大量的参数，这是一个很好的模式。而不是这种模式：

function episodeParser（data）{ 
  const id = data.id 
  const title = data.title 
  //等等...... 
}

你写：

function（{id，title}）{ 
  //等等...... 
}

 

这也是避免在函数中包含多个多个参数的好方法。还要注意description = ‘No summary’对象解构的一部分。这就是我们所说的参数默认值。这意味着如果description未定义，则将字符串定义No summary为后备。

第二个是三点扩散语法（...）。如果条件为true-ish（这就是它的用途），它用于“解包”对象&&：

{ 
  id：'some-id'，
  ...（true && {optionalField：'something'}）
}
// 是相同的
{ 
  id：'some-id'，
  optionalField：'someting' 
}

你最终得到的是一个简洁的简洁功能，也很容易测试。使用&&运算符的一个重要警告是将考虑数字0 false。所以你必须注意你的数据类型。

如果我们将该功能付诸行动，它将看起来像这样：

const  data  = {
  id ： 1，
  标题： '一集'，
  描述： '一集摘要'，
  anotherOptionalField ： ' some data ' 
}
episodeParser（数据）
// > {guid：1，标题：'一集'，摘要：'一集剧集'，另一个备选字段：'一些数据'}

希望这篇文章很有帮助！如果你喜欢它，请给我一些鼓掌，让更多的人看到它。谢谢！

觉得可用，就经常来吧！es6教程 脚本宝典 欢迎评论哦！巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的如何使用ES6在JavaScript中有条件地构建对象全部内容，希望文章能够帮你解决如何使用ES6在JavaScript中有条件地构建对象所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。