多次元配列と単一配列を受け取り、各サブ配列との共通要素を抽出するJavaScript関数の実装方法

本記事では、第1引数として「数値の配列を要素に持つ二次元配列」、第2引数として「数値の単一配列」を受け取るJavaScript関数の実装方法を解説します。この関数は、二次元配列内の各サブ配列について、第2引数の配列と共通する要素だけを抽出した新しいサブ配列を作成し、それらをまとめて返します。いわば、各サブ配列と単一配列の積集合(共通要素)を求める処理です。

入力例と期待される出力

たとえば、次のような入力を考えます。

const arr1 = [
  [1, 2, 5, 6],
  [5, 13, 7, 8],
  [9, 11, 13, 15],
  [13, 14, 15, 16],
  [1, 9, 11, 12]
];

const arr2 = [9, 11, 13, 15, 1, 2, 5, 6];

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

[
  [1, 2, 5, 6],
  [5, 13],
  [9, 11, 13, 15],
  [13, 15],
  [1, 9, 11]
]

出力配列の1番目のサブ配列には、元のarr1の1番目のサブ配列とarr2の共通要素が格納されます。2番目以降も同様に、対応するサブ配列ごとに共通要素が順番に抽出されていきます。

実装コード(Setオブジェクトを使用)

共通要素の抽出には、Setオブジェクトとmap()・filter()メソッドを組み合わせるのが最もシンプルで効率的です。

const arr1 = [
  [1, 2, 5, 6],
  [5, 13, 7, 8],
  [9, 11, 13, 15],
  [13, 14, 15, 16],
  [1, 9, 11, 12]
];

const arr2 = [9, 11, 13, 15, 1, 2, 5, 6];

const findIntersection = (arrays, target) => {
  // 単一配列をSetに変換して存在判定を高速化
  const targetSet = new Set(target);

  // 各サブ配列から、targetに含まれる要素だけを残す
  return arrays.map(arr => arr.filter(num => targetSet.has(num)));
};

console.log(findIntersection(arr1, arr2));

このコードを実行すると、先ほど示した通りの結果が得られます。

コードのポイント

• Setによる高速化: 配列のincludes()で毎回線形探索を行うと計算量が増大しますが、Setのhas()ならほぼ定数時間で存在判定できるため、データ量が多くても高速に動作します。
• 宣言的で読みやすい記述: map()とfilter()を組み合わせることで、「各サブ配列を変換し、条件に合う要素だけを残す」という意図が明確になり、保守性も向上します。
• 元の配列を破壊しない: どちらのメソッドも新しい配列を返すため、入力データは一切変更されず、副作用のない安全な関数として設計できます。

なお、数値を文字列化して正規表現(RegExp)でマッチングさせる手法もありますが、桁数の違いによる誤マッチや、マッチ件数が0件の場合のnullチェックなど、考慮すべき点が多くなります。堅牢性とパフォーマンスの両面で、Setを使う上記の方法が確実におすすめです。