JavaScriptで多次元配列の共通要素（積集合）を求める方法

本記事では、文字列や数値といったリテラル値の配列を複数含む多次元配列を受け取り、すべてのサブ配列に共通して存在する要素だけを抜き出した「交差（積集合）」の配列を返すJavaScript関数の作り方を解説します。

要件の確認

まずは、次のような2つのサブ配列を持つ多次元配列を例に考えてみましょう。

const arr = [
    ['garden', 'canons', 'philips', 'universal'],
    ['universal', 'ola', 'uber', 'bangalore']
];

この場合、両方のサブ配列に共通して存在する要素は 'universal' の1つだけです。つまり、作成する関数は次の結果を返す必要があります。

[ 'universal' ]

方法1：reduce() と filter() を組み合わせるシンプルな実装

もっとも読みやすいのは、Array.prototype.reduce() を使ってサブ配列を先頭から順に畳み込み、各ステップで filter() と includes() によって共通要素だけを残していく方法です。

const arr = [
    ['garden', 'canons', 'philips', 'universal'],
    ['universal', 'ola', 'uber', 'bangalore']
];

const findMultiIntersection = (arr = []) => {
    // 先頭のサブ配列を初期値にし、残りの配列と順に共通部分を求める
    return arr.reduce((common, current) =>
        common.filter(item => current.includes(item))
    );
};

console.log(findMultiIntersection(arr));

出力

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

[ 'universal' ]

処理の流れ

• 1つ目のサブ配列 ['garden', 'canons', 'philips', 'universal'] が初期値として使われます。
• 2つ目のサブ配列と照合し、両方に存在する 'universal' のみが残ります。
• サブ配列が3つ以上あっても、同じ処理を繰り返すことですべての配列の共通要素が求まります。

方法2：Set を活用した高速な実装

includes() は毎回線形探索を行うため、要素数が多い場合は Set に変換して has() で判定するとパフォーマンスが向上します。また、サブ配列内の重複要素も同時に除去できるため、より正確な積集合が得られます。

const findMultiIntersection = (arr = []) => {
    if (!arr.length) return [];
    const [first, ...rest] = arr;
    const sets = rest.map(sub => new Set(sub));
    return [...new Set(first)].filter(item =>
        sets.every(set => set.has(item))
    );
};

console.log(findMultiIntersection(arr));
// [ 'universal' ]

注意点

• 比較は値ベースで行われるため、オブジェクトなどの参照型は中身が同じでも別の要素として扱われます。
• 大文字と小文字は区別されるため、必要に応じて事前に正規化してください。
• 空の配列を渡してもエラーにならないよう、冒頭でガード処理を入れておくと安全です。