通过另一个对象数组过滤对象数组

在我们的应用程序中，有时我们需要根据一个对象数组中的数据来过滤另一个对象数组中的数据。这个问题在前端开发中尤为常见。我们可以使用 JavaScript 中的一些方法来完成这个任务。

filter 方法

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。filter() 方法为数组中的每个元素都调用一次函数，并将结果存储在新数组中。如果回调函数返回 true，则将当前元素添加到新数组中。

例如，我们有一个对象数组 users 和一个包含用户名的数组 filterUsers。我们可以使用 filter() 方法来筛选出只包含在 filterUsers 中的用户：

const users = [
  { username: 'Alice', age: 24 },
  { username: 'Bob', age: 32 },
  { username: 'Charlie', age: 18 },
  { username: 'Dave', age: 41 }
];

const filterUsers = ['Alice', 'Charlie'];

const filteredUsers = users.filter(user => filterUsers.includes(user.username));

console.log(filteredUsers);
// [{ username: 'Alice', age: 24 }, { username: 'Charlie', age: 18 }]

在上述示例中，我们使用 filter() 方法来遍历 users 数组中的每个元素，并检查其 username 是否包含在 filterUsers 中。如果是，则将该元素添加到新数组 filteredUsers 中。

Set 对象

Set 对象是 ECMAScript 6 中新引入的集合类。它可以用来存储不重复的值。

我们可以将filterUsers数组转换为一个Set对象，然后使用has方法来检查一个值是否在集合中。这比将filterUsers数组转换为字符串并使用indexOf进行搜索更高效：

const filterUsers = ['Alice', 'Charlie'];
const filterSet = new Set(filterUsers);

const filteredUsers = users.filter(user => filterSet.has(user.username));

console.log(filteredUsers);
// [{ username: 'Alice', age: 24 }, { username: 'Charlie', age: 18 }]

参考文献

• Array.prototype.filter()
• Set