Vue/Lodash场景下如何通过一个数组的取值过滤匹配另一数组？

你需要的核心逻辑是判断筛选数组的所有元素都被目标数组包含，可通过Array.every()方法实现，正确代码如下：

场景1：results为产品列表数组 #

const filteredProducts = this.results.filter(result => {
  return this.allergenFilter.every(filterTag => result.allergens.includes(filterTag))
})

场景2：results为对象结构（键为产品ID，值为产品信息） #

需要先把对象转为数组再执行过滤：

const productList = Object.values(this.results)
const filteredProducts = productList.filter(result => {
  return this.allergenFilter.every(filterTag => result.allergens.includes(filterTag))
})

逻辑说明 #

• Array.every()会遍历数组所有元素，只有所有元素都满足判定条件时才返回true
• 上述代码会逐一校验所有选中的过敏原标签，确认都存在于当前产品的过敏原标签数组中，全部匹配才会保留该产品
• 当allergenFilter为空（未选中任何筛选项）时，every()默认返回true，会返回全量产品，符合无筛选条件时的常规业务需求

扩展适配 #

如果业务需求调整为「只要匹配任意一个选中的过敏原标签就保留产品」，把every替换为Array.some()即可。

内容的提问来源于stack exchange，提问作者Andy Holmes