JavaScript修改对象数组拼接字段值生成指定结构新数组

AI 小北

2026-9-1

JS数组按id配对拼接实现方案

核心逻辑

因为id=2固定对应名字（拼接在前）、id=1固定对应姓氏（拼接在后），且两类条目数量动态增长时同顺序的名和姓是一一配对的，只需要按顺序收集两类值，再按下标拼接即可：

遍历原数组时，按id区分名字、姓氏
遇到名字就新建目标对象，把名字值作为value的前缀
遇到姓氏就按遍历到的姓氏顺序，找到对应位置的目标对象，把姓氏拼接到value末尾
最终返回收集好的对象数组即可

reduce实现代码（符合你的使用需求）

const data = [
  { id: '1', label: 'Last Name', value: 'Smith' },
  { id: '1', label: 'Last Name', value: 'Blogs' },
  { id: '2', label: 'First Name', value: 'John' },
  { id: '2', label: 'First Name', value: 'Joe' }
];

const output = data.reduce((res, item) => {
  if (item.id === '2') {
    // 碰到名字先初始化条目，名字放前面
    res.list.push({
      key: 'Employee',
      value: item.value
    })
  }
  if (item.id === '1') {
    // 碰到姓氏按顺序拼到对应条目后面
    res.list[res.lastNameIndex].value += ` ${item.value}`;
    res.lastNameIndex++;
  }
  return res;
}, { list: [], lastNameIndex: 0 }).list;

运行后output的结构和要求完全一致：

[
  {key: 'Employee', value: 'John Smith'},
  {key: 'Employee', value: 'Joe Blogs'}
]

兼容乱序的增强版本

如果原数组里id的顺序不固定（比如所有姓氏排在所有名字前面、或者顺序打乱），可以先分组再拼接，适配性更强：

// 先按id把值分组
const grouped = data.reduce((map, item) => {
  map[item.id] ??= [];
  map[item.id].push(item.value);
  return map;
}, {});

// 按下标配对拼接
const output = grouped['2'].map((firstName, idx) => ({
  key: 'Employee',
  value: `${firstName} ${grouped['1'][idx]}`
}));