多数组对象映射匹配问题：如何正确提取对应type与status字段

修正后的完整代码 #

const Users =[{"id":"1","name":"Ben"},{"id":"2","name":"Khloe"},{"id":"3","name":"Ayra"}];
const Connects = [{userId: "1", status:"pending", type: 'skipped'}, {userId: "3", status:"pending", type: 'invited'}];

// 将每个userId对应的连接信息存储为对象，而非数组
const connectMap = Connects.reduce((map, { userId, type, status }) => {
  return map.set(userId, { type, status });
}, new Map())

const array = Users.map(({ id, name }) => {
  // 解构获取type和status，无匹配时设为空字符串
  const { type = '', status = '' } = connectMap.get(id) || {};
  return {
    name,
    type,
    status
  }
})

console.info(array)

问题根源 #

原代码在构建connectMap时，将type和status作为独立元素push到数组中，导致后续无法区分两个字段的对应关系，最终type和status都输出了数组拼接后的混合值。

修正逻辑 #

1. 调整映射结构：reduce阶段不再用数组存储，而是直接把每个userId对应的type和status封装成对象存入Map，保留字段的对应关系。
2. 精准提取字段：遍历Users时，通过解构赋值从Map中取出对应对象的type和status，并设置默认空字符串处理无匹配的用户数据。

输出结果 #

[
  { name: 'Ben', type: 'skipped', status: 'pending' },
  { name: 'Khloe', type: '', status: '' },
  { name: 'Ayra', type: 'invited', status: 'pending' }
]

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