自主学習3-11「JavaScript実践(配列-要素を順番に出力する)」

前回の「自主学習3-10」に引き続き、今回もJavaScript実践編をお送り致します。

配列と繰り返し処理(for文)

前回までで、全ての要素を出力する方法と、一部の要素を出力する方法を学習しました。今回は全ての要素を順番に出力する方法を実践してみます。

考え方
  1. 1番目の要素のインデックス番号を変数iに置き換え[i]で呼び出して出力。([0]で呼び出さない)
  2. 2番目の要素は先ほどの[i]+1計算式で呼び出して出力。(インデックス番号の[1]で呼び出さない)
  3. 3番目の要素は先ほどの[i+1]+1した計算式で呼び出して出力。(インデックス番号の[2]で呼び出さない)
point!!

インデックス番号を数字ではなく変数(ここでは変数にiを代入)に置き換える考え方です。変数の性質(再代入で値が上書きされる)を利用してfor文を記述することで、インデックス番号を順番に出力することができます。

const animals = ["dog", "cat", "sheep"];

for (let i =0; i < 3; i++) {
  alert(animals[i]);
}

コード解説

  1. 定数animalに配列(要素はdog,cat,sheepの3つ)を代入する。
  2. for文で繰り返しの処理を記述する。
  3. ・(変数の定義)変数iに数値0を代入する。;

    ・(条件式)変数iが3より小さい時、;

    ・(変数の更新)iに1を足す。;

    ・(処理)条件式の値がtrueであれば、animalの要素[i]を出力する。;

  4. 繰り返し処理2に戻る。(条件式の値がfalseになればfor文が終了する)

関連記事 for文の復習はコチラ

実践-配列内の要素を順番に出力してみよう

先ほどのコードを張り付けて、出力結果を確認してみよう。

ゴミコ
インデックス番号を変数に置き換えたので、コードもスッキリしてるわ。

配列の要素数を取得する(length)

出力のコードを記述する際に、配列.lengthとすることで、配列の要素数を取得できます。先ほどのfor文を使用して要素を出力する処理の際など、条件式の値にlengthを用いれば、配列の要素数が変わっても問題なく繰り返すことができます。(iが配列の要素数より小さい時に処理が繰り返される)

const animals = ["dog", "cat", "sheep", "rabbit"];
alert(animals.length);

for (let i = 0; i < animals.length; i++) {
  alert(animals[i]);
}
//コードをコピペして先ほどのエディタから出力結果を確認してみよう。
ゴミコ
実行を押すと、一度目は要素数の「4」がダイアロボックスに出力されて、OKを押すと次はanimalの要素が順番に出力されるよ。

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村