将对象键转化为值并重新映射键名：JavaScript 数组对象结构转换教程

本文讲解如何将数组中每个对象的键（key）提取为新对象的 id 字段，原键对应的值则作为 value 字段，最终生成结构化的嵌套数组，避免 push() 多参数误用导致的数据扁平化问题。

本文讲解如何将数组中每个对象的键（key）提取为新对象的 `id` 字段，原键对应的值则作为 `value` 字段，最终生成结构化的嵌套数组，避免 `push()` 多参数误用导致的数据扁平化问题。

在实际开发中，我们常需对原始数据结构进行“形状转换”（shape transformation），例如将 { you: 100, me: 75 } 这类扁平对象，转换为标准化的键值对数组形式 [{ id: 'you', value: 100 }, { id: 'me', value: 75 }]。这一模式广泛应用于图表配置、表单动态渲染、API 数据预处理等场景。

但需特别注意：原代码中使用 field_arr.push(a, b, c, d) 会将四个对象逐个推入同一层数组，导致最终结果是一维扁平数组（共 12 个对象），而非预期的按源对象分组的三维结构（3 组 × 每组 4 个对象）。正确做法是将每组转换结果封装为一个子数组，再整体 push 进 field_arr：

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) {    // ✅ 正确：将当前对象转换为一个子数组，再整体推入    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) => {  // 输出符合预期的三组独立数组  vars.forEach((group, index) => {    console.log(`Group ${index + 1}:`, group);  });};func1();

更灵活的动态实现（推荐）
若对象键名不固定或可能扩展，硬编码 id 字符串易出错且难以维护。可结合 Object.entries() 实现自动遍历：

const toIdValueArray = (obj) =>   Object.entries(obj).map(([id, value]) => ({ id, value }));const func1Dynamic = () => {  const field_arr = list.map(obj => toIdValueArray(obj));  func2(field_arr);};

✅ 关键要点总结：

• Array.prototype.push() 接收多个参数时，会将每个参数视为独立元素添加；如需添加子数组，务必用方括号包裹成单个参数；
• 使用 Object.entries() + map() 可解耦键名依赖，提升代码健壮性与可维护性；
• 若后续需进一步扁平化（如合并所有项为单层数组），可额外调用 flat()，但本例明确要求分组结构，故不应使用。

通过以上方法，你不仅能精准达成目标输出格式，还能为未来数据结构演进预留扩展空间。

立即学习“Java免费学习笔记（深入）”；