JavaScriptの勉強09【ループ文for・while・forEach】

javascriptの基礎を学ぶシリーズ第9弾。
繰り返しの方法をまとめてなかったなあと思い記事にしました。

前回の記事 micche-labo.hatenablog.com

ちなみにループをはじめに学んだ時、i<1とかi++の意味がわからなかったので、いろいろ自分で変えてテストしようとコンソールに打ち込んだら、無限ループ（当時はその言葉も知らなかった）に陥り、軽くパニックになりながらブラウザを閉じた経験があります。

ループ勉強時には、無限ループに陥らないように気をつけましょう…あせります。

とはいえ、無限ループしてもブラウザ閉じればだいたいなんとかなってますので、そんな怖がんなくてもいいのかな？とは思います。（保証はできませんが）

データが消えてしまわないように、無限ループになる可能性があるようなことを試す時は、テキストエディタとかにコードを貼り付けて保存したり、みていたブラウザをブックマークしたりして、強制終了しても大丈夫なように備えておくと安心かと思います。（私はそうしてます）

はじめに

このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう！というシリーズです。

ためになるかはわかりませんが、同じく初心者の方は一緒にがんばりましょう！
玄人の方はどうぞ温かい目で見守っていてください。

なにか間違い・助言あれば、ご教授おねがいします。

勉強方法：Chromeのデベロッパーツールでコンソールを開いて実行。

繰り返しできると何が便利か

ひとつづつ記述する手間が省ける。

例えば

const shoppingList =['パン','お肉','お魚','牛乳'];
let text = '買うものは、';

text += shoppingList[0]+ 'と' + shoppingList[1] + 'と' + shoppingList[2] + 'と' + shoppingList[3] + 'です。';

のように書いても、

const shoppingList =['パン','お肉','お魚','牛乳'];
let text = '買うものは、';

for(let i = 0; i < shoppingList.length; i++){
    if(i === shoppingList.length-1){
        text += shoppingList[i] + 'です。';
    }else{
        text += shoppingList[i] + 'と';
    }
}

のように書いても、

結果は

console.log(text); // => 買うものは、パンとお肉とお魚と牛乳です。

のようになる。

shoppingList[0]、shoppingList[1]…のようにいちいち記述するのと、繰り返しを定義しておく方が間違えもないだろうし、記述も楽になる。

ifで繰り返し

if文の構文

if(初期化;各ループする前の式;各ループ最後に実行する式){
    条件に満たした時にループする内容
}

• 初期化にはlet i = 0;とすることが多い。
• ループする前の式には、i < 10など、大なり小なりを使用して条件をつける。trueの場合ループが開始される。
• 最後の式にはi++やi--が入ることが多い。
• ループ内容にはif文を使うことが多いようです。

例1カウントダウンする

繰り返しの条件：10〜0までをカウントダウンし、コンソールに表示する。 条件２：0まできたら「ループを終了します」文字を表示する。

1. 変数宣言。変数iに10を格納して初期化する。
2. ループ前の式。i >= 0とする。iが0になるまで繰り返す。
3. ループ後の式。i--で、1づつ減少させる。
4. ループ式がtrueの時に実行されるif文記述。
   1. if文でi === 0なら終了の文を表示する。
   2. if文でi === 1〜10なら数字を表示する。

for(let i = 10; i >= 0; i--){
    if(i === 0){
        console.log(i);
        console.log('ループを終了します。');
    }else{
        console.log(i);
    }
}

例2カウントアップする

やり方をかえ、0から10までをカウントアップ。

for(let i = 0; i <= 10; i++){
    if(i === 0){
        console.log('ループを開始します。');
        console.log(i);
    }else{
        console.log(i);
    }
}

配列と組み合わせて使うことが多い。

配列でループは以下記事参照 micche-labo.hatenablog.com

while文で繰り返し

if文が1行で条件書いたのに比べ、while文は複数行にまたがるイメージ。

例1カウントダウンする

