
前回の「自主学習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の3つ)を代入する。
- for文で繰り返しの処理を記述する。
- 繰り返し処理2に戻る。(条件式の値が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の要素が順番に出力されるよ。
次回の記事
にほんブログ村