如何仅显示具有相同ID的数组的第一个并将其合并到新数组中[关闭]

Question

假设我有两个对象数组。帖子和用户。

帖子：

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
  },
  {
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
  },
  {
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
  },
  {
    "userId": 2,
    "id": 13,
    "title": "dolorum ut in voluptas mollitia et saepe quo animi",
  },
  {
    "userId": 3,
    "id": 21,
    "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
  },
  {
    "userId": 3,
    "id": 22,
    "title": "dolor sint quo a velit explicabo quia nam",
  },
  {
    "userId": 4,
    "id": 31,
    "title": "ullam ut quidem id aut vel consequuntur",
  },
  {
    "userId": 4,
    "id": 32,
    "title": "doloremque illum aliquid sunt",
  },
  {
    "userId": 4,
    "id": 33,
    "title": "qui explicabo molestiae dolorem",
  },
  {
    "userId": 4,
    "id": 34,
    "title": "magnam ut rerum iure",
  },
]

用户：

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
  },
]

如您所见，帖子有多个

userId

。我只想显示具有相同

userId

的每个对象的第一个。

其次，我想将具有相同

id

的用户推送到新帖子中。

所以，最终的结果数组将是这样的：

新帖子：

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "name": "Leanne Graham",
    "username": "Bret",
  },
  {
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "name": "Ervin Howell",
    "username": "Antonette",
  },
  {
    "userId": 3,
    "id": 21,
    "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
    "name": "Clementine Bauch",
    "username": "Samantha",
  },
  {
    "userId": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
  },
]

请注意，我只想推送

name

和

username

，因为帖子已经有了帖子的ID。

实现这一目标的最佳方法是什么？

Answer 1

使用扩展语法将每个用户与帖子中为该用户 ID 找到的第一个匹配项组合起来。

使用 flatMap 可以轻松拒绝没有匹配帖子的用户（如果返回空数组，flatMap 将有效地忽略它）。

let users = [{"id":1,"name":"Leanne Graham","username":"Bret"},{"id":2,"name":"Ervin Howell","username":"Antonette"},{"id":3,"name":"Clementine Bauch","username":"Samantha"},{"id":4,"name":"Patricia Lebsack","username":"Karianne"},{"id":5,"name":"Chelsey Dietrich","username":"Kamren"}]
let posts = [{"userId":1,"id":1,"title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit"},{"userId":1,"id":2,"title":"qui est esse"},{"userId":1,"id":3,"title":"ea molestias quasi exercitationem repellat qui ipsa sit aut"},{"userId":2,"id":11,"title":"et ea vero quia laudantium autem"},{"userId":2,"id":12,"title":"in quibusdam tempore odit est dolorem"},{"userId":2,"id":13,"title":"dolorum ut in voluptas mollitia et saepe quo animi"},{"userId":3,"id":21,"title":"asperiores ea ipsam voluptatibus modi minima quia sint"},{"userId":3,"id":22,"title":"dolor sint quo a velit explicabo quia nam"},{"userId":4,"id":31,"title":"ullam ut quidem id aut vel consequuntur"},{"userId":4,"id":32,"title":"doloremque illum aliquid sunt"},{"userId":4,"id":33,"title":"qui explicabo molestiae dolorem"},{"userId":4,"id":34,"title":"magnam ut rerum iure"}]

let result = users.flatMap(({id, ...user}, post) =>
  (post = posts.find(p => p.userId===id), post ? {...post, ...user} : []))

console.log(result)

Answer 2

您可以首先创建一个查找表（即Map），将您的用户ID映射到用户对象（没有

id

键），以便您稍后可以将这些对象与您的

post

对象合并。然后，您可以使用 posts 按 userId

 对 

Map.groupBy 数组进行分组，这会为您提供

Map

的

userId

键，这些键指向具有相同

post

的

userId

数组。然后，您可以使用

Array.from()

从 Map 的

values

中定义的每个组中获取每个 post，并使用

Array.from()

的映射函数将每个组的第一个 post

 对象

映射到新对象包含之前使用 post

 对象创建的查找表中的合并用户对象：

const posts = [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit" }, { "userId": 1, "id": 2, "title": "qui est esse", }, { "userId": 1, "id": 3, "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut", }, { "userId": 2, "id": 11, "title": "et ea vero quia laudantium autem", }, { "userId": 2, "id": 12, "title": "in quibusdam tempore odit est dolorem", }, { "userId": 2, "id": 13, "title": "dolorum ut in voluptas mollitia et saepe quo animi", }, { "userId": 3, "id": 21, "title": "asperiores ea ipsam voluptatibus modi minima quia sint", }, { "userId": 3, "id": 22, "title": "dolor sint quo a velit explicabo quia nam", }, { "userId": 4, "id": 31, "title": "ullam ut quidem id aut vel consequuntur", }, { "userId": 4, "id": 32, "title": "doloremque illum aliquid sunt", }, { "userId": 4, "id": 33, "title": "qui explicabo molestiae dolorem", }, { "userId": 4, "id": 34, "title": "magnam ut rerum iure", }, ];
const users = [ { "id": 1, "name": "Leanne Graham", "username": "Bret", }, { "id": 2, "name": "Ervin Howell", "username": "Antonette", }, { "id": 3, "name": "Clementine Bauch", "username": "Samantha", }, { "id": 4, "name": "Patricia Lebsack", "username": "Karianne", }, { "id": 5, "name": "Chelsey Dietrich", "username": "Kamren", }, ];

const userLut = new Map(users.map(({id, ...usr}) => [id, usr]));
const res = Array.from(
  Map.groupBy(posts, post => post.userId).values(),
  ([post]) => ({...post, ...userLut.get(post.userId)})
);

console.log(res);