【JavaScript】配列の配列で同じキーの値を合計して一意な要素にまとめる方法

はじめに

JavaScriptでは、配列の中に配列（二次元配列）が含まれるデータ構造を扱うことがよくあります。各サブ配列が「文字列（名前など）」と「整数（数値）」の2つの要素を持つ場合、同じ名前を持つサブ配列を1つにまとめ、その際に2番目の要素（数値）を合計したいというニーズがあります。

本記事では、このような処理を実現する combineArray() 関数の実装方法を、具体例とともに解説します。

元のデータと期待される結果

まず、例として次のような配列を考えてみましょう。

const example = [
  ['first', 12],
  ['second', 19],
  ['first', 7]
];

この配列を変換すると、同名のキーを持つサブ配列が統合され、次のようになります。

const result = [
  ['first', 19],
  ['second', 19]
];

「first」の値は 12 + 7 = 19 となり、重複していた要素が正しく1つにまとめられていることがわかります。

combineArray関数の実装

それでは、配列を入力として受け取り、統合された配列を返す combineArray() 関数を作成してみましょう。

サンプルコード

const people = [
  ['Ram', 21],
  ['Mohan', 33],
  ['Vikram', 25],
  ['Mike', 29],
  ['Mohan', 41],
  ['Vikram', 26]
];

const combineArray = (people) => {
  const map = {};
  for (const index in people) {
    const name = people[index][0];
    const prop = people[index][1];
    if (map[name]) {
      map[name] += prop;
    } else {
      map[name] = prop;
    }
  }
  return Object.keys(map).map(key => [key, map[key]]);
}

console.log(combineArray(people));

実行結果

コンソールには次のように出力されます。

[ [ 'Ram', 21 ], [ 'Mohan', 74 ], [ 'Vikram', 51 ], [ 'Mike', 29 ] ]

「Mohan」は 33 + 41 = 74、「Vikram」は 25 + 26 = 51 となっており、重複する名前が正しく統合されていることが確認できます。

コードの解説

combineArray() 関数の動作を順番に見ていきましょう。

1. オブジェクトをマップとして利用： 空のオブジェクト map を用意し、名前をキー、数値を値として格納します。
2. 配列をループ処理： 各サブ配列から名前（第1要素）と数値（第2要素）を取り出します。
3. 重複チェックと合計： すでに同じ名前のキーが存在する場合は既存の値に加算し、存在しない場合は新しくキーを登録します。
4. オブジェクトを配列へ変換： 最後に Object.keys() でキーの一覧を取得し、[キー, 値] の形式のサブ配列に変換して返します。

つまり、この関数は配列を走査しながら名前をキー・数値を値としてオブジェクトにマッピングし、重複するキーが見つかるたびに値を加算していきます。最終的にオブジェクトを配列の配列へ変換して返すことで、目的の形式が得られます。

計算量について

この関数の時間計算量は O(2n) ですが、一般的にこれは定数倍を無視して O(n) と表記されます。また、空間計算量も O(n) です。オブジェクトへのキーアクセスは平均 O(1) で行えるため、大規模なデータセットでも効率的に動作します。

まとめ

JavaScriptで配列の配列を扱う際、同じキーを持つ要素を統合して数値を合計したい場合は、オブジェクトをハッシュマップとして活用するのがシンプルかつ高速なアプローチです。なお、reduce() メソッドを使えばより簡潔に書くこともできますが、基本的な考え方は本記事の実装と同じです。データの集計やグループ化が必要な場面で、ぜひ活用してみてください。