オブジェクトの配列をグループ化する最も効率的な方法


507

配列内のオブジェクトをグループ化する最も効率的な方法は何ですか?

たとえば、次のオブジェクトの配列があるとします。

[ 
    { 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メソッドのように、「分割」するのではなく「マージ」する必要がないためです。

私が探しているものは、特定の値を合計することができます(要求された場合)。

だから私がgroupbyをしたなら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を使用して、結果のオブジェクトをループして合計を自分で行う必要がありますか?

回答:


755

外部ライブラリを避けたい場合は、次の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"]}


18
私はこのように変更します: `` `return xs.reduce(function(rv、x){var v = key instanceof Function?key(x):x [key];(rv [v] = rv [v] || [])。push(x); return rv;}、{}); `` `コールバック関数が並べ替え基準を返すことを許可
y_nk

110
以下は、オブジェクトではなく配列を出力するものです: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;}、[]); }
tomitrescak

24
素晴らしい、ちょうど私が必要としたもの。他のケースの誰もがそれを必要とするには、ここでの活字体の署名があります:var groupBy = function<TItem>(xs: TItem[], key: string) : {[key: string]: TItem[]} { ...
マイケル・サンディノ

4
何が価値があるのか​​については、find()がおそらくO(n)であるため、tomitrescakのソリューションは便利ですが、効率が大幅に低下します。答えはO(n)で、reduce(オブジェクトの割り当てはO(1)、プッシュも同じ)ですが、コメントはO(n)* O(n)またはO(n ^ 2)または最小O(nlgn)
narthur157

21
誰もが興味を持っているならば、私はこの機能のより読みやすく、注釈付きバージョンを作り、要旨にそれを置く:gist.github.com/robmathers/1830ce09695f759bf2c4df15c29dd22d私は実際にここで何が起こっているか理解するため、それが役に立ったと評価してい。
robmathers

228

ES6マップオブジェクトの使用:

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


@mortb、get()メソッドを呼び出さずに取得する方法は?キーを渡さずに出力が表示されるようにしたい
Fai Zal Dong

@FaiZalDong:あなたのケースに何が最適かわかりませんか?console.log(grouped.entries());jsfiddleの例を書くと、キーと値の配列のように動作するイテラブルが返されます。それを試して、それが役立つかどうかを確認できますか?
mortb 2017

7
あなたも試すことができますconsole.log(Array.from(grouped));
mortb '28 / 12/17

私はこの答えが大好きです。非常に柔軟です
benshabatnoam

グループ内の要素の数を確認するには:Array.from(groupBy(jsonObj, item => i.type)).map(i => ( {[i[0]]: i[1].length} ))
AhmetŞimşekMar

105

ES6の場合:

const groupBy = (items, key) => items.reduce(
  (result, item) => ({
    ...result,
    [item[key]]: [
      ...(result[item[key]] || []),
      item,
    ],
  }), 
  {},
);

3
慣れるには少し時間がかかりますが、ほとんどのC ++テンプレートも同様です
Levi Haskell

2
私は頭を悩ませましたが、それでも世界でそれがどのように機能するのか理解できませんでした...result。だから今は眠れない。

8
エレガントですが、大きなアレイでは非常に遅くなります。
infinity1975、

4
笑これは何
ですか

1
簡単な解決策。ありがとう
エゼキエルタバレス

59

が、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で実際の動作を確認できます。

Underscoreで何をするかhasは見当たらないが、見逃していたかもしれない。これはとほとんど同じですが_.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した名前に従ってのプロパティとして保存され、ローカル参照だけが必要な場合にも返されます。

まあそれは多くの説明です。コードはかなり単純明快です。


こんにちは。値でグループ化して合計することはできますが、値1と値2と値3で合計したい場合は、uに解決策がありますか?
SAMUEL OSPINA 2016年

@SAMUELOSPINAこれまでにこれを行う方法を見つけましたか?
howMuchCheeseIsTooMuchCheese 2017

50

私はlodash groupByをチェックしますが、あなたが探していることを正確に実行しているようです。また、非常に軽量で本当にシンプルです。

フィドルの例:https : //jsfiddle.net/r7szvt5k/

配列名がarrgroupByである場合、lodashは次のとおりです。

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

1
この答えは問題ではありませんか?lodash _.groupByの結果が、OPが要求している結果の形式になっていない方法はいくつかあります。(1)結果は配列ではありません。(2)「値」がlodashオブジェクトの結果の「キー」になりました。
mg1075 2018年

44

これはおそらくlinq.jsJavaScriptでの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();

ここでグループ化するときに複数のプロパティを使用できますかGroupBy(function(x){ return x.Phase; })
Amit

38

ES6はMapからビルドできarray.reduce()ます。

const groupedMap = initialArray.reduce(
    (entryMap, e) => entryMap.set(e.id, [...entryMap.get(e.id)||[], e]),
    new Map()
);

これには、他のソリューションに比べていくつかの利点があります。

  • ライブラリは必要ありません(例:とは異なります_.groupBy()
  • MapオブジェクトではなくJavaScriptを取得します(例:によって返される_.groupBy())。これには、次のような多くの利点があります
    • アイテムが最初に追加された順序を記憶しています。
    • キーは文字列だけでなく、どのようなタイプでもかまいません。
  • A 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()
);

1
なぜこれ以上票が出ないのか分かりません。簡潔で読みやすく(私には)、効率的に見えます。 IE11では動作しませんが、改造はそれほど難しくありません(a.reduce(function(em, e){em.set(e.id, (em.get(e.id)||[]).concat([e]));return em;}, new Map())およそ)
unbob


18

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]);

