前回の「自主学習3-10」に引き続き、今回もJavaScript実践編をお送り致します。
配列と繰り返し処理（for文）
前回までで、全ての要素を出力する方法と、一部の要素を出力する方法を学習しました。今回は全ての要素を順番に出力する方法を実践してみます。
考え方
- 1番目の要素のインデックス番号を変数iに置き換え[i]で呼び出して出力。（[0]で呼び出さない）
- 2番目の要素は先ほどの[i]に+1した計算式で呼び出して出力。（インデックス番号の[1]で呼び出さない）
- 3番目の要素は先ほどの[i+1]に+1した計算式で呼び出して出力。（インデックス番号の[2]で呼び出さない）
インデックス番号を数字ではなく変数（ここでは変数にiを代入）に置き換える考え方です。変数の性質（再代入で値が上書きされる）を利用してfor文を記述することで、インデックス番号を順番に出力することができます。
const animals = ["dog", "cat", "sheep"];
for (let i =0; i < 3; i++) {
alert(animals[i]);
}コード解説
- 定数animalに配列（要素はdog,cat,sheepの３つ）を代入する。
- for文で繰り返しの処理を記述する。
- 繰り返し処理２に戻る。（条件式の値がfalseになればfor文が終了する）
・（変数の定義）変数iに数値0を代入する。；
・（条件式）変数iが3より小さい時、；
・（変数の更新）iに1を足す。；
・（処理）条件式の値がtrueであれば、animalの要素[i]を出力する。；
実践-配列内の要素を順番に出力してみよう
先ほどのコードを張り付けて、出力結果を確認してみよう。
ゴミコ
インデックス番号を変数に置き換えたので、コードもスッキリしてるわ。
配列の要素数を取得する（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の要素が順番に出力されるよ。
次回の記事
にほんブログ村
