javascriptのreduceを使って配列を更新する方法

reduceを使用すると、ある配列を使って単一の値を計算したい場合に使えます。

いくつかreduceを使った例を紹介します。

配列内のデータを加算する

var datas = [1,2,3,4,5]
var result = datas.reduce(function(num, item) {
    // numの初期値は0
    return num + item;
}, 0);
// result == 15

配列内のデータを逆順にする

reverseを使ったほうが良いけども

var datas = [1,2,3,4,5,6]
var result = datas.reduce(function(table, item) {
    console.log(table, item);
    table.unshift(item);
    return table;
}, []);
// result = [6,5,4,3,2,1]

// ↓ console.log(table, item)
// [] 1
// [1] 2
// [2, 1] 3
// [3, 2, 1] 4
// [4, 3, 2, 1] 5
// [5, 4, 3, 2, 1] 6

一次元の配列を3つ区切りの二次元配列にしたい場合

↓の例の場合、[1,2,3,4,5,6]が[[1,2,3],[4,5,6]]に変換されます。

var datas = [1,2,3,4,5,6];
var result = datas.reduce(function(table, item) {
    // tableが更新されていく
    // itemには要素が入っている
    console.log(table, item);
    const last = table[table.length - 1];
    // ↑ [[1,2,3][4,]] の場合、[4]を取得している
    if (last.length === 3) {
        table.push([item]);
    } else {
        last.push(item);
    }
    return table;
}, [[]]);
// result == [[1,2,3],[4,5,6]]

二次元配列を一次元配列にしたい場合

var datas = [[1,2,3], [4,5,6]];
var result = datas.reduce(function(table, item) {
    return table.concat(item);
}, []);
// result == [1,2,3,4,5,6]