转换对象数组的有效方法答案

【问题标题】：Efficient way of transforming an array of objects转换对象数组的有效方法
【发布时间】：2019-03-15 00:53:26
【问题描述】：

我有以下从一些 api 获得的数据结构：

response = [{grade: 'A', frequency: 54, percentage: 24},
      {grade: 'B', frequency: 50, percentage: 10},
      {grade: 'C', frequency: 0, percentage: 0},
      {grade: 'D', frequency: 50, percentage: 20},
      ...
    ];

现在一些 UI javascript 库要求将这些数据格式化并呈现如下：

label: ['A', 'B', 'C', 'D'];
data: [[54,50,0,50],[24,10,0,20]];
series: ['frequency', 'percentage'];

将 response 对象转换为上述元素的最有效方法是什么？

let label = response.map(data => data.grade);
let freqencyData = response.map(data => data.freqency);
let percentageData = response.map(data => data.percentage);
let data = [freqencyData, percentageData];

这样的事情是否足够有效？请不要认为这是一个示例，在我的案例中响应数据太大，并且将地图完成 3 次似乎是矫枉过正。谢谢

【问题讨论】：

标签： javascript arrays dictionary stream

【解决方案1】：

您可以使用函数reduce 在一个循环中构建几乎想要的输出。

将label 属性与其余属性分开。
按特定属性名称（数据、标签和系列）对值进行分组。
对象Set 允许您为series 保留唯一的字符串。
Object.from 将对象 Set 转换为数组。
Object.values 摘自此：{frequency: [1,2,3], percentage: [1,2,3]} 至此：[[1,2,3], [1,2,3]]

let response = [{grade: 'A', frequency: 54, percentage: 24},{grade: 'B', frequency: 50, percentage: 10},{grade: 'C', frequency: 0, percentage: 0},{grade: 'D', frequency: 50, percentage: 20}];
let result = response.reduce((a, {grade: label, ...rest}) => {
  Object.keys(rest).forEach(k => {
    (a.series || (a.series = new Set())).add(k);
    a.data = a.data || {};
    (a.data[k] || (a.data[k] = [])).push(rest[k]);
  });  
  (a.label || (a.label = [])).push(label);
  
  return a;
}, Object.create(null));

result.series = Array.from(result.series);
result.data = Object.values(result.data);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案2】：

你可以做一个老式的循环：

let label = [];
let freqencyData = [];
let percentageData = [];

response.forEach(function(element) {
  label.push(data.grade);
  frequencyData.push(data.frequency);
  percentageData.push(data.percentage);
});

let data = [freqencyData, percentageData];

【讨论】：