如何根据另一个数组过滤包含对象的数组？

嘿，我懂你要做的事儿——从菜谱列表里挑出至少包含一种选中食材的菜谱对吧？你想到用filter和some的思路完全没问题，大概率是逻辑细节上没捋对，我给你贴出正确的实现，再拆解一下逻辑：

完整代码示例 #

const recipes = [
 { "id": 1, "name": "Boiled Egg", "ingredients": [ "egg", "water" ] },
 { "id": 2, "name": "Pancakes", "ingredients": [ "egg", "milk", "flour" ] },
 { "id": 3, "name": "Bread", "ingredients": [ "flour", "water", "salt" ] },
];

const selectedIngredients = ["milk", "salt"];

// 核心过滤逻辑
const filteredRecipes = recipes.filter(recipe => {
  // 检查：选中的食材里是否有任意一种在当前菜谱的食材列表中
  return selectedIngredients.some(ingredient => recipe.ingredients.includes(ingredient));
});

console.log(filteredRecipes);
// 输出结果正好是id为2和3的菜谱

逻辑拆解 #

1. recipes.filter()：遍历整个菜谱数组，只保留回调函数返回true的菜谱对象
2. selectedIngredients.some(...)：对选中的食材数组做检查，只要有任意一个食材满足条件，就返回true
3. recipe.ingredients.includes(ingredient)：判断当前选中的食材是否存在于当前菜谱的食材列表中

补充：等价写法 #

你也可以把逻辑反过来写，结果是完全一样的，看你个人习惯：

const filteredRecipes = recipes.filter(recipe => {
  // 换个角度：当前菜谱的食材里是否有任意一种在选中列表中
  return recipe.ingredients.some(ing => selectedIngredients.includes(ing));
});

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