jsFiddleでこの例試してください。

ところで:大きな配列(100000レコード以上)では、Alasqlはより高速なLinqを使用しています。jsPrefでのテスト参照してください。

コメント:

  • VALUEはSQLのキーワードなので、ここでは値を角括弧で囲みます
  • 文字列値を数値型に変換するには、CAST()関数を使用する必要があります。

18
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]
        };
    });
};

15

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

14

質問にはいくつかの回答があり、回答は少し複雑に見えますが、ネストされた(必要な場合)を使用してgroup-byにバニラJavascriptを使用することをお勧めしますMap

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; }


9

突然変異なし:

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

8

このソリューションは、任意の関数(キーではない)を取るため、上記のソリューションよりも柔軟性が高く、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"}]
}

ES6ソリューションはとても気に入りました。Arrayプロトタイプを拡張せずに少し単純化:let key = 'myKey'; let newGroupedArray = myArrayOfObjects.reduce(function (acc, val) { (acc[val[key]] = acc[val[key]] || []).push(val); return acc;});
caneta

8

私のアプローチを提案したいと思います。まず、グループ化と集約を分離します。プロトタイプの「グループ化」関数を宣言しましょう。別の関数を使用して、グループ化する各配列要素の「ハッシュ」文字列を生成します。

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;
    });

一般的にはそれが動作します。このコードをChromeコンソールでテストしました。間違いを改善して見つけてください;)


よろしくお願いします!アプローチが大好きで、私のニーズに完全に適合しています(集約する必要はありません)。
アベロウ2014年

:私はあなたが)(プットであなたの行を変更したいと思いますmap[_hash(key)].key = key;map[_hash(key)].key = _hash(key);
Scotty.NET 2015

6

次のようなものがあるとします。

[{id:1, cat:'sedan'},{id:2, cat:'sport'},{id:3, cat:'sport'},{id:4, cat:'sedan'}]

これを行うことにより: const categories = [...new Set(cars.map((car) => car.cat))]

あなたはこれを得るでしょう: ['sedan','sport']

説明: 1.最初に、配列を渡して新しいセットを作成します。Setは一意の値しか許可しないため、重複はすべて削除されます。

  1. これで重複はなくなりました。spread演算子を使用して配列に変換し直します...

セットドキュメント:https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set Spread OperatorDoc:https : //developer.mozilla.org/en-US/docs/Web/JavaScript /リファレンス/オペレーター/ Spread_syntax


私はあなたの答えがとても好きです、それは最も短いものですが、私はまだ論理を理解していません、特にここでグループ化を行うのは誰ですか?スプレッド演算子(...)ですか?または 'new Set()'?説明してください...ありがとう
Ivan

1
1.まず、配列を渡して新しいセットを作成します。Setは一意の値しか許可しないため、重複はすべて削除されます。2.次に、重複は、我々が広がり演算子を使用して戻って配列に変換するつもりだ、なくなっている...セットドク:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...のスプレッド演算子:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
YAGO Gehres

わかりました、わかりました...説明ありがとうございます:)
イワン

どういたしまして!
Yago Gehres

6

チェックされた答え-浅いグループ化。還元を理解するのはとてもいいことです。質問は、追加の集計計算の問題も提供します。

これは、1)計算されたキー名と2)目的のキーのリストを提供し、その一意の値をSQL GROUPのようなルートキーに変換することでグループ化をカスケードするための完全なソリューションであるいくつかのフィールドによるオブジェクトの配列のREAL GROUP BYです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フィールドなどでグループ化します。さらに、ファットレストデータを吹き飛ばします。

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

/**
 * Small helper to get SHALLOW copy of obj WITHOUT prop
 */
const rmProp = (obj, prop) => ( (({[prop]:_, ...rest})=>rest)(obj) )

/**
 * Group Array by key. Root keys of a resulting array is value
 * of specified key.
 *
 * @param      {Array}   src     The source array
 * @param      {String}  key     The by key to group by
 * @return     {Object}          Object with groupped objects as values
 */
const grpBy = (src, key) => src.reduce((a, e) => (
  (a[e[key]] = a[e[key]] || []).push(rmProp(e, key)),  a
), {});

/**
 * Collapse array of object if it consists of only object with single value.
 * Replace it by the rest value.
 */
