如何在ES6中编写更好的代码以格式化具有数组值的对象

Question

我想使用地图函数来获得更好的解决方案，以获得相同的期望结果。

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

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

我已经尝试过使用for ..之类的es5语法来获得所需的结果。

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 in

Answer 1

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

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更合适的方法了，所以不用担心。）

Answer 2

为什么没有reduce的{​​{1}}

通过使用forEach，您可以轻松避免按照@CertainPerfomance的回答使用.forEach。但是，也可以通过使用.reduce循环来避免在.forEach方法内使用.reduce。

for ... of

基本上是相同的想法，但是当您可以使用经典的graphData.reduce((data, el) => { for (const [key, val] of Object.entries(el)) { if (!data[key]) { data[key] = []; } data[key].push(val); } return data; }, {}); 时，我看不出使用.forEach的原因，我认为它更容易阅读 / strong>。