Cara paling berkesan untuk mengumpulkan tatasusunan objek

Question

Apakah cara yang paling berkesan untuk mengumpulkan objek dalam tatasusunan?

Sebagai contoh, diberikan tatasusunan objek berikut:

[
    { Fasa: "Fasa 1", Langkah: "Langkah 1", Tugas: "Tugas 1", Nilai: "5" },
    { Fasa: "Fasa 1", Langkah: "Langkah 1", Tugasan: "Tugas 2", Nilai: "10" },
    { Fasa: "Fasa 1", Langkah: "Langkah 2", Tugasan: "Tugas 1", Nilai: "15" },
    { Fasa: "Fasa 1", Langkah: "Langkah 2", Tugas: "Tugas 2", Nilai: "20" },
    { Fasa: "Fasa 2", Langkah: "Langkah 1", Tugasan: "Tugas 1", Nilai: "25" },
    { Fasa: "Fasa 2", Langkah: "Langkah 1", Tugasan: "Tugas 2", Nilai: "30" },
    { Fasa: "Fasa 2", Langkah: "Langkah 2", Tugasan: "Tugas 1", Nilai: "35" },
    { Fasa: "Fasa 2", Langkah: "Langkah 2", Tugasan: "Tugas 2", Nilai: "40" }
]

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

Saya menggunakan fungsi groupby Underscore.js, yang berguna, tetapi tidak cukup memenuhi keperluan kerana saya tidak mahu "memisahkan" mereka tetapi "mencantumkan" mereka, lebih seperti kumpulan SQL dengan kaedah.

Apa yang saya mahukan ialah dapat menjumlahkan nilai tertentu jika perlu.

Jadi, jika saya mengumpulkan mengikut Fasa, saya ingin mendapatkan:

[
    { Fasa: "Fasa 1", Nilai: 50 },
    { Fasa: "Fasa 2", Nilai: 130 }
]

Jika saya mengumpulkan mengikut Fasa

[
    { Fasa: "Fasa 1", Langkah: "Langkah 1", Nilai: 15 },
    { Fasa: "Fasa 1", Langkah: "Langkah 2", Nilai: 35 },
    { Fasa: "Fasa 2", Langkah: "Langkah 1", Nilai: 55 },
    { Fasa: "Fasa 2", Langkah: "Langkah 2", Nilai: 75 }
]

Adakah terdapat skrip yang berguna untuk mencapai ini, atau adakah saya perlu terus menggunakan Underscore.js dan melakukan penjumlahan dengan menggelung pada objek hasil?

Answer 1

Menggunakan objek Peta 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]

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