将对象键转为值、重映射键名：数组中每个对象的结构化扁平化处理

将对象键转为值、重映射键名：数组中每个对象的结构化扁平化处理

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

处理前端数据时，我们常常会遇到一个经典场景：需要把一种“宽表”格式的数据，转换成更便于处理的“长表”结构。简单来说，就是把一个包含多个同级属性的对象“拍平”，让每个属性都变成一条独立的记录。

举个例子就明白了。原始数据是这样的：{ you: 100, me: 75 }。而我们想要的结果是：[ { id: 'you', value: 100 }, { id: 'me', value: 75 } ]。这本质上是一次键值对的结构重组——把对象的键（key）拿出来，变成一个字段（如`id`）的值，而原来键对应的值（value），则成为另一个字段（如`value`）的内容。

思路听起来很直接，对吧？但在实际编码时，有个细节特别容易踩坑。很多开发者会下意识地使用`push(...)`这种展开语法，结果发现，最终得到的数组结构完全不对。

问题出在哪呢？关键在于目标结构。我们最终需要的，是一个二维的嵌套数组，即每个原始对象转换后，都应该对应一个独立的子数组，整体结构应该是[[...], [...], [...]]。而如果`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()`的行为：这是本次转换的核心。`push()`方法在接收多个参数时，会将每一个参数都视为独立的元素添加到数组末尾。如果你想把一个数组本身作为一个元素添加进去，就必须确保传入的是这个数组的引用（比如`[a, b, c]`），而不是`a, b, c`这三个独立元素。
• 应用场景：这种数据转换模式非常实用。它常见于需要“长格式”数据源的图表库（如ECharts）、表格组件，或者在标准化API返回数据的预处理阶段。

总结一下，结构化数据转换的核心，首先在于明确你想要的最终嵌套层级。具体到代码实现上，则要谨慎使用数组方法：一次push([...])会得到一个子数组，而多次push(...)只会得到一堆扁平化的项。透彻理解Ja vaScript原生方法的行为边界，是写出清晰、可维护的数据处理逻辑的第一步。