如何使用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教程 脚本宝典 欢迎评论哦!巧夺天工,精雕玉琢。小宝典献丑了!