JavaScriptで複数の値の配列内の位置（インデックス）を検索して返す方法

この記事では、2つの配列を引数として受け取り、第2の配列に含まれる要素が第1の配列内のどの位置（インデックス）にあるかをすべて返す関数「findPositions()」を作成します。

やりたいこと

たとえば、次のような2つの配列があるとします。

第1の配列：['john', 'doe', 'chris', 'snow', 'john', 'chris']
第2の配列：['john', 'chris']

この場合、'john' と 'chris' が第1の配列内に存在する位置をすべて取得するため、期待される出力は以下のようになります。

[0, 2, 4, 5]

'john' はインデックス0と4、'chris' はインデックス2と5に存在するため、これらがまとめて返されるという仕組みです。

forEach() を使った実装例

それでは、実際のコードを見てみましょう。ここでは forEach() ループと includes() メソッドを組み合わせて実装します。

サンプルコード

const values = ['michael', 'jordan', 'jackson', 'michael', 'usain',
'jackson', 'bolt', 'jackson'];
const queries = ['michael', 'jackson', 'bolt'];

const findPositions = (first, second) => {
    const indicies = [];
    first.forEach((element, index) => {
        if (second.includes(element)) {
            indicies.push(index);
        }
    });
    return indicies;
};

console.log(findPositions(values, queries));

コードの解説

• findPositions(first, second)：第1引数に検索対象の配列、第2引数に検索したい値の配列を受け取ります。
• forEach()：第1の配列の各要素とそのインデックスを順番に処理します。
• second.includes(element)：現在の要素が第2の配列に含まれているかどうかを判定します。
• indicies.push(index)：条件を満たした場合、そのインデックスを結果配列に追加します。

出力結果

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

[ 0, 2, 3, 5, 6, 7 ]

'michael' はインデックス0と3、'jackson' はインデックス2、5、7、'bolt' はインデックス6に存在するため、これらが昇順でまとめられて返されます。

より簡潔に書くなら：flatMap() を活用

flatMap() を使うと、同じ処理をもっと短く記述できます。

const findPositions = (first, second) =>
    first.flatMap((element, index) => second.includes(element) ? [index] : []);

条件を満たす場合はインデックスを配列に包んで返し、満たさない場合は空の配列を返すことで、自動的にフラット化され、結果として該当するインデックスだけが集まります。

まとめ

• forEach() と includes() を組み合わせることで、複数の検索対象値が配列内のどの位置にあるかを簡単に取得できます。
• よりモダンな書き方としては flatMap() や reduce() を使うことで、コードを簡潔にできます。
• 結果は元の配列の順序（昇順）で返されるため、位置情報が必要な処理にそのまま活用できます。