
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
JavaScript
2017.10.19
配列の中に 特定のデータがあるかどうかを調べるために、indexOfやlastIndexOfといったメソッドが用意されています。
今回は、このようなメソッドを使いながら、配列要素の検索について紹介します。
1.indexOfメソッド
2.全てのインデックス番号を取得
3.lastIndexOfメソッド
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」となります。
先ほどのサンプルと同じソースコードを使用して、今度は、次のような配列の要素を検索します。
表示ボタンをクリックしてみて下さい。
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 】をご参照下さい。
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 」で指定します。
検索結果のインデックス番号も、大きい番号から小さい番号へ順に表示されます。
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.