javascript - 如何在 es6 中编写更好的代码以使用数组值格式化对象

Question

我想使用 map 函数获得更好的解决方案以获得相同的预期结果。

我正在为带有条值的图表格式化 chartJs 对象。

但我使用的是 es5 语法的旧方法，我想使用 es6 语法实现相同的效果。

我尝试使用 es5 语法，例如 for..in 循环来获得所需的结果。

var graphData = [
  {org: 1234, dpt1: 1500, dpt2: 900, dpt3: 107},
  {org: 123, dpt1: 1500, dpt2: 900, dpt3: 1373},
  {org: 123, dpt1: 1500, dpt2: 900,dpt3: 946}, 
  {org: 34634634, dpt1: 1500, dpt2: 900, dpt3: 715}, 
  {org: 123123, dpt1: 1500, dpt2: 900, dpt3: 276}
 ];

实际数据将被解析为一个对象，其中包含来自所有对象的键和值

var graphdataObj = {}; 
graphData.forEach(function(elem) {
   for (var key in elem) { 
     if (graphdataObj[key]) {
        graphdataObj[key].push(elem[key]);
     } else {
        graphdataObj[key] = [];
        graphdataObj[key].push(elem[key]);
     }
  };
});

解析/结果对象==> graphdataObj

graphdataObj = {
  dpt1: [1500, 1500, 1500, 1500, 1500]
  dpt2: [900, 900, 900, 900, 900]
  dpt3: [107, 1373, 946, 715, 276] 
  org: [1234, 123, 123, 34634634, 123123]
};

我想使用 es6 语法获得相同的结果，以获得比这更好的解决方案，而无需在 forEach 中使用 for .. in 循环

Answer 1

我将使用 reduce 并遍历 graphData 的每个项目的 Object.entries，在中的键处创建一个数组值累加器，如果它尚不存在，则推送到该数组:

const graphData = [
  {org: 1234, dpt1: 1500, dpt2: 900, dpt3: 107},
  {org: 123, dpt1: 1500, dpt2: 900, dpt3: 1373},
  {org: 123, dpt1: 1500, dpt2: 900,dpt3: 946}, 
  {org: 34634634, dpt1: 1500, dpt2: 900, dpt3: 715}, 
  {org: 123123, dpt1: 1500, dpt2: 900, dpt3: 276}
];
 
const graphdataObj = graphData.reduce((a, obj) => {
  Object.entries(obj).forEach(([key, val]) => {
    if (!a[key]) a[key] = [];
    a[key].push(val);
  });
  return a;
}, {});

console.log(graphdataObj);

请注意 forEach 仍在使用，在 .reduce 中(但 forEach 是 最合适的数组出于副作用的目的对数组进行通用迭代的方法 - 在这一点上，没有比 forEach 更合适的方法了，所以不用担心。