JavaScriptで配列内のn番目に出現する要素のインデックスを取得する方法

今回は、配列 arr、文字列または数値リテラル txt、そして数値 n を引数として受け取る関数 getIndex() を作成します。この関数は、arr の中で txt が n 回目に出現する位置（インデックス）を返す必要があります。もし txt が n 回出現しない場合は、-1 を返します。

では、実際に関数を実装してみましょう。

サンプルコード

const arr = [45, 76, 54, 43, '|', 54, '|', 1, 66, '-', '|', 34, '|', 5,
76];
const getIndex = (arr, txt, n) => {
    const position = arr.reduce((acc, val, ind) => {
        if(val === txt){
            if(acc.count+1 === n){
                acc['index'] = ind;
            };
            acc['count']++;
        }
        return acc;
    }, {
        index: -1,
        count: 0
    });
    return position.index;
};
console.log(getIndex(arr, '|', 3));
console.log(getIndex(arr, 54, 2));
console.log(getIndex(arr, '-', 3));

実行結果

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

10
5
-1

コードの解説

この関数では reduce() メソッドを活用しています。初期値として { index: -1, count: 0 } というオブジェクトを用意し、配列を先頭から順に走査しながら、txt と一致する要素をカウントしていきます。カウント数が n に達したタイミングで、その要素のインデックスを index プロパティに記録します。

最終的に position.index を返すことで、n 回目の出現位置を取得できます。条件を満たす出現が存在しなかった場合も、初期値の -1 がそのまま返されるため、特別な分岐処理を追加する必要がなく、シンプルで安全な実装になっています。

上記の例では、「'|'」の3回目の出現はインデックス10、「54」の2回目の出現はインデックス5にあり、一方「'-'」は2回しか出現しないため3回目は -1 となっています。