オブジェクトの配列をグループ化する最も効率的な方法
オブジェクトを配列でグループ化するための最も効率的な方法は何ですか？
たとえば、次のようなオブジェクトの配列があるとします。
[
{ 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" }
]
この情報を表に表示しています。さまざまな方法でグループ化したいのですが、値を合計したいと思います。
Groupby関数にUnderscore.jsを使用していますが、これは役に立ちますが、SQL group byメソッドのように「分割」するのではなく「マージ」するのではないので、全体的なトリックは行いません。
私が探しているものは、（要求された場合）特定の値を合計することができるでしょう。
それで私がPhaseをgroupbyしたなら、私は受け取りたいと思います：
[
{ 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を使用してから、結果のオブジェクトをループ処理して合計を自分で作成する必要がありますか。
外部ライブラリを避けたいのであれば、バニラバージョンの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"]}ES6 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"}]
地図について： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
eS6の場合：
const groupBy = (items, key) => items.reduce(
(result, item) => ({
...result,
[item[key]]: [
...(result[item[key]] || []),
item,
],
}),
{},
);
linq という答えはおもしろいですが、それはまたかなり重いものです。私のアプローチは多少異なります。
var DataGrouper = (function() {
var has = function(obj, target) {
return _.any(obj, function(value) {
return _.isEqual(value, target);
});
};
var keys = function(data, names) {
return _.reduce(data, function(memo, item) {
var key = _.pick(item, names);
if (!has(memo, key)) {
memo.Push(key);
}
return memo;
}, []);
};
var group = function(data, names) {
var stems = keys(data, names);
return _.map(stems, function(stem) {
return {
key: stem,
vals:_.map(_.where(data, stem), function(item) {
return _.omit(item, names);
})
};
});
};
group.register = function(name, converter) {
return group[name] = function(data, names) {
return _.map(group(data, names), converter);
};
};
return group;
}());
DataGrouper.register("sum", function(item) {
return _.extend({}, item.key, {Value: _.reduce(item.vals, function(memo, node) {
return memo + Number(node.Value);
}, 0)});
});
JSBinで の動作を確認できます 。
私はそれを見逃しているかもしれませんが、私はhasがすることをするものをUnderscoreに見ませんでした。これは_.containsとほとんど同じですが、比較のために_.isEqualではなく===を使用します。それ以外は、これ以外は問題固有のものですが、一般的なものにしようとしています。
DataGrouper.sum(data, ["Phase"])が戻る
[
{Phase: "Phase 1", Value: 50},
{Phase: "Phase 2", Value: 130}
]
そしてDataGrouper.sum(data, ["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}
]
しかし、ここではsumは1つの潜在的な機能に過ぎません。他の人を好きなように登録できます。
DataGrouper.register("max", function(item) {
return _.extend({}, item.key, {Max: _.reduce(item.vals, function(memo, node) {
return Math.max(memo, Number(node.Value));
}, Number.NEGATIVE_INFINITY)});
});
そして今DataGrouper.max(data, ["Phase", "Step"])が戻ります
[
{Phase: "Phase 1", Step: "Step 1", Max: 10},
{Phase: "Phase 1", Step: "Step 2", Max: 20},
{Phase: "Phase 2", Step: "Step 1", Max: 30},
{Phase: "Phase 2", Step: "Step 2", Max: 40}
]
またはあなたがこれを登録したならば：
DataGrouper.register("tasks", function(item) {
return _.extend({}, item.key, {Tasks: _.map(item.vals, function(item) {
return item.Task + " (" + item.Value + ")";
}).join(", ")});
});
それからDataGrouper.tasks(data, ["Phase", "Step"])を呼び出すことはあなたを得るでしょう
[
{Phase: "Phase 1", Step: "Step 1", Tasks: "Task 1 (5), Task 2 (10)"},
{Phase: "Phase 1", Step: "Step 2", Tasks: "Task 1 (15), Task 2 (20)"},
{Phase: "Phase 2", Step: "Step 1", Tasks: "Task 1 (25), Task 2 (30)"},
{Phase: "Phase 2", Step: "Step 2", Tasks: "Task 1 (35), Task 2 (40)"}
]
DataGrouper自体は関数です。あなたのデータとグループ化したいプロパティのリストでそれを呼び出すことができます。これは、要素が2つのプロパティを持つオブジェクトである配列を返します。keyはグループ化されたプロパティのコレクション、valsはキーにない残りのプロパティを含むオブジェクトの配列です。たとえば、DataGrouper(data, ["Phase", "Step"])は次のようになります。
[
{
"key": {Phase: "Phase 1", Step: "Step 1"},
"vals": [
{Task: "Task 1", Value: "5"},
{Task: "Task 2", Value: "10"}
]
},
{
"key": {Phase: "Phase 1", Step: "Step 2"},
"vals": [
{Task: "Task 1", Value: "15"},
{Task: "Task 2", Value: "20"}
]
},
{
"key": {Phase: "Phase 2", Step: "Step 1"},
"vals": [
{Task: "Task 1", Value: "25"},
{Task: "Task 2", Value: "30"}
]
},
{
"key": {Phase: "Phase 2", Step: "Step 2"},
"vals": [
{Task: "Task 1", Value: "35"},
{Task: "Task 2", Value: "40"}
]
}
]
DataGrouper.registerは関数を受け取り、グループ化する初期データとプロパティを受け取る新しい関数を作成します。次に、この新しい関数は上記のように出力フォーマットを取り、それぞれに対して順番に関数を実行して、新しい配列を返します。生成された関数は、指定した名前に従ってDataGrouperのプロパティとして格納され、ローカル参照が必要な場合にも返されます。
ええ、それはたくさんの説明です。コードはかなり単純明快です、私は願っています！
おそらくこれは linq.js でもっと簡単にできます。これはJavaScriptでのLINQの真の実装を意図しています（ DEMO ）
var linq = Enumerable.From(data);
var result =
linq.GroupBy(function(x){ return x.Phase; })
.Select(function(x){
return {
Phase: x.Key(),
Value: x.Sum(function(y){ return y.Value|0; })
};
}).ToArray();
結果：
[
{ Phase: "Phase 1", Value: 50 },
{ Phase: "Phase 2", Value: 130 }
]
あるいは、文字列ベースのセレクター（ DEMO ）を使用します。
linq.GroupBy("$.Phase", "",
"k,e => { Phase:k, Value:e.Sum('$.Value|0') }").ToArray();
lodash groupBy それはあなたが探しているものとまったく同じことをするようです。それはまたかなり軽量で本当にシンプルです。
フィドルの例： https://jsfiddle.net/r7szvt5k/ /
あなたの配列名がarrであると仮定すると、lodashのgroupByはちょうど：
import groupBy from 'lodash/groupBy';
// if you still use require:
// const groupBy = require('lodash/groupBy');
const a = groupBy(arr, function(n) {
return n.Phase;
});
// a is your array grouped by Phase attribute
_.groupBy([{tipo: 'A' },{tipo: 'A'}, {tipo: 'B'}], 'tipo');
>> Object {A: Array[2], B: Array[1]}
array.reduce()からES6のMapを構築できます。
const groupedMap = initialArray.reduce(
(entryMap, e) => entryMap.set(e.id, [...entryMap.get(e.id)||[], e]),
new Map()
);
これには、他のソリューションに比べていくつかの利点があります。
- ライブラリを必要としません（
_.groupBy()とは異なります）。 - オブジェクトではなくJavaScriptの
Mapを取得します（_.groupBy()から返されるように）。これには たくさんの利点 が含まれます：- アイテムが最初に追加された順番を覚えています、
- キーは単なる文字列ではなく、どんな型でもかまいません。
Mapは配列の配列よりも有用な結果です。しかし、配列の配列が必要な場合は、Array.from(groupedMap.entries())（[key, group array]ペアの配列の場合）またはArray.from(groupedMap.values())（単純な配列の配列の場合）を呼び出すことができます。- とても柔軟です。多くの場合、このマップを使用して次に実行する予定のものはすべて、縮小の一部として直接実行できます。
最後のポイントの例として、idによって（浅い）マージを行いたいオブジェクトの配列があると想像してください。
const objsToMerge = [{id: 1, name: "Steve"}, {id: 2, name: "Alice"}, {id: 1, age: 20}];
// The following variable should be created automatically
const mergedArray = [{id: 1, name: "Steve", age: 20}, {id: 2, name: "Alice"}]
これを行うには、通常、idでグループ化してから、結果の各配列をマージすることから始めます。代わりに、reduce()内で直接マージを実行できます。
const mergedArray = Array.from(
objsToMerge.reduce(
(entryMap, e) => entryMap.set(e.id, {...entryMap.get(e.id)||{}, ...e}),
new Map()
).values()
);
Array.prototype.groupBy = function(keyFunction) {
var groups = {};
this.forEach(function(el) {
var key = keyFunction(el);
if (key in groups == false) {
groups[key] = [];
}
groups[key].Push(el);
});
return Object.keys(groups).map(function(key) {
return {
key: key,
values: groups[key]
};
});
};
Alasql JavaScriptライブラリでそれを行うことができます。
var data = [ { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }];
var res = alasql('SELECT Phase, Step, SUM(CAST([Value] AS INT)) AS [Value] \
FROM ? GROUP BY Phase, Step',[data]);
この例を試してください at jsFiddle 。
BTW：大規模な配列（100000レコード以上）AlasqlはLinqより速いです。 test jsPref を参照してください。
コメント：
- VALUEはSQLのキーワードなので、ここでは値を角括弧で囲みます。
- 文字列値を数値型に変換するには、CAST（）関数を使用する必要があります。
MDNのArray.reduce()のドキュメントに この例 があります。
// Grouping objects by a property
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#Grouping_objects_by_a_property#Grouping_objects_by_a_property
var people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].Push(obj);
return acc;
}, {});
}
var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// {
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }
質問にはいくつかの答えがあり、答えは少し複雑に見えますが、（必要に応じて） Map でグループバイにVanilla Javascriptを使用することをお勧めします。
function groupBy(array, groups, valueKey) {
var map = new Map;
groups = [].concat(groups);
return array.reduce((r, o) => {
groups.reduce((m, k, i, { length }) => {
var child;
if (m.has(o[k])) return m.get(o[k]);
if (i + 1 === length) {
child = Object
.assign(...groups.map(k => ({ [k]: o[k] })), { [valueKey]: 0 });
r.Push(child);
} else {
child = new Map;
}
m.set(o[k], child);
return child;
}, map)[valueKey] += +o[valueKey];
return r;
}, [])
};
var data = [{ 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" }];
console.log(groupBy(data, 'Phase', 'Value'));
console.log(groupBy(data, ['Phase', 'Step'], 'Value'));.as-console-wrapper { max-height: 100% !important; top: 0; }この解決法は任意の関数（キーではない）を取るので、上記の解決法よりも柔軟性があり、 arrow functions を使用できます。これは で使用される λ式 ） _ linq _ ：
Array.prototype.groupBy = function (funcProp) {
return this.reduce(function (acc, val) {
(acc[funcProp(val)] = acc[funcProp(val)] || []).Push(val);
return acc;
}, {});
};
注：Arrayのプロトタイプを拡張するかどうかはあなた次第です。
ほとんどのブラウザでサポートされている例：
[{a:1,b:"b"},{a:1,c:"c"},{a:2,d:"d"}].groupBy(function(c){return c.a;})
矢印機能を使った例（ES6）：
[{a:1,b:"b"},{a:1,c:"c"},{a:2,d:"d"}].groupBy(c=>c.a)
上記の両方の例は以下を返します。
{
"1": [{"a": 1, "b": "b"}, {"a": 1, "c": "c"}],
"2": [{"a": 2, "d": "d"}]
}
突然変異なし
const groupBy = (xs, key) => xs.reduce((acc, x) => Object.assign({}, acc, {
[x[key]]: (acc[x[key]] || []).concat(x)
}), {})
console.log(groupBy(['one', 'two', 'three'], 'length'));
// => {3: ["one", "two"], 5: ["three"]}
私のアプローチを提案したいのですが。まず、グループ化と集計を分けます。プロトタイプの「group by」関数を宣言しましょう。グループ化する配列要素ごとに「ハッシュ」文字列を生成するには、別の関数が必要です。
Array.prototype.groupBy = function(hash){
var _hash = hash ? hash : function(o){return o;};
var _map = {};
var put = function(map, key, value){
if (!map[_hash(key)]) {
map[_hash(key)] = {};
map[_hash(key)].group = [];
map[_hash(key)].key = key;
}
map[_hash(key)].group.Push(value);
}
this.map(function(obj){
put(_map, obj, obj);
});
return Object.keys(_map).map(function(key){
return {key: _map[key].key, group: _map[key].group};
});
}
グループ化が完了したら、必要に応じてデータを集計できます。
data.groupBy(function(o){return JSON.stringify({a: o.Phase, b: o.Step});})
/* aggreagating */
.map(function(el){
var sum = el.group.reduce(
function(l,c){
return l + parseInt(c.Value);
},
0
);
el.key.Value = sum;
return el.key;
});
一般的には動作します。私はクロムコンソールでこのコードをテストしました。そして、気軽に改善して間違いを見つけてください;）
以前の回答に基づく
const groupBy = (prop) => (xs) =>
xs.reduce((rv, x) =>
Object.assign(rv, {[x[prop]]: [...(rv[x[prop]] || []), x]}), {});
あなたの環境がサポートしているのであれば、オブジェクトスプレッド構文で見た方が少し良いです。
const groupBy = (prop) => (xs) =>
xs.reduce((acc, x) => ({
...acc,
[ x[ prop ] ]: [...( acc[ x[ prop ] ] || []), x],
}), {});
ここでは、リデューサーは部分的に形成された戻り値（空のオブジェクトから始まる）を取り、キーが現在のitereeの値から計算される新しいメンバーと共に、前の戻り値の展開されたメンバーで構成されるpropで、その値は現在の値と共にその小道具のすべての値のリストです。
Ceasarの答えは良いですが、配列内の要素の内部プロパティ（文字列の場合は長さ）に対してのみ機能します。
この実装はもっと似ています： このリンク
const groupBy = function (arr, f) {
return arr.reduce((out, val) => {
let by = typeof f === 'function' ? '' + f(val) : val[f];
(out[by] = out[by] || []).Push(val);
return out;
}, {});
};
お役に立てれば...
groupByArray(xs, key) {
return xs.reduce(function (rv, x) {
let v = key instanceof Function ? key(x) : x[key];
let el = rv.find((r) => r && r.key === v);
if (el) {
el.values.Push(x);
}
else {
rv.Push({
key: v,
values: [x]
});
}
return rv;
}, []);
}
これは配列を出力します。
Array.prototype.groupBy = function (groupingKeyFn) {
if (typeof groupingKeyFn !== 'function') {
throw new Error("groupBy take a function as only parameter");
}
return this.reduce((result, item) => {
let key = groupingKeyFn(item);
if (!result[key])
result[key] = [];
result[key].Push(item);
return result;
}, {});
}
var a = [
{type: "video", name: "a"},
{type: "image", name: "b"},
{type: "video", name: "c"},
{type: "blog", name: "d"},
{type: "video", name: "e"},
]
console.log(a.groupBy((item) => item.type));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>一般的なArray.prototype.groupBy()ツールを生成しましょう。多様性のためだけに、再帰的アプローチでのいくつかのHaskellesqueパターンマッチングには、ES6ファンシースプレッド演算子を使用しましょう。また、Array.prototype.groupBy()に、アイテム（e）、インデックス（i）、適用された配列（a）を引数とするコールバックを受け付けるようにしましょう。
Array.prototype.groupBy = function(cb){
return function iterate([x,...xs], i = 0, r = [[],[]]){
cb(x,i,[x,...xs]) ? (r[0].Push(x), r)
: (r[1].Push(x), r);
return xs.length ? iterate(xs, ++i, r) : r;
}(this);
};
var arr = [0,1,2,3,4,5,6,7,8,9],
res = arr.groupBy(e => e < 5);
console.log(res);チェックされた答え - グループ化された解決ではありません、しかし直接的な答えです。
計算されたキー名を持つフィールドによるオブジェクトの配列に対するREAL GROUP BY。
const inputArray = [
{ 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" }
];
var outObject = inputArray.reduce(function(a, e) {
// GROUP BY estimated key (estKey), well, may be a just plain key
// a -- Accumulator result object
// e -- sequentally checked Element, the Element that is tested just at this itaration
// new grouping name may be calculated, but must be based on real value of real field
let estKey = (e['Phase']);
(a[estKey] ? a[estKey] : (a[estKey] = null || [])).Push(e);
return a;
}, {});
console.log(outObject);estKeyで遊ぶ - あなたは一つ以上のフィールドでグループ分けすることができます
また、データを再帰的にグループ化することもできます。たとえば、最初はPhase、次にStepフィールドでグループ化します。
自分で確認して、実行してください。他の人と一緒にゲームをプレイしましょう、？もっと詳しく
あなたが成功することを願っています。
その他のコメントを見るよろしくお願いします。
let groupbyKeys = function(arr, ...keys) {
let keysFieldName = keys.join();
return arr.map(ele => {
let keysField = {};
keysField[keysFieldName] = keys.reduce((keyValue, key) => {
return keyValue + ele[key]
}, "");
return Object.assign({}, ele, keysField);
}).reduce((groups, ele) => {
(groups[ele[keysFieldName]] = groups[ele[keysFieldName]] || [])
.Push([ele].map(e => {
if (keys.length > 1) {
delete e[keysFieldName];
}
return e;
})[0]);
return groups;
}, {});
};
console.log(groupbyKeys(array, 'Phase'));
console.log(groupbyKeys(array, 'Phase', 'Step'));
console.log(groupbyKeys(array, 'Phase', 'Step', 'Task'));
ES6 reduceベースのバージョンversionで、関数iterateeをサポート。
iteratee関数が提供されていない場合でも、期待通りに動作します。
const data = [{id: 1, score: 2},{id: 1, score: 3},{id: 2, score: 2},{id: 2, score: 4}]
const group = (arr, k) => arr.reduce((r, c) => (r[c[k]] = [...r[c[k]] || [], c], r), {});
const groupBy = (arr, k, fn = () => true) =>
arr.reduce((r, c) => (fn(c[k]) ? r[c[k]] = [...r[c[k]] || [], c] : null, r), {});
console.log(group(data, 'id')) // grouping via `reduce`
console.log(groupBy(data, 'id')) // same result if `fn` is omitted
console.log(groupBy(data, 'score', x => x > 2 )) // group with the iterateeOP質問の文脈では：
const data = [ { 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" } ]
const groupBy = (arr, k) => arr.reduce((r, c) => (r[c[k]] = [...r[c[k]] || [], c], r), {});
const groupWith = (arr, k, fn = () => true) =>
arr.reduce((r, c) => (fn(c[k]) ? r[c[k]] = [...r[c[k]] || [], c] : null, r), {});
console.log(groupBy(data, 'Phase'))
console.log(groupWith(data, 'Value', x => x > 30 )) // group by `Value` > 30グループ化を逆にしてvaluesをkeysとして、そしてkeysをgrouped valuesとして使用するもう1つの ES6 バージョン：
const data = [{A: "1"}, {B: "10"}, {C: "10"}]
const groupKeys = arr =>
arr.reduce((r,c) => (Object.keys(c).map(x => r[c[x]] = [...r[c[x]] || [], x]),r),{});
console.log(groupKeys(data))注： 関数は、簡潔にするために、またそのアイデアを説明するために、短い形式（1行）で掲載されています。それらを拡張したり、エラーチェックなどを追加することができます。
ソート機能付き
export const groupBy = function groupByArray(xs, key, sortKey) {
return xs.reduce(function(rv, x) {
let v = key instanceof Function ? key(x) : x[key];
let el = rv.find(r => r && r.key === v);
if (el) {
el.values.Push(x);
el.values.sort(function(a, b) {
return a[sortKey].toLowerCase().localeCompare(b[sortKey].toLowerCase());
});
} else {
rv.Push({ key: v, values: [x] });
}
return rv;
}, []);
};
サンプル：
var state = [
{
name: "Arkansas",
population: "2.978M",
flag:
"https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg",
category: "city"
},{
name: "Crkansas",
population: "2.978M",
flag:
"https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg",
category: "city"
},
{
name: "Balifornia",
population: "39.14M",
flag:
"https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg",
category: "city"
},
{
name: "Florida",
population: "20.27M",
flag:
"https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg",
category: "airport"
},
{
name: "Texas",
population: "27.47M",
flag:
"https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg",
category: "landmark"
}
];
console.log(JSON.stringify(groupBy(state,'category','name')));
これは、nullメンバーでは壊れないES6バージョンです。
function groupBy (arr, key) {
return (arr || []).reduce((acc, x = {}) => ({
...acc,
[x[key]]: [...acc[x[key]] || [], x]
}), {})
}
@mortb、@ jmarceliからの回答および この投稿からの 、
私はJSON.stringify()を利用して 基本値 group byの複数列を識別します。
第三者なし
function groupBy(list, keyGetter) {
const map = new Map();
list.forEach((item) => {
const key = keyGetter(item);
if (!map.has(key)) {
map.set(key, [item]);
} else {
map.get(key).Push(item);
}
});
return map;
}
const pets = [
{type:"Dog", age: 3, name:"Spot"},
{type:"Cat", age: 3, name:"Tiger"},
{type:"Dog", age: 4, name:"Rover"},
{type:"Cat", age: 3, name:"Leo"}
];
const grouped = groupBy(pets,
pet => JSON.stringify({ type: pet.type, age: pet.age }));
console.log(grouped);
Lodashサードパーティ製
const pets = [
{type:"Dog", age: 3, name:"Spot"},
{type:"Cat", age: 3, name:"Tiger"},
{type:"Dog", age: 4, name:"Rover"},
{type:"Cat", age: 3, name:"Leo"}
];
let rslt = _.groupBy(pets, pet => JSON.stringify(
{ type: pet.type, age: pet.age }));
console.log(rslt);
Scott Sauyetの answer に加えて、1つの値だけをグループ化するのではなく、value1、value2などをグループ化するために自分の関数を使用する方法をコメントで求めている人もいました。
必要なのは彼のsum関数を編集することだけです。
DataGrouper.register("sum", function(item) {
return _.extend({}, item.key,
{VALUE1: _.reduce(item.vals, function(memo, node) {
return memo + Number(node.VALUE1);}, 0)},
{VALUE2: _.reduce(item.vals, function(memo, node) {
return memo + Number(node.VALUE2);}, 0)}
);
});
メインのもの（DataGrouper）は変更しません。
var DataGrouper = (function() {
var has = function(obj, target) {
return _.any(obj, function(value) {
return _.isEqual(value, target);
});
};
var keys = function(data, names) {
return _.reduce(data, function(memo, item) {
var key = _.pick(item, names);
if (!has(memo, key)) {
memo.Push(key);
}
return memo;
}, []);
};
var group = function(data, names) {
var stems = keys(data, names);
return _.map(stems, function(stem) {
return {
key: stem,
vals:_.map(_.where(data, stem), function(item) {
return _.omit(item, names);
})
};
});
};
group.register = function(name, converter) {
return group[name] = function(data, names) {
return _.map(group(data, names), converter);
};
};
return group;
}());
@Ceasar Bautista という当初の考えに基づいて、私はコードを修正し、TypeScriptを使用してgroupBy関数を作成しました。
static groupBy(data: any[], comparator: (v1: any, v2: any) => boolean, onDublicate: (uniqueRow: any, dublicateRow: any) => void) {
return data.reduce(function (reducedRows, currentlyReducedRow) {
let processedRow = reducedRows.find(searchedRow => comparator(searchedRow, currentlyReducedRow));
if (processedRow) {
// currentlyReducedRow is a dublicateRow when processedRow is not null.
onDublicate(processedRow, currentlyReducedRow)
} else {
// currentlyReducedRow is unique and must be pushed in the reducedRows collection.
reducedRows.Push(currentlyReducedRow);
}
return reducedRows;
}, []);
};
この関数は、行を比較して公開鍵を見つけるコールバック（コンパレータ）と、その公開鍵を集約する2番目のコールバック（onDublicate）を受け取ります。
使用例
data = [
{ name: 'a', value: 10 },
{ name: 'a', value: 11 },
{ name: 'a', value: 12 },
{ name: 'b', value: 20 },
{ name: 'b', value: 1 }
]
private static demoComparator = (v1: any, v2: any) => {
return v1['name'] === v2['name'];
}
private static demoOnDublicate = (uniqueRow, dublicateRow) => {
uniqueRow['value'] += dublicateRow['value'];
};
呼びかけ
groupBy(data, demoComparator, demoOnDublicate)
それによって値の合計を計算することによってグループを実行します。
{name: "a", value: 33}
{name: "b", value: 21}
これらのコールバック関数をプロジェクトに必要な数だけ作成し、必要に応じて値を集計することができます。たとえばある場合には、データを合計するのではなく、2つの配列をマージする必要がありました。
let x = [
{
"id": "6",
"name": "SMD L13",
"equipmentType": {
"id": "1",
"name": "SMD"
}
},
{
"id": "7",
"name": "SMD L15",
"equipmentType": {
"id": "1",
"name": "SMD"
}
},
{
"id": "2",
"name": "SMD L1",
"equipmentType": {
"id": "1",
"name": "SMD"
}
}
];
function groupBy(array, property) {
return array.reduce((accumulator, current) => {
const object_property = current[property];
delete current[property]
let classified_element = accumulator.find(x => x.id === object_property.id);
let other_elements = accumulator.filter(x => x.id !== object_property.id);
if (classified_element) {
classified_element.children.Push(current)
} else {
classified_element = {
...object_property,
'children': [current]
}
}
return [classified_element, ...other_elements];
}, [])
}
console.log( groupBy(x, 'equipmentType') )
/* output
[
{
"id": "1",
"name": "SMD",
"children": [
{
"id": "6",
"name": "SMD L13"
},
{
"id": "7",
"name": "SMD L15"
},
{
"id": "2",
"name": "SMD L1"
}
]
}
]
*/
配列にforEachを使用して、アイテムの新しいグループを作成することができます。これはFlowTypeアノテーションを使ってそれを行う方法です。
// @flow
export class Group<T> {
tag: number
items: Array<T>
constructor() {
this.items = []
}
}
const groupBy = (items: Array<T>, map: (T) => number) => {
const groups = []
let currentGroup = null
items.forEach((item) => {
const tag = map(item)
if (currentGroup && currentGroup.tag === tag) {
currentGroup.items.Push(item)
} else {
const group = new Group<T>()
group.tag = tag
group.items.Push(item)
groups.Push(group)
currentGroup = group
}
})
return groups
}
export default groupBy
Jestテストは次のようになります。
// @flow
import groupBy from './groupBy'
test('groupBy', () => {
const items = [
{ name: 'January', month: 0 },
{ name: 'February', month: 1 },
{ name: 'February 2', month: 1 }
]
const groups = groupBy(items, (item) => {
return item.month
})
expect(groups.length).toBe(2)
expect(groups[1].items[1].name).toBe('February 2')
})
このメソッドはunderscore.jsから借りました fiddler
window.helpers=(function (){
var lookupIterator = function(value) {
if (value == null){
return function(value) {
return value;
};
}
if (typeof value === 'function'){
return value;
}
return function(obj) {
return obj[value];
};
},
each = function(obj, iterator, context) {
var breaker = {};
if (obj == null) return obj;
if (Array.prototype.forEach && obj.forEach === Array.prototype.forEach) {
obj.forEach(iterator, context);
} else if (obj.length === +obj.length) {
for (var i = 0, length = obj.length; i < length; i++) {
if (iterator.call(context, obj[i], i, obj) === breaker) return;
}
} else {
var keys = []
for (var key in obj) if (Object.prototype.hasOwnProperty.call(obj, key)) keys.Push(key)
for (var i = 0, length = keys.length; i < length; i++) {
if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return;
}
}
return obj;
},
// An internal function used for aggregate "group by" operations.
group = function(behavior) {
return function(obj, iterator, context) {
var result = {};
iterator = lookupIterator(iterator);
each(obj, function(value, index) {
var key = iterator.call(context, value, index, obj);
behavior(result, key, value);
});
return result;
};
};
return {
groupBy : group(function(result, key, value) {
Object.prototype.hasOwnProperty.call(result, key) ? result[key].Push(value) : result[key] = [value];
})
};
})();
var arr=[{a:1,b:2},{a:1,b:3},{a:1,b:1},{a:1,b:2},{a:1,b:3}];
console.dir(helpers.groupBy(arr,"b"));
console.dir(helpers.groupBy(arr,function (el){
return el.b>2;
}));
私は、受け入れられた答えを拡張して、複数のプロパティによるグループ化、その後の追加、およびそれを突然変異のない純粋に機能的なものにします。 https://stackblitz.com/edit/TypeScript-ezydzv でデモを参照してください。
export interface Group {
key: any;
items: any[];
}
export interface GroupBy {
keys: string[];
thenby?: GroupBy;
}
export const groupBy = (array: any[], grouping: GroupBy): Group[] => {
const keys = grouping.keys;
const groups = array.reduce((groups, item) => {
const group = groups.find(g => keys.every(key => item[key] === g.key[key]));
const data = Object.getOwnPropertyNames(item)
.filter(prop => !keys.find(key => key === prop))
.reduce((o, key) => ({ ...o, [key]: item[key] }), {});
return group
? groups.map(g => (g === group ? { ...g, items: [...g.items, data] } : g))
: [
...groups,
{
key: keys.reduce((o, key) => ({ ...o, [key]: item[key] }), {}),
items: [data]
}
];
}, []);
return grouping.thenby ? groups.map(g => ({ ...g, items: groupBy(g.items, grouping.thenby) })) : groups;
};
以下の関数は、任意のフィールドのgroupBy（および合計値 - OPが必要とするもの）を可能にします。解決策として、グループ化されたcmpに従って2つのオブジェクトを比較するためにfields関数を定義します。 let w=...では、サブセットオブジェクトxフィールドのコピーを作成します。 y[sumBy]=+y[sumBy]+(+x[sumBy])では、文字列を数値にキャストするために '+'を使います。
function groupBy(data, fields, sumBy='Value') {
let r=[], cmp= (x,y) => fields.reduce((a,b)=> a && x[b]==y[b], true);
data.forEach(x=> {
let y=r.find(z=>cmp(x,z));
let w= [...fields,sumBy].reduce((a,b) => (a[b]=x[b],a), {})
y ? y[sumBy]=+y[sumBy]+(+x[sumBy]) : r.Push(w);
});
return r;
}
const d = [
{ 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" }
];
function groupBy(data, fields, sumBy='Value') {
let r=[], cmp= (x,y) => fields.reduce((a,b)=> a && x[b]==y[b], true);
data.forEach(x=> {
let y=r.find(z=>cmp(x,z));
let w= [...fields,sumBy].reduce((a,b) => (a[b]=x[b],a), {})
y ? y[sumBy]=+y[sumBy]+(+x[sumBy]) : r.Push(w);
});
return r;
}
// TEST
let p=(t,o) => console.log(t, JSON.stringify(o));
console.log('GROUP BY:');
p('Phase', groupBy(d,['Phase']) );
p('Step', groupBy(d,['Step']) );
p('Phase-Step', groupBy(d,['Phase', 'Step']) );
p('Phase-Task', groupBy(d,['Phase', 'Task']) );
p('Step-Task', groupBy(d,['Step', 'Task']) );
p('Phase-Step-Task', groupBy(d,['Phase','Step', 'Task']) );ES6を使用した厄介で読みにくいソリューションを次に示します。
export default (array, key) => {
return array.reduce(
(r, v, _, __, k = v[key]) => ((r[k] || (r[k] = [])).Push(v), r),
{}
);
};
私は declarative-jsgroupByをチェックします。あなたが探しているものを正確に実行するようです。それも：
- 非常に高性能（パフォーマンス ベンチマーク ）
- typeScriptで記述されているため、すべての入力が含まれます。
- サードパーティの配列のようなオブジェクトを使用することは強制されません。
import { Reducers } from 'declarative-js'
import groupBy = Reducers.groupBy
import Map = Reducers.Map
const data = [
[
{ 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" }
]
data.reduce(groupBy(element=> element.Step), Map())
data.reduce(groupBy('Step'), Map())
あなたはそれを次のようにすることができます。私はちょうど新しい配列を作り、 groupBy functionからそれを返しました。 .map functionによるループからの計算数
var arr = [
{ 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" }
];
var groupBy = (arr, pahse, step='') => {
var pahseArr = [];
var resultArr = [];
arr.map((item)=>{
var pushed = false;
pahseArr.map((ele)=>{
if(ele===item.Phase){
pushed = true;
}
})
if(!pushed){
pahseArr.Push(item.Phase);
}
})
pahseArr.map((item)=>{
var sum = 0;
arr.map((ele)=>{
if(ele.Phase===item){
sum += parseFloat(ele.Value)
}
})
resultArr.Push({
Phase: item,
Value: sum
})
})
if(step!=''){
var resultArr = [];
pahseArr.map((item)=>{
var stepArr = [];
arr.map((item2)=>{
var pushed = false;
stepArr.map((ele)=>{
if(ele===item2.Step){
pushed = true;
}
})
if(!pushed){
stepArr.Push(item2.Step);
}
})
stepArr.map((item1)=>{
var sum = 0;
arr.map((ele)=>{
if(ele.Step===item1 && ele.Phase===item){
sum += parseFloat(ele.Value)
}
})
resultArr.Push({
Phase: item,
Step: item1,
Value: sum
})
})
})
return resultArr;
}
return resultArr;
}
console.log(groupBy(arr, 'Phase'));
console.log(groupBy(arr, 'Phase', 'Step'));
data = [{id:1, name:'BMW'}, {id:2, name:'AN'}, {id:3, name:'BMW'}, {id:1, name:'NNN'}]
key = 'id'//try by id or name
data.reduce((previous, current)=>{
previous[current[key]] && previous[current[key]].length != 0 ? previous[current[key]].Push(current) : previous[current[key]] = new Array(current)
return previous;
}, {})