Как написать лучший код в es6 для форматирования объекта со значениями массива

Question

Я хотел получить лучшее решение, используя функции карты, чтобы получить тот же желаемый результат.

Я форматирую объект для chartJs для диаграммы со значениями бара.

Но я использую старый метод синтаксиса es5, я хотел добиться того же, используя синтаксис es6.

Я попытался использовать синтаксис es5, например, для цикла .. 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, для какого-то другого лучшего решения, чем это, без использования цикла for .. in в forEach

Answer 1

Почему бы не reduce без forEach

Вы можете легко избежать использования .forEach согласно ответу @ CertainPerfomance, используя .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, когда вы можете использовать классический for ... of, который, на мой взгляд, гораздо более читабелен .

Answer 2

Я бы использовал 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, поэтому беспокоиться не о чем).