const blowObj = obj => Array.isArray(obj) && obj.length === 1 && Object.values(obj[0]).length === 1 ? Object.values(obj[0])[0] : obj;

/**
 * Recoursive groupping with list of keys. `keyList` may be an array
 * of key names or comma separated list of key names whom UNIQUE values will
 * becomes the keys of the resulting object.
 */
const grpByReal = function (src, keyList) {
  const [key, ...rest] = Array.isArray(keyList) ? keyList : String(keyList).trim().split(/\s*,\s*/);
  const res = key ? grpBy(src, key) : [...src];
  if (rest.length) {
for (const k in res) {
  res[k] = grpByReal(res[k], rest)
}
  } else {
for (const k in res) {
  res[k] = blowObj(res[k])
}
  }
  return res;
}

console.log( JSON.stringify( grpByReal(inputArray, 'Phase, Step, Task'), null, 2 ) );


5
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;
    }, []);
}

これは配列を出力します。


4

以前の回答に基づく

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],
  }), {});

ここで、レデューサーは部分的に形成された戻り値(空のオブジェクトで始まる)を受け取り、前の戻り値の展開されたメンバーで構成されるオブジェクトと、現在の反復先の値からキーが計算される新しいメンバーを返しますpropその値は、そのプロップのすべての値と現在の値のリストです。


3

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>


3

ES6を使用した厄介で読みにくいソリューションを次に示します。

export default (arr, key) => 
  arr.reduce(
    (r, v, _, __, k = v[key]) => ((r[k] || (r[k] = [])).push(v), r),
    {}
  );

このどうするか尋ねる人のためにも仕事を、ここでの説明は次のとおりです。

  • どちら=>にも無料がありますreturn

  • このArray.prototype.reduce関数は最大4つのパラメーターを受け取ります。そのため、5番目のパラメーターが追加され、デフォルト値を使用してパラメーター宣言レベルでグループ(k)の安価な変数宣言を行うことができます。(はい、これは魔術です)

  • 現在のグループが前の反復で存在しない場合、新しい空の配列を作成します。((r[k] || (r[k] = []))これは、左端の式、つまり既存の配列または空の配列に評価されます。これが、pushその式の直後にある理由です。どちらの方法でも配列を取得します。

  • がある場合return、コンマ,演算子は左端の値を破棄し、このシナリオで調整された前のグループを返します。

同じことを行う、より理解しやすいバージョンは次のとおりです。

export default (array, key) => 
  array.reduce((previous, currentItem) => {
    const group = currentItem[key];
    if (!previous[group]) previous[group] = [];
    previous[group].push(currentItem);
    return previous;
  }, {});

2
これについて少し説明してもらえますか。完璧に機能します
Nuwan Dammika '29 / 10/29

@NuwanDammika-両方で=>無料の「戻り値」があります-リデュース関数は最大4つのパラメーターを受け取ります。これが、グループ(k)の安価な変数宣言ができるように、5番目のパラメーターが追加されている理由です。-以前の値に現在のグループがない場合、新しい空のグループを作成します((r [k] ||(r [k] = []))これは左端の式に評価され、それ以外の場合は配列または空の配列、これがその式の直後にプッシュが行われる理由です-戻りがあると、コンマ演算子は左端の値を破棄し、調整された前のグループを返します
darkndream

2

汎用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);


2

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;
    }, {});
};

お役に立てれば...


2

@ mortb、@ jmarceliの回答、およびこの投稿から

JSON.stringify()PRIMITIVE VALUEのアイデンティティであることを利用しますグループ化の複数の列の。

サードパーティなし

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);

keyGetterが未定義を返す
アスバーアリ2018

@AsbarAli Chromeのコンソールでバージョンをテストしました-バージョン66.0.3359.139(公式ビルド)(64ビット)。そして、すべてがうまくいきます。デバッグブレークポイントを設定して、keyGetterが未定義である理由を確認してください。おそらく、ブラウザのバージョンが原因です。
Pranithan T.

2

reduce関数をサポートするES6ベースのバージョン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 iteratee

OPの質問に関連して:

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

別のES6のグループ化を逆転させ、使用するバージョンvaluesとしてkeysおよびkeysなどgrouped values

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行)で投稿されています。それらを拡張し、エラーチェックなどを追加できます。


2

declarative-jsをチェックします groupByますが、それはあなたが探していることを正確に行うようです。それも:

  • 非常に高性能(パフォーマンス ベンチマーク
  • 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());

1
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'));

1

これは、nullメンバーで壊れないES6バージョンです

function groupBy (arr, key) {
  return (arr || []).reduce((acc, x = {}) => ({
    ...acc,
    [x[key]]: [...acc[x[key]] || [], x]
  }), {})
}

1

Scott Sauyetの答えに追加するために、一部の人々はコメントで、1つの値だけをグループ化するのではなく、関数を使用してvalue1、value2などをグループ化する方法を尋ねていました。

必要なのは、彼の合計関数を編集することだけです。

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;
}());

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')));
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.