本文介绍如何将数组中每个对象的键名提取为新字段（如 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 原生方法的行为边界，是写出可维护数据处理逻辑的第一步。
