如何将循环中分散的键值对合并为结构化对象数组

在数据处理过程中，我们经常会遇到这样一种情况：程序在遍历列表或者读取输入时，每次只能拿到一个键和一个对应的值，而不是完整的一条记录。如果希望把这些分散的键值对整理成结构化对象，并统一放到一个数组里，就需要掌握循环中的合并技巧。

为什么需要合并为对象数组

分散的键值对通常以变量形式存在，例如循环里出现 key 和 value。如果直接存到两个数组，后期维护成本很高。结构化对象数组形如：

// 目标结构
[
  { name: '张三', age: 20 },
  { name: '李四', age: 25 }
]

这种结构可以直接传给接口，或者用 UI 框架渲染表格。

基础循环合并写法

假设我们从表单中依次拿到字段名和值，可以在循环里构造对象并推入数组：

let result = [];
// 模拟分散的键值对输入
let keys = ['name', 'age'];
let items = [
  ['张三', 20],
  ['李四', 25]
];

for (let i = 0; i < items.length; i++) {
  let obj = {};
  for (let j = 0; j < keys.length; j++) {
    // 将键和对应的值放入对象
    obj[keys[j]] = items[i][j];
  }
  result.push(obj);
}
console.log(result);

上面代码中，每一次外层循环都新建一个 obj，避免不同记录之间互相覆盖。

使用 reduce 做分组合并

如果原始数据是按 key 分散的多条记录，可以用 reduce 按 id 合并：

let list = [
  { id: 1, key: 'name', value: '张三' },
  { id: 1, key: 'age', value: 20 },
  { id: 2, key: 'name', value: '李四' },
  { id: 2, key: 'age', value: 25 }
];

let merged = list.reduce(function (acc, cur) {
  if (!acc[cur.id]) {
    acc[cur.id] = { id: cur.id };
  }
  acc[cur.id][cur.key] = cur.value;
  return acc;
}, {});

let arr = Object.values(merged);
console.log(arr);

常见错误与注意点

• 在循环外定义对象，导致每次 push 的都是同一个引用。
• 键名没有统一，出现 Name 和 name 混用。
• 值类型被自动转成字符串，丢失数字或布尔类型。

小结

将循环中分散的键值对合并为结构化对象数组，核心在于：每次迭代都生成独立对象，按统一键名赋值，最后收集到数组。掌握 for 循环与 reduce 两种思路，就能应对绝大多数业务场景。

JavaScript对象数组循环合并修改时间：2026-07-31 04:21:10