如何将对象数组中每个对象转换为id-value结构数组并分别输出？

现有一个包含多属性的对象数组，需要将每个对象的属性键作为id值、属性值作为value值，转换为由{id: 原键, value: 原值}组成的数组。当前代码会把所有转换结果合并到一个数组中，需求是每个原对象对应一个单独的目标数组。

现有代码 #

var 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 = () => {
  let 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) => {
  console.log(vars);
};
func1();

期望输出 #

[
  { id: 'you', value: 100 },
  { id: 'me', value: 75 },
  { id: 'foo', value: 116 },
  { id: 'bar', value: 15 },
]
[
  { id: 'you', value: 234 },
  { id: 'me', value: 33 },
  { id: 'foo', value: 356 },
  { id: 'bar', value: 1 },
]
[
  { id: 'you', value: 567 },
  { id: 'me', value: 77 },
  { id: 'foo', value: 99 },
  { id: 'bar', value: 20 }
]

解决方案 #

方法1：使用map和Object.entries简化转换（推荐）

利用map遍历原数组，对每个对象用Object.entries获取键值对，再转换为目标结构，最终得到一个二维数组，每个子数组对应原数组中的一个对象。

var 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 = () => {
  // 每个原对象转换为独立的{id, value}数组
  const result = list.map(obj => 
    Object.entries(obj).map(([key, value]) => ({ id: key, value }))
  );
  // 逐个输出每个目标数组，符合期望输出格式
  result.forEach(arr => console.log(arr));
  // 也可以把二维数组传给func2做后续处理
  func2(result);
};

const func2 = async (vars) => {
  // 这里可以根据需求处理二维数组
  console.log('接收的二维数组:', vars);
};

func1();

方法2：修改原有循环逻辑

保持原有的循环写法，对每个原对象单独生成一个目标数组，再将这些数组收集起来，而不是把单个对象直接push到大数组中。

var 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 = () => {
  let field_arr = [];
  for (const obj of list) {
    // 为当前对象单独创建目标数组
    const singleObjArr = [
      { id: "you", value: obj.you },
      { id: "me", value: obj.me },
      { id: "foo", value: obj.foo },
      { id: "bar", value: obj.bar }
    ];
    field_arr.push(singleObjArr);
  }
  // 逐个输出每个目标数组
  field_arr.forEach(arr => console.log(arr));
  func2(field_arr);
};

const func2 = async (vars) => {
  console.log('接收的二维数组:', vars);
};

func1();

两种方法都能实现需求：每个原对象对应一个独立的{id, value}结构数组，最终输出符合期望的格式。

内容的提问来源于stack exchange，提问作者nb_nb_nb