【JavaScript】重複する配列の値をフィルタリングして数値を合計する方法

配列の中に配列が含まれる、次のようなデータを考えてみましょう。

const arr = [[12345, "product", "10"],[12345, "product", "15"],[1234567, "other", "10"]];

ここで求められているのは、このような配列を引数として受け取る関数を作成することです。すべてのサブ配列が、必ず3つの要素を持っている点に注目してください。

作成する関数では、最初の要素(ID)が重複しているサブ配列を1つにまとめる必要があります。さらに、統合によって取り除かれたサブ配列の3番目の要素(数量)は、重複していない対応するサブ配列の値に加算しなければなりません。

上記の配列の場合、期待される出力は次のようになります。

const output = [[12345, "product", "25"],[1234567, "other", "10"]];

サンプルコード

実際のコードは以下のとおりです。

const arr = [[12345, "product", "10"],[12345, "product", "15"],[1234567,
"other", "10"]];
const addSimilar = (arr = []) => {
    const res = [];
    const map = {};
    arr.forEach(el => {
        const [id, name, amount] = el;
        if(map.hasOwnProperty(id)){
            const newAmount = +amount + +res[map[id] - 1][2];
            res[map[id] - 1][2] = '' + newAmount;
        }else{
            map[id] = res.push(el);
        }
    });
    return res;
}
console.log(addSimilar(arr));

コードの解説

このコードの仕組みを順番に見ていきましょう。

• res: 最終的な結果を格納する配列です。
• map: 各IDと、res 内での位置情報を紐付けて記録するオブジェクトです。
• 各サブ配列を分割代入([id, name, amount])で取り出し、処理を行います。
• map にすでに同じ id が存在する場合は、3番目の要素を単項プラス(+)で数値化して加算し、再び文字列に変換して格納します。
• 存在しない場合は、そのサブ配列を res に追加します。なお push() の戻り値は「追加後の配列の長さ」であるため、map[id] - 1 で該当要素のインデックスを取得できるようになっています。

実行結果

コンソールに出力される結果は以下のとおりです。ID 12345 の数量が 10 と 15 を足した 25 になっていることが確認できます。

[ [ 12345, 'product', '25' ], [ 1234567, 'other', '10' ] ]