JavaScriptで複数の配列から共通の要素を取得する方法

JavaScriptでは、任意の個数の配列を受け取り、すべての配列に共通して含まれる要素だけを抽出した配列を返す関数が必要になることがあります。共通する要素がひとつも存在しない場合は、空の配列を返すようにします。

本記事では、この「複数配列の共通要素（積集合）」を求める関数を段階的に実装していきます。

実装の考え方

基本的なアプローチは以下のとおりです。

まず、2つの配列を受け取って共通要素を返す intersection 関数を作成します。片方の配列をループで走査し、その要素がもう片方の配列に includes() メソッドで含まれているかどうかを判定し、含まれていれば結果用の配列へ追加します。

次に、可変長引数（...）を使って任意の個数の配列を受け取り、先頭の配列を起点として順番に intersection 関数を適用していく intersectMany 関数を作成します。これにより、3つ以上の配列にも対応できます。

コード例

const arr1 = [2, 6, 7, 1, 7, 8, 4, 3];
const arr2 = [5, , 7, 2, 2, 1, 3];
const arr3 = [1, 56, 345, 6, 54, 2, 68, 85, 3];

// 2つの配列の共通要素を返す関数
const intersection = (arr1, arr2) => {
   const res = [];
   for(let i = 0; i < arr1.length; i++){
      if(!arr2.includes(arr1[i])){
         continue;
      };
      res.push(arr1[i]);
   };
   return res;
};

// 任意の個数の配列の共通要素を返す関数
const intersectMany = (...arrs) => {
   let res = arrs[0].slice();
   for(let i = 1; i < arrs.length; i++){
      res = intersection(res, arrs[i]);
   };
   return res;
};

console.log(intersectMany(arr1, arr2, arr3));

実行結果

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

[2, 1, 3]

[2, 1, 3] の3つの値は、arr1・arr2・arr3 のすべてに共通して存在する要素です。

filter と reduce を使った別の書き方

よりモダンな記法としては、Array.prototype.filter() と Array.prototype.reduce() を組み合わせる方法もあります。

const intersectMany = (...arrs) =>
   [...arrs].reduce((acc, cur) => acc.filter(v => cur.includes(v)));

console.log(intersectMany(arr1, arr2, arr3)); // [2, 1, 3]

この書き方では、最初の配列を初期値（アキュムレータ）とし、残りの各配列に対して「その配列に含まれる要素だけを残す」フィルタリングを繰り返します。コードが簡潔になり、意図も読み取りやすくなります。

まとめ

共通要素の抽出は、includes() による存在チェックとループ（または filter()）を組み合わせることで簡単に実装できます。配列の個数が多い場合や要素数が非常に多い場合は、Set を使って存在判定を行うとパフォーマンスが向上するので、状況に応じて使い分けるとよいでしょう。