JavaScript数组对象结构转换：键值映射教程

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

在前端开发中，数据格式转换是一个经常遇到的场景。本文要讨论的“结构转换”操作，是将类似 { you: 100, me: 75 } 这样的扁平键值对对象，转换为包含 id 和 value 字段的标准对象数组。这常见于图表数据整理、动态表单生成以及处理第三方 API 返回的数据等需求中。

需求清晰，但转换过程存在一个容易踩中的陷阱。先看一组示例数据，假设有以下数组：

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 }
    );
  }
  // ...后续处理
};

最终得到的 field_arr 将是一个包含 12 个对象的一维数组。问题出在 push() 方法的行为上：当传入多个参数时，push() 会将每个参数作为独立元素逐个加入数组，而不是将它们作为一个整体子数组添加。这导致了数据被扁平化，丢失了原有的分组结构。

正确实现三层分组结构（3 组 × 每组 4 个对象）的方法，是将每个对象转换后的结果先封装成一个独立的数组：

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();

更灵活的动态实现（推荐）

上述代码解决了分组问题，但硬编码了键名（如 "you"、"me" 等）。如果后续数据结构变化，需要手动调整代码，维护成本较高。更优雅的方案是使用 Object.entries() 和 map() 方法动态处理，完全解耦对具体键名的依赖：

// 通用转换函数
const toIdValueArray = (obj) =>
  Object.entries(obj).map(([id, value]) => ({ id, value }));

const func1Dynamic = () => {
  // 一行代码完成整个转换，清晰且健壮
  const field_arr = list.map(obj => toIdValueArray(obj));
  func2(field_arr);
};

无论原始对象有多少属性、名称如何，都能被正确转换。代码的健壮性和可维护性显著提升。

关键要点总结

• 警惕 push() 的多参数陷阱：该方式会将多个参数扁平化添加。若需推入子数组，务必先用 [] 包裹，作为单一参数传入。
• 采用动态转换：利用 Object.entries() 配合 map() 遍历对象属性，避免对固定键名硬编码，增强适应性。
• 明确数据结构目标：若需求要求保留分组（二维数组），应避免使用 flat() 等方法意外扁平化。当然，若后续需要，flat() 可方便地将二维数组展平为一维，这属于另一操作。

掌握这些方法，不仅能精准实现数据结构转换需求，还能编写出易于理解和维护的代码，为应对更复杂的数据场景打下扎实基础。