条件 Javascript 过滤器

Question

我有一个包含以下内容的对象：

 assets = [
  { id: 1, type: 'image', url: 'image.jpg' },
  { id: 2, type: 'video', url: 'video.mp4' },
]

我想根据用户选择的图像、视频或全部进行过滤。

我想不出一种干净的方法来过滤 ALL 案例的使用。

 currentOption = 'image'
assets.filter(asset => asset.type === currentOption)

这将适用于图像或视频，但不适用于全部。

我可以检查我的过滤器功能：

 const currentOption = 'all'
const filterFunc = asset => {
  if (currentOption == 'all') return true
  return asset.type === currentOption
}
assets.filter(filterFunc)

但是，将过滤器短路以不迭代每个项目不是更好吗？

编辑： 回答为什么不一起跳过过滤器的问题。我试图让它与框架无关。但这是使用反应呈现的。所以我必须做类似的事情：

 <div>
{currentOption === 'all' ?
  assets.map(asset =>
   <img src={asset.url} />
  )
  :
  assets.filter(asset => asset.type === currentOption).map(asset =>
   <img src={asset.url} />
  )
}
</div>

另外，这甚至不考虑显示视频的代码。基本上我试图减少视图代码中的重复。

原文由 dardub 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用三元运算符来决定是否应用过滤器：

 currentOption === 'all' ? assets : assets.filter(asset => asset.type === currentOption)

您添加到问题末尾的图像映射可以这样写：

 (currentOption === 'all' ? assets : assets.filter(asset => asset.type === currentOption))
    .map( asset => <img src={asset.url} /> )

原文由 trincot 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我会或多或少地接受你的建议：

 assets.filter(asset => currentOption === "all" || asset.type === currentOption);

请记住 filter() 无论如何都会迭代所有项目。

原文由 alonkol 发布，翻译遵循 CC BY-SA 3.0 许可协议