配列と繰り返し処理

8738 ワード
for文 JavaScript プログラミング 配列操作 JavaScript テキストリンク

概要

配列についての復習と配列の取り出し方。
for文での配列の繰り返し処理について。

配列について

データが順番に並んだ１つのデータを指します。
例えば、以下のようにフルーツデータがあるとします。

index.js
 const fruits1 = "りんご";
 const fruits2 = "バナナ";
 const fruits3 = "ぶどう";
 const fruits4 = "なし";
 const fruits5 = "みかん";

データが膨大で、管理するのに苦労します。
そこで、同じ意味合いのデータとして管理していきます。
以下になります。

index.js
const fruits = ["りんご","バナナ","ぶどう","なし"];

定数フルーツにりんごなどの要素が配列として格納されています。
コンソールで確認すると以下のような結果になります。

配列は0番始まりになります。
lengthは要素の数を表すプロパティになります。

for文使わない場合

配列の要素を取り出す際には以下のようになります。

index.js
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);
console.log(fruits[4]);


要素をとりだすことができました。

しかし、要素数が増えたときにコード量が膨大になってしまいます。
そこで、ループ処理を使って行きます。

for文

index.js
    for (let i = 0;i <= fruits.length;i++) {
      console.log(fruits);
    }

index.js
    for (let i = 0;i <= fruits.length;i++) {
      console.log(`フルーツ${i}: ${fruits[i]}`);
    }

変数は0~始まります。上記のコードは実質6つ取り出すことになっています。
undifeunedは要素がありませんという意味です。

よってコードを、以下のように変更しました。

index.js
    for (let i = 0;i < fruits.length;i++) {
      console.log(`フルーツ${i}:${fruits[i]}`)
    }

iは要素数5未満。つまり0~4の繰り返しになります。
よって要素数とiの変数が合致したことになります。

forEach

forEachを使用するとコードが更にわかりやすくなります。

index.js
    fruits.forEach((fruit,index) => {
      console.log(`フルーツ${index}:${fruit}`)
    });

引数は自由に決めることができます。
配列の要素を１つずつ受け取って、要素数がなくなるまで繰り返し処理を実行してくれます。
このforEachを使うことで、配列要素が増えたとしてもforEach内を修正することなく使うことができます！