JavaScriptである配列の複数の値が別の配列に存在するかどうかを確認する方法

はじめに

JavaScriptでは、2つの数値配列を受け取り、1つ目の配列のすべての要素が2つ目の配列に含まれているかどうかを判定する関数が必要になる場面があります。本記事では、その実装方法を具体的なコード例とともにわかりやすく解説します。

まず、例として次の2つの配列を用意します。

const arr1 = [34, 78, 89];
const arr2 = [78, 67, 34, 99, 56, 89];

この例では、arr1のすべての要素（34、78、89）がarr2の中に存在するかどうかをチェックします。

方法：map()とindexOf()を組み合わせる

基本的なアプローチとして、map()メソッドとindexOf()メソッドを組み合わせる方法があります。それでは実際のコードを見てみましょう。

サンプルコード

const arr1 = [34, 78, 89];
const arr2 = [78, 67, 34, 99, 56, 89];
const contains = (first, second) => {
    const indexArray = first.map(el => {
        return second.indexOf(el);
    });
    return indexArray.indexOf(-1) === -1;
}
console.log(contains(arr1, arr2));

出力結果

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

true

コードの仕組み

このコードの動作は、以下の手順で理解できます。

1. インデックスの取得：first.map()により、1つ目の配列の各要素について、2つ目の配列内での位置（second.indexOf(el)の結果）を順番に取得し、新しい配列indexArrayを作成します。
2. -1の判定：indexOf()は、要素が見つからなかった場合に-1を返します。そのため、indexArrayの中に-1が含まれているかどうかを調べれば、「存在しない要素があるかどうか」がわかります。
3. 最終的な判定：indexArray.indexOf(-1) === -1がtrueであれば、-1がひとつも存在しない、つまり1つ目の配列のすべての要素が2つ目の配列に存在することを意味します。

より簡潔な代替方法：every()とincludes()を使う

上記の方法でも問題なく動作しますが、ES2015以降で利用できるevery()メソッドとincludes()メソッドを組み合わせると、同じ処理をさらに簡潔に記述できます。

const contains = (first, second) =>
    first.every(el => second.includes(el));

console.log(contains(arr1, arr2)); // true

every()は、配列のすべての要素が指定した条件を満たす場合にのみtrueを返すため、「すべての要素が含まれているか」というコードの意図が直感的に伝わります。また、includes()はindexOf()と異なりNaNの比較にも正しく対応している点もメリットです。

まとめ

配列同士の包含関係を確認したい場合は、map()とindexOf()を組み合わせた方法でも、every()とincludes()を使った方法でも実装可能です。可読性と保守性を重視するなら、後者のevery()＋includes()の組み合わせがおすすめです。用途や対象ブラウザの要件に応じて、適切な方法を選択しましょう。