Le moyen le plus efficace de regrouper des tableaux d'objets

Question

Quel est le moyen le plus efficace de regrouper des objets dans un tableau ?

Par exemple, étant donné le tableau d'objets suivant :

[
    { Phase : "Phase 1", Étape : "Étape 1", Tâche : "Tâche 1", Valeur : "5" },
    { Phase : "Phase 1", Étape : "Étape 1", Tâche : "Tâche 2", Valeur : "10" },
    { Phase : "Phase 1", Étape : "Étape 2", Tâche : "Tâche 1", Valeur : "15" },
    { Phase : "Phase 1", Étape : "Étape 2", Tâche : "Tâche 2", Valeur : "20" },
    { Phase : "Phase 2", Étape : "Étape 1", Tâche : "Tâche 1", Valeur : "25" },
    { Phase : "Phase 2", Étape : "Étape 1", Tâche : "Tâche 2", Valeur : "30" },
    { Phase : "Phase 2", Étape : "Étape 2", Tâche : "Tâche 1", Valeur : "35" },
    { Phase : "Phase 2", Étape : "Étape 2", Tâche : "Tâche 2", Valeur : "40" }
]≪/pré>
J'affiche ces informations dans un tableau. Je veux regrouper par différentes méthodes mais je veux additionner les valeurs. 
J'utilise la fonction groupby d'Underscore.js, qui est utile, mais ne satisfait pas tout à fait le besoin car je ne veux pas les "séparer" mais les "fusionner", plus comme le group by de SQL méthode. 
Ce que je veux, c'est pouvoir additionner des valeurs spécifiques si nécessaire. 
Donc, si je regroupe par Phase, je veux obtenir : 
[
    { Phase : "Phase 1", Valeur : 50 },
    { Phase : "Phase 2", Valeur : 130 }
]≪/pré>
Si je regroupe par Phase / Step, je souhaite obtenir : 
[
    { Phase : "Phase 1", Étape : "Étape 1", Valeur : 15 },
    { Phase : "Phase 1", Étape : "Étape 2", Valeur : 35 },
    { Phase : "Phase 2", Étape : "Étape 1", Valeur : 55 },
    { Phase : "Phase 2", Étape : "Étape 2", Valeur : 75 }
]≪/pré>
Existe-t-il un script utile pour y parvenir, ou dois-je simplement continuer à utiliser Underscore.js et faire la somme en parcourant les objets de résultat ? 

Answer 1

Utilisation de l'objet Map ES6 :

/**
 * @description
 * 接受一个类型为V的数组和一个分组函数，返回按照分组函数分组的数组的Map。
 *
 * @param list 类型为V的数组。
 * @param keyGetter 一个函数，接受类型为V的数组作为输入，并返回类型为K的值。
 *                  K通常是V的属性键。
 *
 * @returns 按照分组函数分组的数组的Map。
 */
//export function groupBy<K, V>(list: Array<V>, keyGetter: (input: V) => K): Map<K, Array<V>> {
//    const map = new Map<K, Array<V>>();
function groupBy(list, keyGetter) {
    const map = new Map();
    list.forEach((item) => {
         const key = keyGetter(item);
         const collection = map.get(key);
         if (!collection) {
             map.set(key, [item]);
         } else {
             collection.push(item);
         }
    });
    return map;
}


// 使用示例

const pets = [
    {type:"Dog", name:"Spot"},
    {type:"Cat", name:"Tiger"},
    {type:"Dog", name:"Rover"}, 
    {type:"Cat", name:"Leo"}
];
    
const grouped = groupBy(pets, pet => pet.type);
    
console.log(grouped.get("Dog")); // -> [{type:"Dog", name:"Spot"}, {type:"Dog", name:"Rover"}]
console.log(grouped.get("Cat")); // -> [{type:"Cat", name:"Tiger"}, {type:"Cat", name:"Leo"}]

const odd = Symbol();
const even = Symbol();
const numbers = [1,2,3,4,5,6,7];

const oddEven = groupBy(numbers, x => (x % 2 === 1 ? odd : even));
    
console.log(oddEven.get(odd)); // -> [1,3,5,7]
console.log(oddEven.get(even)); // -> [2,4,6]

À propos de la carte : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Answer 2

Si vous souhaitez éviter d'utiliser des bibliothèques externes, vous pouvez simplement implémenter une version native groupBy() comme ceci :

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

console.log(groupBy(['one', 'two', 'three'], 'length'));

// => {"3": ["one", "two"], "5": ["three"]}