javascript - 通过循环内的数组属性过滤集合

Question

我正在尝试根据数组属性过滤集合。例如，我有一个集合:

const collection = [
  {
    name: 'one',
    type: ['BRANCH']
  },
  {
    name: 'Two',
    type: ['OTHER']
  },
  {
    name: 'Three',
    type: ['OTHER']
  },
]

我有一个过滤器，它也是一个数组:

const filter = ['BRANCH']

现在我试图只返回集合中与过滤器数组匹配的项目。我有以下代码，我正在尝试重构:

const filtered = [];

collection.forEach((item) => {
  item.type.forEach((type) => {
    if (filters.indexOf(type) !== -1) {
      filtered.push(item);
    }
  })
})

console.log(filtered);

是否有更好的方法来比较循环内的这些数组(item.type 和 filter)以仅返回集合中的匹配项？

Demo

Answer 1

您当前的逻辑可能无法实现您想要的 - 如果 type 中的多个项目与 filter 中的某些项目匹配，则数组项目将被推送 两次(或更多)。

例如:

const collection = [
  {
    name: 'one',
    type: ['BRANCH']
  },
  {
    name: 'Two',
    type: ['OTHER']
  },
  {
    name: 'Three',
    type: ['OTHER']
  },
  {
    name: 'one',
    type: ['BRANCH', 'FOO']
  },
];
const filters = ['BRANCH', 'FOO']
const filtered = [];
collection.forEach((item) => {
  item.type.forEach((type) => {
    if (filters.indexOf(type) !== -1) {
      filtered.push(item);
    }
  })
})
console.log(filtered);

相反，您可以使用 Array.prototype.filter 并检查 .some 是否为 type包含在 filter 数组中:

const collection = [
  {
    name: 'one',
    type: ['BRANCH']
  },
  {
    name: 'Two',
    type: ['OTHER']
  },
  {
    name: 'Three',
    type: ['OTHER']
  },
]
const filter = ['BRANCH'];

console.log(
  collection.filter(({ type }) => (
    type.some(item => filter.includes(item))
  ))
);

这是假设如果 一些 type 包含在 filter 中，您希望结果中有项目。如果要检查 filter 的 every 项是否在 type 数组中，请使用 Array.prototype.every在 filter 数组上:

const collection = [
  {
    name: 'one',
    type: ['BRANCH']
  },
  {
    name: 'Two',
    type: ['OTHER']
  },
  {
    name: 'Three',
    type: ['OTHER']
  },
]
const filter = ['BRANCH'];

console.log(
  collection.filter(({ type }) => (
    filter.every(item => type.includes(item))
  ))
);