如何将列结构嵌套对象转换为行结构对象数组？

需求说明 #

给定一个以列名为键的嵌套对象，每个列名对应的子对象是索引值→列值的映射，需要将其转换为对象数组，每个数组元素对应一个索引下的所有列值组合。

输入对象 #

{'name': {0: 'Alpha',1: 'Beta',2: 'Gamma'},'age': {0: 21,1: 25,2: 30},'gender': {0: 'Male',1: 'Female',2: 'Male'}}

预期输出 #

[{name: 'Alpha',age: 21,gender: 'Male'}, {name: 'Beta',age: 25,gender: 'Female'}, {name: 'Gamma',age: 30,gender: 'Male'}]

你的代码问题分析 #

你尝试的代码存在两个核心问题：

1. 对象引用复用：columnNameObj是同一个对象引用，循环中修改它的属性时，所有已push到数组中的元素都会跟着变化，最终数组里的所有元素都是同一个对象的引用，只保留最后一次修改的结果。
2. 遍历逻辑错误：先遍历列再遍历列内的值，导致每列的所有值会依次覆盖columnNameObj的对应属性，最后每个对象只保留当前列的最后一个值，并且重复push了三次同一个对象。

正确解决方案 #

方法一：按索引循环构建对象 #

先确定索引的数量，再为每个索引创建独立的对象，遍历所有列填充对应值：

const obj = {'name': {0: 'Alpha',1: 'Beta',2: 'Gamma'},'age': {0: 21,1: 25,2: 30},'gender': {0: 'Male',1: 'Female',2: 'Male'}};
// 获取所有列名
const columns = Object.keys(obj);
// 获取索引总数（假设所有列的索引数量一致）
const totalIndexes = Object.keys(obj[columns[0]]).length;
const result = [];

// 遍历每个索引，构建对应对象
for (let i = 0; i < totalIndexes; i++) {
  const currentItem = {};
  // 为当前索引填充所有列的值
  columns.forEach(col => {
    currentItem[col] = obj[col][i];
  });
  result.push(currentItem);
}

console.log(result);

方法二：使用reduce函数式构建 #

利用第一个列的索引数量作为基准，通过reduce生成结果数组：

const obj = {'name': {0: 'Alpha',1: 'Beta',2: 'Gamma'},'age': {0: 21,1: 25,2: 30},'gender': {0: 'Male',1: 'Female',2: 'Male'}};

const result = Object.values(obj)[0].reduce((acc, _, index) => {
  const item = {};
  Object.keys(obj).forEach(col => {
    item[col] = obj[col][index];
  });
  acc.push(item);
  return acc;
}, []);

console.log(result);

两种方法的核心思路一致：为每个索引创建独立的新对象，避免引用复用问题；同时按索引维度组织数据，确保每个对象包含对应索引下的所有列值。

内容的提问来源于stack exchange，提问作者Rohít Jíndal