let i = 10; //変数宣言。初期化。i = 10 とする。

//繰り返しの定義。iが0以上の時に繰り返す。
while(i >= 0){
    //ifの条件はfor文の時と同じ
    if(i === 0){
        console.log(i);
        console.log('ループを終了します。');
    }else{
        console.log(i);
    }
    i--; //繰り返しが終わるたびに-1する。
}

//consoleでの結果
10
9
8
7
6
5
4
3
2
1
0
ループを終了します。

条件分岐せずに、単にカウントダウンするだけなら

let i = 10;
while(i >= 0){
    console.log(i);
    i--; //繰り返しが終わるたびに-1する。
}

とも書ける。

例2カウントアップする

let i = 0; //変数宣言。初期化。i = 0 とする。

//繰り返しの定義。iが10以下の時に繰り返す。
while(i <= 10){
    //ifの条件はfor文の時と同じ
   if(i === 0){
        console.log('ループを開始します。');
        console.log(i);
    }else{
        console.log(i);
    }
    i++; //繰り返しが終わるたびに-1する。
}

//consoleでの結果
ループを開始します。
0
1
2
3
4
5
6
7
8
9
10

forとwhileの対応箇所説明画像

for文とwhile文の対応している箇所はこんな感じ。

forとwhileの比較画像

do...while文で書く

先ほどのwhile文の例を、do...while文に書き直してみます。

let i = 10;

do{
    //ifの条件はfor文の時と同じ
    if(i === 0){
        console.log(i);
        console.log('ループを終了します。');
    }else{
        console.log(i);
    }
    i--; //繰り返しが終わるたびに-1する。
}while(i >= 0);

結果はwhile文の時と同じ。

単にカウントダウンするだけなら

let i = 10;

do{
   console.log(i);
   i --;
}while(i >= 0);

と書ける。

whileとdo...whileの違い

while文は条件式がtrueとならないと実行されないのに対し、do...whileは必ず１回は実行される。

let i = 0;
do{
console.log('初回実行'); //falseでもtrueでも必ず１回は実行
}while(i === 1); //iは0なのでfalse
//consoleでの結果=>初回実行

のように、条件がfalseとなった場合でも必ず１度は実行される。

※while(i === 0) とすると無限ループにはまるので注意！

forEach

ちょっとforやwhileとは違う。
forEachで定義した関数を、配列の各要素に対して一度ずつ実行する。

//numbersという配列を作る
const numbers = [1,2,3, 5,10];
//配列の各要素に対し、console.log(num)を1度づつ実行する
numbers.forEach( num => console.log(num));

//consoleでの結果
1
2
3
4
5
10

配列の中身をコピー

const fruits = ['りんご', 'バナナ', 'みかん'] //配列作成
const copyFruits = [] //空っぽの配列作成

//forEachで繰り返し定義
fruits.forEach(function(item){
  copyFruits.push(item) //copyFruits配列にfruitsの値を全てコピー
})

copyFruits
//consoleでの結果=>['りんご', 'バナナ', 'みかん']

同じことをfor文で書くと

const fruits = ['りんご', 'バナナ', 'みかん']
const copyFruits = []

//for文で繰り返し定義
for (let i = 0; i < fruits.length; i++) {
  copyFruits.push(fruits[i])
}

copyFruits
//consoleでの結果=>['りんご', 'バナナ', 'みかん']

となる。

列の中身を取り出したい時

//関数定義
function number(element, index, array) {
  console.log('配列' + index + ' は ' + element + 'です')
}
//forEachで取り出す
[1,'りんご',3,9,'abc'].forEach(number);

//consoleでの結果
配列0 は 1です
配列1 は りんごです
配列2 は 3です
配列3 は 9です
配列4 は abcです

まとめ

繰り返しはいろんなところで使用するので、あらためて記事にしてまとめると、頭の中の整理ができてよかった。

for、while、forEach…

使い分けが難しいが、そのうち便利に使いこなせるように、引き続き勉強を頑張っていこうと思う。