[译] 如何使用 JavaScript ES6 有条件地构造对象
栏目: JavaScript · 发布时间: 6年前
内容简介:在不同来源之间移动用户生成的数据,通常需要检查特定字段是否具有值,基于这些数据构建输出。这篇文章将会教你如何使用 JavaScript ES6 特性更简洁地完成这件事。自Sanity.io(我工作的地方)赞助Syntax 以来,我一直在之前我会通过在对象上添加新的键来解决这个问题:
在不同来源之间移动用户生成的数据,通常需要检查特定字段是否具有值,基于这些数据构建输出。这篇文章将会教你如何使用 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… 获得一个免费的开发者计划。 :sparkles:
首发于 www.sanity.io 。
如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为掘金 上的英文分享文章。内容覆盖 Android 、 iOS 、 前端 、 后端 、 区块链 、 产品 、 设计 、 人工智能 等领域,想要查看更多优质译文请持续关注 掘金翻译计划 、官方微博、 知乎专栏 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 《JavaScript面向对象精要》之四:构造函数和原型对象
- C++在指定内存构造对象
- Lucene 构造 IndexWriter 对象(二)
- Lucene 构造 IndexWriter 对象(三)
- Lucene 构造 IndexWriter 对象(四)
- Lucene 构造 IndexWriter 对象(八)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。