【JavaScript入門】配列の要素を検索する4つの方法！

こんにちは、ライターのマサトです！

今回は、配列の要素を検索する時に便利なメソッドをご紹介致します！JavaScriptにおける配列操作では、特定の要素だけを探し出して抽出するケースが少なくありません。

普通にプログラムを組んでしまうと、無駄にコード量が多くなったり間違いも起きやすいので、見知らぬバグを作ってしまいがちです。

そこで、この記事では配列を検索する基本メソッドという基本的な内容から、コールバック関数を使ってみるなど応用的な内容についても解説していきます。

効率よく配列の要素を検索することができるメソッドを厳選し、サンプルコードと一緒に活用方法を詳しく解説していきますので、ぜひ参考にしてみてください！

配列を検索する基本メソッド

まずは、配列の要素を検索するうえで、最も基本となるメソッドから学習をしていきましょう！利用するメソッドはindexOfとlastIndexOfです。

これは、文字列を検索する時にも利用できるもので、使い方もほとんど同じなので一石二鳥のメソッドとも言えるでしょう。

indexOf を使った検索方法！

まず、最初にindexOfの使い方を学習しましょう！一般的な構文は次のとおりです。

var items = 配列データ;

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

配列データの中を検索する際に、検索対象となる要素の値を「indexOf」に指定すれば、その検索結果を返り値として取得することができます。

返り値は、要素のインデックス番号となり、検索する際に開始位置を指定することも可能です。（開始位置を省略した場合は0と同じ扱い）

それでは、実際の使用例を見てみましょう！次のサンプルコードを見てください。

var items = ['リンゴ', 'メロン', 'イチゴ', 'バナナ'];

//配列内に「イチゴ」が存在するかを検索する
var result = items.indexOf( 'イチゴ' );

console.log( result );

出力結果は…

2

となります。このサンプルでは、「イチゴ」という要素が、配列itemsの中にあるかどうかを検索しています。

「items」の中には、インデックス番号の2番目に「イチゴ」という値が存在しているため、結果として返り値「2」を取得しているわけです。
（存在しなかった場合は「-1」が返ります）

ちなみに、検索しようとしている要素が配列内に複数存在していたら、どうなるでしょうか？次のサンプルで確認してみましょう！

var items = ['イチゴ', 'メロン', 'イチゴ', 'バナナ'];

var result = items.indexOf( 'イチゴ' );

console.log( result );

出力結果は…

０

となります。このサンプルでは、「イチゴ」という要素を検索しようとしていますが、配列「items」の中には2つ存在しているのが分かります。

しかしながら、「indexOf」メソッドは0番目から順番に検索し、最初に合致した要素のインデックス番号しか返さないので、出力結果は「0」になっているわけです。

2つ目のインデックス番号も取得したい場合は、「indexOf」の開始位置を指定する必要があります！

var items = ['イチゴ', 'メロン', 'イチゴ', 'バナナ'];

var result1 = items.indexOf( 'イチゴ' );

//最初に合致したインデックス番号の次から開始位置にする
var result2 = items.indexOf( 'イチゴ', result1 + 1 );

console.log( result1, result2 );

出力結果は…

0 2

となります。このサンプルでは、最初に合致したインデックス番号に「+1」することで、その次のインデックス番号から検索を開始するようにしています。

さらにもっと多くの配列を扱う場合には、while文などの繰り返し処理を使って、すべての重複要素を取得するのが良いでしょう。while文の繰り返し処理については、次の記事で詳しく解説しているので、ぜひ参考にしてみてください！

lastIndexOf を使った検索方法！

今度は、「lastIndexOf」について学習していきましょう！これは、先ほど学習した「indexOf」とほとんど同じなので、すぐに理解出来るはずです。一般的な構文は次のとおりです！

var items = 配列データ;

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

「indexOf」と同じように、配列内の検索したい要素を指定することで、インデックス番号が「返り値」として取得することができます。

ただし、「lastIndexOf」は配列の末尾から順番に検索していく点が、「indexOf」と違うポイントになります！次のサンプルで、その違いを具体的に見てみましょう！

