Question

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

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

我想根据用户对IMAGE，VIDEO或ALL的选择进行过滤。

我想不出有一种干净的方法可以过滤使用ALL的情况。

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

这适用于IMAGE或VIDEO，但不适用于所有。

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

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>

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

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} /> )

Answer 2

我会或多或少地按照你的建议去做：

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

请记住，filter（）无论如何都会遍历所有项目。

Answer 3

这可能对您有用：

assets.map(
    filter(
        asset {
            return !currentOption ? asset : asset.type === currentOption
    }
)

如果您认为更明确的话，可以更进一步，声明一个“全部”当前选项。

希望有帮助！

Answer 4

您可以这样做：

let currentOption = null; //or 'image', or 'video'
const new_assets = 
  assets.filter(asset => !currentOption || asset.type === currentOption)

如果您不想过滤，请将 currentOption 设置为null，或者如果将其设置为任何值，请考虑进行比较。但如前所述，filter（）将迭代整个数组。检查currentOption更明智，如果是'all'，你可以复制数组。

条件Javascript过滤器

4 个答案: