ES6如何根据选中标签ID过滤包含嵌套标签数组的用户对象数组

实现思路 #

• 核心筛选逻辑：示例需求为匹配所有选中标签的用户，即用户的标签ID集合要完全覆盖选中的标签ID数组
• 性能优化：使用Set存储用户的标签ID，将ID存在性查询的时间复杂度从O(n)降到O(1)，数据量越大性能优势越明显
• 语义化：用数组filter+every组合实现，代码简洁易读，符合ES6语法规范

实现代码 #

const filterUsersByTags = (users, targetTagIds) => {
  // 无选中标签时可根据业务需求调整返回逻辑，此处默认返回全部用户
  if (targetTagIds.length === 0) return users
  return users.filter(user => {
    // 提取当前用户所有标签ID转Set，优化查询速度
    const userTagIdSet = new Set(user.tags.map(tag => tag.id))
    // 判断所有目标标签ID都存在于用户标签集合中
    return targetTagIds.every(id => userTagIdSet.has(id))
  })
}

// 测试调用
const users = [
  {
    username: "john",
    tags: [{id:1}, {id:3},{id:5},{id:7}]
  },
  {
    username: "becky",
    tags: [{id:1}, {id:7},{id:6}]
  },
  {
    username: "susy",
    tags: [{id:1}, {id:4},{id:5}]
  },
  {
    username: "tyson",
    tags: [{id:3},{id:5}]
  },
];
const tagIds = [7,5];
const filteredUsers = filterUsersByTags(users, tagIds)

运行结果 #

和需求预期完全一致：

[
  {
    username: "john",
    tags: [{id:1}, {id:3},{id:5},{id:7}]
  }
]

拓展说明 #

如果业务需求调整为匹配任意一个选中标签即可，仅需要把代码中的every方法替换为some即可。

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