JavaScriptのreduce関数が便利、けど動きが理解しづらいのでサンプルを列挙

JavaScriptのreduce関数がとても便利なのです。

たとえば

ユニークはこんな感じ

var unique = function(array) {
    return array.reduce(function(a, b) {
        if (a.indexOf(b) === -1) {
            a.push(b);
        }
        return a;
    }, []);
};

関数の外部に結果を格納する変数を作らなくていいのが良いです。 *1

メジャーな例

集計

reduce関数は結構有用っていうお話 - あと味 に合計、最大値、最小値、平均の例があります。

ユニーク

How to get an array of unique values from an array containing duplicates in JavaScript? - Stack Overflow には重複除去の例はここからパクリました。

例

ほかにも例を挙げていきます。

ジャグ配列をシリアライズ

配列の配列を結合できます。

[[0, 1, 2], [3,4]].reduce(function(a, b) {
    return a.concat(b);
}, []); // [0, 1, 2, 3, 4]

複数の配列を結合したいときに、配列の配列に入れておけば一撃でひとつの配列にまとめられます。 その後、同様にreduce関数でユニークすれば、重複を気にせずに値を集められるので便利です。

key-value配列からオブジェクトを作る

key-valueの配列をオブジェクトに展開

[{key: 0, value: 'abc'}, {key: 1, value: 'XYZ'}].reduce(function(a, b) {
    a[b.key] = b.value;
    return a;
}, {}); // {0: "abc", 1: "XYZ"}

「サーバから受け取るデータはオブジェクトの配列。だけど、keyが重複しないことは分かっているので クライアントサイドではオブジェクトして扱いたい」時に便利です。

戻すのはちょっと面倒

var hash = {0: "abc", 1: "XYZ"};
Object.keys(hash)
    .map(function(key) {
        return { key: key, value: hash[key]};
    }); // [{key: 0, value: 'abc'}, {key: 1, value: 'XYZ'}]

オブジェクトの値を列挙する関数があるとうれしいです。

カウント

配列に含まれる要素を種類ごとに数えます。

['a', 'a', 'b'].reduce(function(a, b) {
    a[b] = a[b] ? a[b] + 1 : 1;
    return a;
}, {}); // {a: 2, b: 1}

じゃんじゃん値を入れておいてあとで集計したり数の多い種類順に並べ変えたりするときに便利です。

*1:結果を格納する変数をプライベートにしようとするとリビーリングモジュールパターンを使って、さらに関数の中に入れないといけないので。