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

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

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

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

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

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

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

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

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

【JavaScript入門】文字列の検索まとめ(indexOf/search/match/test)
更新日 : 2019年4月24日

indexOf を使った検索方法!

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

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

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

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

出力結果は…

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

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

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

出力結果は…

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

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

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

出力結果は…

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

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

【JavaScript入門】while文でループ処理と制御(break/continue)
更新日 : 2018年6月14日

lastIndexOf を使った検索方法!

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

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

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

出力結果は…

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

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

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

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

some を使った検索方法!

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

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

出力結果は…

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

出力結果は…

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

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

every を使った検索方法!

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

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

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

出力結果は…

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

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

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

【JavaScript入門】filterで配列のデータを抽出する方法
更新日 : 2019年4月8日
【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説!
更新日 : 2019年5月23日

まとめ

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

  • indexOf
  • 検索対象の要素をインデックス番号で取得できる!

  • lastIndexOf
  • 対象配列の末尾から検索してインデックス番号を取得する!

  • some
  • コールバック関数で指定した条件に1つでも合致する要素があるかを検索する!

  • every
  • コールバック関数で指定した条件にすべて合致する要素があるかを検索する!

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説