var items = ['イチゴ', 'メロン', 'イチゴ', 'バナナ'];
var result = items.lastIndexOf( 'イチゴ' );

console.log( result );

出力結果は…

2

となります。このサンプルでは、「イチゴ」という要素を検索していますが、配列内には2つ存在しているのが分かります。「indexOf」を使っていれば返り値は「0」になりますが、今回の「lastIndexOf」は末尾から順番に検索を始めるため、最初に合致する2番目の「イチゴ」を検出しているわけです。

また、「lastIndexOf」も検索の開始位置を指定することが可能で、使い方も「indexOf」と同じになります。

コールバック関数を使ってみる！

ここからは、コールバック関数を使ったメソッドについて見ていきましょう！メソッド内で関数が扱えるため、より便利な検索処理を行えるのが特徴で、独自にループ処理を構築しなくても全要素にそれぞれアクセスできるので便利です。

some を使った検索方法！

まずは、「some」メソッドを使った方法から学習してみましょう！「some」を使うと、配列内に目的の要素が存在するのかどうかを、「true / false」で取得できるのが特徴です。一般的な構文は次のとおりです！

var items = 配列データ;

items.some( コールバック関数 );

コールバック関数内で、どんな検索をしたいかの処理を記述できるので、複雑な条件式による検索が可能になります。また、条件に合致する要素が1つでもあれば「true」を返すのが「some」の大きな特徴でしょう。次のサンプルで、使用例を見てみましょう！

var items = ['メロン', 'イチゴ', 'リンゴ', 'ブドウ'];

var result = items.some( function( value ) {

    //配列内に「イチゴ」が存在するかどうかを検索
    return value === 'イチゴ';

});

console.log( result );

出力結果は…

true

となります。このサンプルでは、配列内に「イチゴ」が存在するかどうかを検索し、合致する要素が1つでもあれば「true」を返しているのが分かります。関数内に条件式を記述できるので、例えば数値データを格納した配列で検索すると便利でしょう。

var items = [109,23,542,190,320,99,245];

var result = items.some( function( value ) {

    //200以上の数値があるかどうかを検索する
    return value > 200;

});

console.log( result );

出力結果は…

true

となります。このサンプルでは、関数内の条件式に「value > 200」と記述することで、200以上の数値があるかどうかをざっくりと検索できるのが分かります。

もちろん、「value > 330 && value < 400」と記述すれば、330以上400未満の数値があるかどうか？…という細かい条件で検索することも可能なわけです。

every を使った検索方法！

今度は、「every」メソッドを学習しましょう。これは「some」と使い方がほとんど同じですが、「every」は配列内の要素すべてに条件が合致しないと「true」を返してくれないという大きな特徴があります。

まずは、一般的な構文を見てみましょう！

var items = 配列データ;

items.every( コールバック関数 );

内容は「some」とまったく同じで、コールバック関数内に検索したい要素の条件を記述することで、「true / false」を返り値として取得することができます。次のサンプルで、具体的な使用例を見てみましょう！

var items = [9,5,8,4,5,7];

var result = items.every( function( value ) {

//配列内に3よりも大きい数字があるかを検索する
    return value > 3;

});

console.log( result );

出力結果は…

true

となります。このサンプルでは、コールバック関数内に「3よりも大きい数字」があるかを条件式として記述しています。配列「items」内には、すべて3よりも大きい数字の要素しかないので、結果として「true」を返り値として受け取っているわけです。

ちなみに、今回は「検索」のみをテーマにしていますが、大抵の場合は検索した後に何らかの処理を実行するはずです。

そこで、ある条件で検索をした結果、何らかの処理を同時に行える便利なメソッドとして、「filter」と「map」の活用方法を次の記事で詳しく解説しているので、ぜひ参考にしてみてください！

まとめ

今回は、配列の要素を効率よく「検索」できるメソッドについて学習しました！もう一度、ポイントをおさらいしておきましょう！

これらの内容を踏まえて、ぜひ自分でも実際にコードを書いてどのような出力結果が表示されるかを確認してみましょう！