ループ処理
JavaScriptに限らず、プログラミングにおいては同じ処理を繰り返し行うことが多々あります。
そんな時に便利な仕組みがfor文などの「ループ処理」と呼ばれるものです。
ループ処理を行うことで、同じ処理を複数回記述する必要がないため、より簡潔にコードをかけると共に、処理の仕様を変更したい際も少ない箇所の変更で対応ができます。
for文
それでは、ループ処理について見ていきましょう。
まずは、ループ処理の基本「for文」の基本構文です。
for(初期値の設定; 条件; 毎ループ後の処理) {
// ここ処理を記述します。
}では、実際の JavaScript の for文のコードを見てみましょう。
for(let i = 1; i < 5; i ++){
console.log(i + '回目の処理です。');
// 1回目の処理です。
// 2回目の処理です。
// 3回目の処理です。
// 4回目の処理です。
}上記のコードでは、初期値：[ i に1を設定]、条件：[i が5未満の間（4まで）]、ループ後の処理：[i に1を足す] でループ処理を行っています。
while文
while文では、条件のみを記述します。
let i = 1;
while(i < 5){
console.log(i + '回目の処理です。');
i ++;
}
// 1回目の処理です。
// 2回目の処理です。
// 3回目の処理です。
// 4回目の処理です。処理としては、1つ前に解説したfor文と同じですが、記述の仕方が異なっているのがわかるかと思います。
do~while文
do~while文では、先に処理を書いた後に条件を記述します。
条件より先に処理を記述するため、1回目の処理は条件に当てはまらなくても必ず実行されるのが特徴です。
let i = 1;
do {
console.log();
i ++;
} while { i < 5 }
// 1回目の処理です。
// 2回目の処理です。
// 3回目の処理です。
// 4回目の処理です。条件に当てはまらなくても1回目の処理が行われる、と言う特徴がわかりやすいコードも見てみましょう。
let i = 10;
do {
console.log('処理を行います。');
i ++;
} while { i < 5 }
console.log(i);
// 処理を行います。
// 11変数 i に10を代入しており、do~while文の条件：[ i < 5 ] には当てはまりませんが、1回目の処理（console.log 、 i ++ ）が行われています。
forEach
JavaScript の forEachメソッドでは、配列の全ての要素に対してコールバック関数を行うことができます。
要素一つ一つに処理が行われますが、配列の途中に存在しない要素がある場合には処理が行われません。
また、繰り返し処理を中断する break や continue が使用できない点にも注意する必要があります。
以下は、forEachメソッドの基本のサンプルコードです。
const array = [1, 2, 3,, 5];
array.forEach(number => console.log(number));
// 1
// 2
// 3
// 5break と continue が使用できない事についても、for文と比較しながらみていきましょう。
// forEachメソッドの場合
const array = [1, 2, 3, 4, 5];
array.forEach((number) => {
if (value === 3) break;
console.log(value);
})
// エラー
// for文の場合
const arrayX = [1, 2, 3, 4, 5];
for(let i = 0; i < 5; i ++){
if (value === 3) break;
console.log(value);
}
// 1
// 2
// 3for文では、ifの条件に当てはまるとbreakでループ処理が中断されますが、forEachメソッドではエラーとなります。
map
JavaScript の mapメソッドでは、配列の全ての要素に対してコールバック関数を行うことができます。
一見、forEachメソッドと同じではないか？と思いますよね。
実際、基本的な構文はforEachメソッドと同じです。
しかし1点だけ違いがあり、それは実行結果が配列データとして返る点です。
そのため、returnを記述することができます。（forEachメソッドでは、returnを記述するとundefinedが返ります。）
const array = [1, 2, 3, 4, 5];
const result = array.map((value) => {
return value * 2;
});
console.log(result);
// 2
// 4
// 6
// 8
// 10無限ループ
無限ループとは、処理が永遠と繰り返されることを指します。
無限ループを引き起こしてしまうとどうなるのか、、、、。試してみることはおすすめしません。（絶対やめよう）
例えば、以下のループ処理で無限ループが発生します。
let i = 1;
while(i < 10){
console.log(i);
}
// 1
// 1
// 1
// ...(無限ループ)コーディング上のミスでも発生しうるので、十分に気をつけてコーディングを行いましょう。
入れ子
JavaScriptでは、入れ子の形でループ処理を行うことも可能です。
for(let i = 1; i < 3; i ++){
console.log('外側の処理：' + i);
for(let j = 1; j < 3; j ++){
console.log('外側の処理：' + i ' の中の' + '内側の処理：' j);
}
}
// 外側の処理：1
// 外側の処理：1 の 内側の処理：1
// 外側の処理：1 の 内側の処理：2
// 外側の処理：2
// 外側の処理：2 の 内側の処理：1
// 外側の処理：2 の 内側の処理：2外側の処理（console.log）を行った後に、内側のループ処理を行っており、内側のループ処理が完了次第、外側のループ処理に戻っています。
コメント