Cara terbaik untuk mengumpulkan pelbagai objek

Question

Apakah cara paling berkesan untuk mengumpulkan objek dalam tatasusunan?

Sebagai contoh, diberikan pelbagai objek ini:

[ 
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" },
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" },
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" },
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" },
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" }
]

Saya memaparkan maklumat ini dalam jadual. Saya ingin mengumpulkan mengikut kaedah yang berbeza tetapi saya ingin menjumlahkan nilainya.

Saya menggunakan Underscore.js untuk fungsi groupbynya, yang banyak membantu, tetapi tidak menyelesaikan keseluruhan masalah kerana saya tidak mahu mereka "berpecah" tetapi "bercantum", lebih seperti pendekatan SQL group by.

Saya ingin dapat mengira jumlah nilai tertentu jika perlu.

Jadi jika saya buat groupby Phase Saya menjangkakan untuk menerima:

[
    { Phase: "Phase 1", Value: 50 },
    { Phase: "Phase 2", Value: 130 }
]

Jika saya melaksanakan kumpulan Phase / Step / Langkah, saya menerima:

[
    { Phase: "Phase 1", Step: "Step 1", Value: 15 },
    { Phase: "Phase 1", Step: "Step 2", Value: 35 },
    { Phase: "Phase 2", Step: "Step 1", Value: 55 },
    { Phase: "Phase 2", Step: "Step 2", Value: 75 }
]

Adakah terdapat skrip yang berguna atau perlukah saya menggunakan Underscore.js dan gelung melalui objek hasil untuk mengira jumlah itu sendiri?

Answer 1

Gunakan objek Peta ES6:

/**
 * @description
 * Takes an Array, and a grouping function,
 * and returns a Map of the array grouped by the grouping function.
 *
 * @param list An array of type V.
 * @param keyGetter A Function that takes the the Array type V as an input, and returns a value of type K.
 *                  K is generally intended to be a property key of V.
 *
 * @returns Map of the array grouped by the grouping function.
 */
//export function groupBy(list: Array, keyGetter: (input: V) => K): Map> {
//    const map = new Map>();
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;
}


// example usage

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]

Mengenai peta: https://developer.mozilla.org/en-US /docs/Web/JavaScript/Reference/Global_Objects/Map

Answer 2

Jika anda ingin mengelak daripada menggunakan perpustakaan luaran, anda boleh melaksanakan versi biasa groupBy() seperti ini:

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"]}