将对象键转为值与重映射键名：数组中每个对象的结构化扁平化处理

本文介绍如何将数组中每个对象的键名提取为新字段（如 id），原键对应的值映射为新字段（如 value），最终生成按对象分组的嵌套数组，避免 push() 多参数误用导致的结构错误。

本文介绍如何将数组中每个对象的键名提取为新字段（如 `id`），原键对应的值映射为新字段（如 `value`），最终生成按对象分组的嵌套数组，避免 `push()` 多参数误用导致的结构错误。

在前端数据处理中，常需将“宽表”格式（即对象含多个同级属性）转换为“长表”结构（每个属性拆为独立条目）。例如，将 { you: 100, me: 75 } 转换为 [ { id: 'you', value: 100 }, { id: 'me', value: 75 } ] —— 这一操作本质是键值对的结构重组。

但需特别注意：原始代码中 field_arr.push(...) 使用了展开式多参数传入，导致所有子对象被压入同一层级，最终输出为一维扁平数组；而目标输出是每个原始对象对应一个独立的子数组，即二维结构 [[...], [...], [...]]。关键修复在于：将每组转换结果作为一个数组整体传入 push()，而非多个独立对象。

以下是修正后的完整实现：

const list = [  { you: 100, me: 75, foo: 116, bar: 15 },  { you: 234, me: 33, foo: 356, bar: 1 },  { you: 567, me: 77, foo: 99, bar: 20 }];const func1 = () => {  const field_arr = [];  for (const obj of list) {    // ✅ 正确：将四个新对象封装为一个数组，再整体 push    field_arr.push([      { id: "you", value: obj.you },      { id: "me", value: obj.me },      { id: "foo", value: obj.foo },      { id: "bar", value: obj.bar }    ]);  }  func2(field_arr);};const func2 = async (vars) => {  console.log(vars);  // 输出符合预期的三维结构：  // [  //   [{id:'you',value:100}, {id:'me',value:75}, ...],  //   [{id:'you',value:234}, ...],  //   ...  // ]};func1();

⚠️ 注意事项：

• 若对象键名不固定（如后端返回动态字段），应避免硬编码 id 列表。可改用 Object.entries() 动态遍历：

  field_arr.push(  Object.entries(obj).map(([key, value]) => ({ id: key, value })));

• push() 接收多个参数时，会将每个参数视为独立元素添加；若需添加数组本身，请确保传入的是单个数组引用（如 [a, b, c]），而非 a, b, c。
• 此模式适用于图表库（如 ECharts）、表格组件（需长格式数据源）或 API 数据标准化场景。

总结：结构化数据转换的核心在于明确目标嵌套层级，并谨慎使用数组方法——一次 push([...]) 得到子数组，多次 push(...) 得到扁平项。理解 JS 原生方法的行为边界，是写出可维护数据处理逻辑的第一步。