JavaScript如何遍历数组按id分组归集所有关联URL

首先你给出的是缺少数组包裹的条目片段，先补全为合法可运行的JS数组结构：

const pageEntries = [
  { url: "www.site.com", ids: ["F20", "C10", "C05"] },
  { url: "www.site.com/something", ids: ["F20", "C06", "C05"] },
  { url: "www.site.com/somethingelse", ids: ["F21", "C12", "C05"] }
]

实现思路是用对象做临时哈希表存储分组结果，只需要线性遍历即可完成，没有多余的重复匹配，效率很高：

• 初始化空对象作为哈希容器，键为ID值，值为该ID关联的URL数组
• 遍历每一条页面数据，拿到当前条目的URL和关联的ID列表
• 遍历当前条目的每一个ID：如果容器中没有该ID对应的键，就初始化为空数组；随后将当前URL推入对应ID的数组中
• 如果最终需要对象数组格式，对临时存储的对象做一次结构转换即可

完整实现代码：

// 临时分组哈希表
const idGroup = {}

for (const entry of pageEntries) {
  const { url, ids } = entry
  for (const id of ids) {
    // 初始化不存在的ID分组
    if (!idGroup[id]) {
      idGroup[id] = []
    }
    idGroup[id].push(url)
  }
}

// 转换为你需要的对象数组格式
const finalResult = Object.entries(idGroup).map(([id, urls]) => ({ id, urls }))

运行后得到的输出结构如下：

[
  { id: "F20", urls: ["www.site.com", "www.site.com/something"] },
  { id: "C10", urls: ["www.site.com"] },
  { id: "C05", urls: ["www.site.com", "www.site.com/something", "www.site.com/somethingelse"] },
  { id: "C06", urls: ["www.site.com/something"] },
  { id: "F21", urls: ["www.site.com/somethingelse"] },
  { id: "C12", urls: ["www.site.com/somethingelse"] }
]

如果你不需要对象数组格式，可以直接使用idGroup对象，通过idGroup['F20']即可直接取到对应ID的URL列表，查询性能更优。

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