将对象键转为值并重新映射键名：JavaScript 数组对象结构转换教程-js教程-PHP中文网

将对象键转为值并重新映射键名：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);
};

✅ 关键要点总结：