最高效的物件數組分組方法
P粉310754094
P粉310754094 2023-08-21 14:34:06
0
2
538

什麼是在陣列中分組物件最有效的方法?

例如,給定以下物件陣列:

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

我正在一個表格中顯示這些資訊。我想按不同的方法進行分組,但我想要對值進行求和。

我正在使用Underscore.js的groupby函數,它很有幫助,但並不能完全滿足需求,因為我不想把它們“分開”,而是“合併”,更像SQL的group by方法。

我想要的是能夠對特定的值進行求和(如果需要的話)。

所以,如果我按Phase進行分組,我想要得到:

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

如果我按Phase / Step進行分組,我想要得到:

[ { 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 } ]

是否有一個有用的腳本可以實現這個功能,或者我應該繼續使用Underscore.js,然後透過循環遍歷結果物件來進行求和?

P粉310754094
P粉310754094

全部回覆 (2)
P粉029327711

使用ES6的Map物件:

/** * @description * 接受一个类型为V的数组和一个分组函数,返回按照分组函数分组的数组的Map。 * * @param list 类型为V的数组。 * @param keyGetter 一个函数,接受类型为V的数组作为输入,并返回类型为K的值。 * K通常是V的属性键。 * * @returns 按照分组函数分组的数组的Map。 */ //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; } // 使用示例 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]

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

    P粉590428357

    如果您想避免使用外部函式庫,可以簡潔地實作一個原生版本的groupBy(),如下:

    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"]}
      最新下載
      更多>
      網站特效
      網站源碼
      網站素材
      前端模板
      關於我們 免責聲明 Sitemap
      PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!