将对象键转为值和重映射键名：数组中每个对象的结构化重构教程

本文详解如何将数组中每个对象的键名提取为新字段（如 id），原键对应的值映射为新字段（如 value），生成标准化的对象数组，并避免常见 push() 误用导致的扁平化问题。

本文详解如何将数组中每个对象的键名提取为新字段（如 `id`），原键对应的值映射为新字段（如 `value`），生成标准化的对象数组，并避免常见 `push()` 误用导致的扁平化问题。

在前端数据处理中，常需将原始对象“展平”为统一结构的键值对数组（例如用于图表渲染、表单动态配置或 API 标准化）。原始数据是多个同构对象组成的数组，目标是为每个对象生成一个独立的 { id, value } 对象数组——注意：每个原始对象应对应一个独立子数组，而非全部合并为单一扁平数组。

关键误区在于 Array.prototype.push() 的行为：当传入多个参数（如 push(a, b, c)）时，会将每个参数作为单独元素插入；而若希望插入一个包含多个对象的数组，必须将整个数组作为单个参数传入。原代码中连续调用 push(...) 导致所有 {id, value} 对被压入同一层级，破坏了按原始对象分组的结构。

✅ 正确做法是：对每个对象，构造一个内嵌数组，再整体 push 进 field_arr：

const func1 = () => {  const field_arr = [];  for (const obj of list) {    // ✅ 将四个 {id, value} 对封装为一个数组，再整体 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);};

运行后 field_arr 即为期望的三维结构：[ [obj1_pairs], [obj2_pairs], [obj3_pairs] ]，控制台将输出三个独立数组，完全匹配需求格式。

? 进阶建议：动态化处理（避免硬编码键名）
若对象键名不固定或未来可能扩展，推荐使用 Object.entries() 动态遍历：

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

此写法自动适配任意键名（如新增 baz: 42），增强代码健壮性与可维护性。

⚠️ 注意事项：

• 确保原始对象属性名一致且无缺失，否则 obj.xxx 可能返回 undefined；
• 若需兼容旧浏览器，Object.entries() 需 polyfill；
• func2 声明为 async，但当前未使用 await，若后续涉及异步操作（如批量 API 请求），可在此处安全集成。

通过结构化重构，你不仅获得了清晰的数据形态，也为后续的可视化、校验或序列化打下坚实基础。