如何将API返回的以ID为键的对象转换为包含ID字段的对象数组？

这问题我之前对接API时也碰到过！这种以ID作为键的对象结构确实不太方便直接遍历处理，不过用JavaScript的几个内置方法就能轻松转成你想要的数组，给你分享几种常用的实现方式：

方法一：使用Object.keys()遍历键名 #

先通过Object.keys()获取所有ID键名，再用map遍历每个键，把原对象中对应的值和ID组合成新对象：

// 假设API返回的对象是apiResponse
const apiResponse = {
  "32111": { name: "商品A", price: 99 },
  "83276": { name: "商品B", price: 199 }
};

const convertedArray = Object.keys(apiResponse).map(id => {
  return {
    id: id,
    ...apiResponse[id] // 展开原对象的所有属性
  };
});

console.log(convertedArray);

方法二：使用Object.entries()直接获取键值对 #

Object.entries()会把对象转换成键值对数组（每个元素是[键名, 对应值]），用这个方法能更简洁地完成转换：

const convertedArray = Object.entries(apiResponse).map(([id, itemObj]) => {
  return { id, ...itemObj };
});

额外提示：处理空值情况 #

如果API返回的对象里可能存在空值（比如某个ID对应的内容为空），可以加个简单的过滤逻辑：

const convertedArray = Object.entries(apiResponse)
  .map(([id, itemObj]) => {
    // 跳过空对象，或者根据业务需求做其他处理
    if (!itemObj) return null;
    return { id, ...itemObj };
  })
  .filter(item => item !== null); // 过滤掉空的结果

这些方法在React、Vue等框架里也完全适用，核心逻辑就是利用JS的对象遍历方法把键值对重新组织成数组结构~

备注：内容来源于stack exchange，提问作者reacter777