如何用JavaScript将API返回的扁平对象数组转为指定键值结构？

嘿，我来帮你搞定这个数据转换的问题～

首先得提个小细节：你想要的目标结构其实应该是一个对象，而不是数组哦——因为数组没法用cat、dog这种命名式的键，正确的目标结构应该是这样：

{ cat: {value: 2}, dog: {value: 3} }

你之前用map方法的话，只能返回一个新数组，没法直接构建这种键值对结构，这里更适合用Array.reduce()来实现，它可以帮我们把数组一步步累加转换成想要的对象：

基础实现代码 #

const originalData = [ 
  {name: 'Cat', value: 2, extra: 'data'}, 
  {name: 'Dog', value: 3, extra: 'data'} 
];

const transformedData = originalData.reduce((accumulator, currentItem) => {
  // 把name转成小写作为对象的键
  const key = currentItem.name.toLowerCase();
  // 给累加器添加对应的键值对，只保留value字段
  accumulator[key] = { value: currentItem.value };
  // 返回累加器，继续下一次迭代
  return accumulator;
}, {}); // 初始值设置为空对象

console.log(transformedData);
// 输出：{ cat: { value: 2 }, dog: { value: 3 } }

简化写法（ES6特性） #

如果你喜欢更简洁的代码，可以用ES6的解构赋值和计算属性名来优化：

const transformedData = originalData.reduce((acc, { name, value }) => ({
  ...acc, // 保留之前累加的所有键值对
  [name.toLowerCase()]: { value } // 动态设置新的键和值
}), {});

要是你确实需要把这个对象放到数组里（这种场景比较少见），只需要把结果包进数组就行：

const resultArray = [transformedData];
console.log(resultArray);
// 输出：[ { cat: { value: 2 }, dog: { value: 3 } } ]

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