在 JS 中使用深度嵌套的数组过滤数组答案

【问题标题】：Filtering an array with a deeply nested array in JS在 JS 中使用深度嵌套的数组过滤数组
【发布时间】：2023-03-05 22:15:02
【问题描述】：

如何过滤具有深度嵌套数组的数组？给定以下 2 个数组，我需要将结果设为仅包含 rice cakes 和 gluten-free-pizza 对象的数组：

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [
  { name: 'pasta', tags: ['delicious', 'has carbs']}, 
  { name: 'gluten-free-pizza', tags: ['gluten-free']}, 
  { name: 'pizza', tags: ['delicious', 'best meal of the year']},
  { name: 'rice cakes', tags: ['flavor-free']}
]

我尝试了以下方法，它只返回所有内容（4 个对象）：

var result = foodsAvailable.filter(function(food) {
  return foodsILike.filter(function(foodILike) {
    return foodILike === food;
  })
})

result
// Array [ Object, Object, Object, Object]

【问题讨论】：

你能显示示例输出吗？

标签： javascript arrays

【解决方案1】：

您可以使用Array#some 和Array#includes 来检查 foodILike 是否包含标签。

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [{ name: 'pasta', tags: ['delicious', 'has carbs'] }, { name: 'gluten-free-pizza', tags: ['gluten-free'] }, { name: 'pizza', tags: ['delicious', 'best meal of the year'] }, { name: 'rice cakes', tags: ['flavor-free'] }]

var result = foodsAvailable.filter(function(food) {
    return food.tags.some(function(tag) {
        return foodsILike.includes(tag);
    });
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

有什么更高效的方法来做到这一点？如果您与大型数组深度嵌套，这可能会在计算上变得昂贵。
@zero_cool，它取决于结构和想要的结果，就像找到的项目的所有节点或只是嵌套结构的项目。也许它可以更快地使用foodsILike 的对象或地图。对于加速，如果速度真的很重要，应该避免使用数组方法。
@NinaScholz 你能看看我发的一个问题吗：stackoverflow.com/questions/51663557/…这和我上面的问题有关
这太棒了！对于以后发现这个并希望它像我一样在 ES6 中重新格式化的任何人，它会是：const result = foodsAvailable.filter(food => food.tags.some(tag => foodsILike.includes(tag));

【解决方案2】：

您缺少对内部过滤器的length 检查，并且您没有检查标签数组中该内部过滤器中的值

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [
  { name: 'pasta', tags: ['delicious', 'has carbs']}, 
  { name: 'gluten-free-pizza', tags: ['gluten-free']}, 
  { name: 'pizza', tags: ['delicious', 'best meal of the year']},
  { name: 'rice cakes', tags: ['flavor-free']}
]

var result = foodsAvailable.filter(function(food) {
  return foodsILike.filter(function(foodILike) {
    // is value in tags array?
    return food.tags.indexOf(foodILike) >-1;
  }).length;// length acts as boolean, any length greater than zero is truthy
});

console.log(result)

【讨论】：

【解决方案3】：

您可以使用array.reduce 将数组缩减为所需的结构，方法是检查条件，即foodsILike 是否包含tag。

使用array.reduce 的好处是您可以根据需要在reduce 循环本身中修改结构。

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [
  { name: 'pasta', tags: ['delicious', 'has carbs']}, 
  { name: 'gluten-free-pizza', tags: ['gluten-free']}, 
  { name: 'pizza', tags: ['delicious', 'best meal of the year']},
  { name: 'rice cakes', tags: ['flavor-free']}
];

let foods = foodsAvailable.reduce((foods, food) => {
  if(foodsILike.some(f => food.tags.indexOf(f) !== -1)) {
    foods.push(food);
  }
  return foods;
},[]);

console.log(foods);

【讨论】：