map,reduce,filterで集計処理を簡潔に書きたい

Question

###前提・実現したいこと
JavaScriptで以下のようなmap,reduce,filterを使って集計するコードを書いています。
name単位でvalueを合算するものです。
もっと簡潔にエレガントに書けないものでしょうか？

自分ならこう書くといった例を示していただけると幸いです。

###ソースコード

var src = [{'name':'abc','value':100},{'name':'def','value':50},{'name':'abc','value':123},{'name':'hij','value':789},{'name':'def','value':001}];

var sorted = src.sort(function(a, b) {
  if (a.name > b.name){
    return 1;
  }else{
    return -1;
  }
});

var result = sorted.map(function(entry){ return entry.name; })           // 同じnameの重複をなくす
                          .filter(function (x, i, self) {
                            return self.indexOf(x) === i;
                            })
                      .map(function(name) {                // 重複を排除した配列で繰り返し 
                          return sorted.reduce(function(prev,current) {   // ソートした配列(重複を含む）を元に集計
                                if (current.name===name){
                                  if (prev.name===current.name) {           // 前回のものと今回のものが同じnameであれば合算
                                    var entry = {};                         // 元の配列を壊さないように新しくentryを生成する
                                    entry.name = name;
                                    entry.value = current.value + prev.value;
                                    return entry;
                                  }
                                  return current;

                                }
                                return prev;
                              },{})
                        });


console.log(result);

[Object { name="abc",  value=223}, Object { name="def",  value=51}, Object { name="hij",  value=789}]

Comments

[think49]

name は String 型である事が確定しているのでしょうか。Object 型が来るケースは想定されますか。

[stakezaki]

String型確定です

[think49]

であれば、オブジェクト初期化子を利用できますね。回答にてコードを書きました。

Answer 1

var src = [{'name':'def','value':50},{'name':'abc','value':100},{'name':'abc','value':123},{'name':'hij','value':789},{'name':'def','value':001}];
var sum = {};
src.forEach(o => sum[o.name] = (sum[o.name] || 0) + o.value);
var res = Object.keys(sum).sort((a, b) => a > b ? 1 : -1).map(name => ({name, value: sum[name]}));
console.log(res);

こんな感じとか。

Comments

[stakezaki]

エレガントですね〜

Answer 2

Array.prototype.reduce 単体

要件を達成する方法としてはおそらく最速。
(Array.prototype.reduce を使わなければもっと速いですが、reduce を使う条件なのでそこは置いておきます。)

'use strict';
var src = [{'name':'abc','value':100},{'name':'def','value':50},{'name':'abc','value':123},{'name':'hij','value':789},{'name':'def','value':1}];

var results = src.reduce(function (results, current) {
  for (var i = 0, l = results.length, name = current.name, object; i < l; ++i) {
    object = results[i];

    if (object.name === name) {
      object.value += current.value;
      return results;
    }
  }

  results.push(current);

  return results;
}, []);

console.log(JSON.stringify(results)); // [{"name":"abc","value":223},{"name":"def","value":51},{"name":"hij","value":789}]

オブジェクト初期化子

このコードは name が String 型であることが確定している必要があります。

'use strict';
var src = [{'name':'abc','value':100},{'name':'def','value':50},{'name':'abc','value':123},{'name':'hij','value':789},{'name':'def','value':1}];

var object = src.reduce(function (object, current) {
  var name = current.name;

  if (object.hasOwnProperty(name)) {
    object[name] += current.value;
  } else {
    object[name] = current.value;
  }

  return object;
}, {});

var results = Object.keys(object).map(function (key) {
  return {name: key, value: object[key]};
});

console.log(JSON.stringify(results)); // [{"name":"abc","value":223},{"name":"def","value":51},{"name":"hij","value":789}]

オブジェクト初期化子 + Object.entries (ES8)

先行仕様(ES8/ES2017)ですが、Object.entries を利用するとオブジェクト初期化子のコードを更にエレガントに書けます。
Object.entries は Polyfill コードがあるので、現行でも使おうと思えば使えます。

• 19.1.2.17 Object.entries - ECMAScript® 2017 Language Specification
• Object.entries() - JavaScript | MDN

'use strict';
var src = [{'name':'abc','value':100},{'name':'def','value':50},{'name':'abc','value':123},{'name':'hij','value':789},{'name':'def','value':1}];

var results = Object.entries(src.reduce((object, current) => {
  var name = current.name;

  if (object.hasOwnProperty(name)) {
    object[name] += current.value;
  } else {
    object[name] = current.value;
  }

  return object;
}, {})).map(entry=>{
  return {name: entry[0], value: entry[1]};
});

console.log(JSON.stringify(results)); // [[{"name":"abc","value":223},{"name":"def","value":51},{"name":"hij","value":789}]

new Map (ES6)

オブジェクト初期化子で「name が String 型でなければならない」欠点を new Map で克服しており、可搬性が最も高いと思われます。
構造を変えていいのなら、Map.prototype.entries の出力値で十分かもしれません。

'use strict';
var src = [{'name':'abc','value':100},{'name':'def','value':50},{'name':'abc','value':123},{'name':'hij','value':789},{'name':'def','value':1}],
    map = new Map,
    results = [];

src.reduce(function (map, current) {
  var name = current.name;

  map.set(name, map.has(name) ? map.get(name) + current.value : current.value);

  return map;
}, map).forEach(function (value, key, map) {
  this.push({name: key, value: value});
}, results);

console.log(JSON.stringify(results)); // [[{"name":"abc","value":223},{"name":"def","value":51},{"name":"hij","value":789}]
console.log(JSON.stringify([...map.entries()])); // [["abc",223],["def",51],["hij",789]]

更新履歴

• 2016/12/28 00:08 new Mapコードを Object.keys -> Map#forEach
• 2016/12/28 00:32 new Mapコードを三項演算子を使ったコードに修正
• 2016/12/28 01:38 オブジェクト初期化子 + Object.entriesのコード追記

Re: stakezaki さん

Comments

[stakezaki]

オブジェクト初期化子の例が私が一番イメージしていたものに近いです。
また、ES6の例も示してくださり、大変勉強になります。
reduce縛りのような質問になっていましたが、実は短くて高速でエレガントであれば何でもよかったのです。