JavaScript按id匹配两个对象数组并返回对应title值

你当前代码的返回结果不符合预期，核心是两个逻辑偏差：

• map嵌套filter的写法会返回二维嵌套数组，结构为按用户分组的匹配专辑对象集合，不是扁平化的结果
• 过滤完成后没有提取目标title字段，返回的是完整的专辑对象，不是你需要的字段值

直接用flatMap处理匹配逻辑，过滤后提取title即可得到一维的目标值数组：

const usersData = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
  }
]

const albumsData = [
  {
    "userId": 1,
    "id": 1,
    "title": "FooBar"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "Trolololo"
  },
  {
    "userId": 3,
    "id": 3,
    "title": "omnis laborum odio"
  },
  {
    "userId": 4,
    "id": 4,
    "title": "non esse culpa molestiae omnis sed optio"
  }
]

const results = usersData.flatMap(({ id }) =>
  albumsData
    .filter(({ userId }) => id === userId)
    .map(item => item.title)
);

console.log(results);
// 运行输出：[ 'FooBar', 'Trolololo' ]

如果运行环境不支持flatMap，可以先做map再手动扁平化：

const results = [].concat(
  ...usersData.map(({ id }) =>
    albumsData
      .filter(({ userId }) => id === userId)
      .map(item => item.title)
  )
);

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