ITコラム

JavaScript

2017.10.19

JavaScript【 array 】6 ～ indexOfで配列の要素を検索

配列の中に特定のデータがあるかどうかを調べるために、indexOfやlastIndexOfといったメソッドが用意されています。
今回は、このようなメソッドを使いながら、配列要素の検索について紹介します。

1. indexOfメソッド

　
indexOfメソッドは、Arrayオブジェクトで用意されているメソッドで、ある値が配列内で最初に見つかった位置のインデックス番号を返します。
（Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。）

indexOfメソッドは、次のように使用します。

    var 変数名 = [ 値1, 値2, 値3, ... ];

    変数名.indexOf( 検索対象の要素, 検索開始位置 );

配列データの中を検索する際に、検索対象となる要素の値を indexOf に指定すると、その検索結果となるインデックス番号を返り値として取得することができます。

indexOfメソッドには、検索を開始して欲しい位置（インデックス番号）を指定することもできます（開始位置を指定しない場合は、インデックス番号 0 の要素から検索を開始します）。

indexOfメソッドを使用して、ある配列要素のインデックス番号表示します。
表示ボタンをクリックしてみて下さい。

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {

    var fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];

    var num = fruits.indexOf("ぶどう");

    document.getElementById("dat").value = "インデックス番号：" + num;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 0px;">
    <form>
        配列 = ["りんご", "みかん", "ぶどう", "メロン", "もも"];
        <div style="display:inline-flex;">
            上の配列の「ぶどう」のインデックス番号を表示します
          　<input type="button" value="表示" onClick="dispAry()">
        </div>
　
        <input type="text" id="dat" placeholder="ここに表示します">　
    </form>
</div>

配列変数fruitsの中に、「ぶどう」という要素があるかどうかを検索しています。

    var num = fruits.indexOf("ぶどう");

配列変数fruitsの3番目の要素として「ぶどう」という値が存在するため、返り値のインデックス番号は「 2 」となり、サンプル内の変数numに 2 が代入されます。

仮に、指定した値が配列に存在しなかった場合は、返り値が「-1」となります。

▲目次へ戻る

2. 全てのインデックス番号を取得

　
先ほどのサンプルと同じソースコードを使用して、今度は、次のような配列の要素を検索します。
表示ボタンをクリックしてみて下さい。

indexOfメソッドは、指定された値をインデックス番号の小さい方から順に検索し、値がヒットした時点で検索処理を終了するため、指定した値が複数存在する場合は、その中で最小のインデックス番号が返り値となります。

上のサンプルでは、「ぶどう」という値が2つ存在しますが、インデックス番号 0 の要素から順に検索して、3番目の要素で検索が終了し、返り値は「 2 」となります。

「ぶどう」という値のインデックス番号を2つとも取得したい場合は、indexOfメソッドを次のように記述すると取得できます。

    var fruits = ["りんご", "みかん", "ぶどう", "メロン", "ぶどう", "もも"];

    var num = fruits.indexOf("ぶどう");

    var num2 = fruits.indexOf("ぶどう", num + 1);

「 num + 1 」として、検索を開始位置をインデックス番号で指定しています。

変数num に、インデックス番号「 2 」が代入されるので、その次の要素から検索が開始され、変数num2 に、5番目の要素としての「ぶどう」のインデックス番号「 4 」が返り値として代入されます。

指定された値が何個存在するか不明な場合や、配列の要素数が多い場合は、ループ処理と組み合わせて記述するなど、工夫が必要です。

例えば、while文を使って次のように記述できます。

    var num = -1;

    while(true){

        num = fruits.indexOf("ぶどう", num + 1);

        if(num == -1) break;

        document.getElementById("dat").value += num + "　";
    }

返り値となるインデックス番号が「 -1 」となるまで、indexOfメソッドが実行されるので、インデックス番号が最後の要素まで検索されます。

while文ついては、JavaScript【 while 】を、break文ついては、JavaScript【 break 】をご参照下さい。

▲目次へ戻る

3. lastIndexOfメソッド

　
indexOfメソッドと同様に、指定された値を配列内で検索するために Arrayオブジェクトで用意されているメソッドで、lastIndexOfメソッドというものもあります。
（Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。）

indexOfメソッドは、配列の先頭から順に検索しますが、lastIndexOfメソッドは、配列の末尾から順に検索します。

lastIndexOfメソッドも、indexOfメソッドと同様に記述して使用します。

    var 変数名 = [ 値1, 値2, 値3, ... ];

    変数名.lastIndexOf( 検索対象の要素, 検索開始位置 );

指定した値がヒットした時点で検索処理を終了する点もindexOfメソッドと同様です。

指定した値が複数存在する場合は、その中で最大のインデックス番号が返り値となります。

lastIndexOfメソッドを使用して、配列に複数存在する値全てのインデックス番号表示します。
表示ボタンをクリックしてみて下さい。

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {


    var fruits =  ["りんご", "ぶどう", "ぶどう", "メロン", "ぶどう", "ぶどう"];
    var num = fruits.length;

    document.getElementById("dat").value = "インデックス番号：";

    while(true){

        num = fruits.lastIndexOf("ぶどう", num - 1);

        if(num == -1) break;

        document.getElementById("dat").value += num + "　";
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        配列 = ["りんご", "ぶどう", "ぶどう", "メロン", "ぶどう", "ぶどう"];
        <div style="display:inline-flex;">
            上の配列の「ぶどう」のインデックス番号を表示します
          　<input type="button" value="表示" onClick="dispAry()">
        </div>
        <input type="text" id="dat" placeholder="ここに表示します">　
    </form>
</div>

indexOfメソッドでは、開始位置を「 num + 1 」として2番目以降の値を検索しましたが、lastIndexOfメソッドは後ろから前に向かうため、2番目以降の値を検索するための開始位置を「 num – 1 」で指定します。

検索結果のインデックス番号も、大きい番号から小さい番号へ順に表示されます。

▲目次へ戻る