【JavaScript】ループ処理
for
for (let i = 0; i < 10; i++) {
console.log(i)
}forは最も一般的なループ処理で、初期化式、条件式、変化式で構成されます。
初期化式は、ループに使用する変数とその初期値を設定します。
条件式は、ループの実行条件を設定します。
初期化式で指定した変数を用い、falseとなった時点でループは終了します。
変化式は、ループの 1 回の処理が終了する度に、変数を変化させるための処理を設定します。
while
let i = 0
while (i < 10) {
console.log(i)
i++
}whileは条件式のみを指定し、その条件がfalseになるまで処理をループします。
条件式の判定は、処理の実行前に行われます。
do...while
let i = 0
do {
console.log(i)
i++
} while (i < 10)do...whileは、whileと同じく条件式のみを指定するループ方法です。
whileと異なり、条件式の判定は処理の実行後に行われます。
つまり、以下のように最初から条件式を満たさない場合でも 1 回は処理が実行されます。
let i = 10
do {
console.log(i) //10が出力される
i++
} while (i < 10)for...in
const obj = {
a: 1,
b: 2,
c: 3,
}
for (let prop in obj) {
console.log(prop, obj[prop])
}
//出力結果
//"a", 1
//"b", 2
//"c", 3for...inは、オブジェクトのプロパティに対してループ処理を行います。
for (変数 in オブジェクト)とすることで、オブジェクトのすべてのプロパティが順に変数に設定されます。
配列（Array）はプロパティ = インデックスのため、変数にはインデックスが設定されます。
const ary = [1, 2, 3]
for (let prop in ary) {
console.log(prop, ary[prop])
}
//出力結果
//0, 1
//1, 2
//2, 3for...of
const obj = {
a: 1,
b: 2,
c: 3,
}
for (let val of obj) {
console.log(val)
}
//出力結果
//1
//2
//3for...ofは、オブジェクトの値に対してループ処理を行います。
考え方はfor...inと同じく、for (変数 of オブジェクト)とすることで、オブジェクトのすべての値が順に変数に設定されます。
for...ofは配列に使用されるケースが多いです。
ループ制御
break
const x = 3
for (let i = 0; i < 10; i++) {
if (i === x) {
break
}
console.log(i) //i = 2まで実行される
}breakは、強制的にループ処理を終了させることができます。
continue
const x = 3
for (let i = 0; i < 10; i++) {
if (i === x) {
continue
}
console.log(i) //i = 3の場合のみ実行されない
}continueは、強制的に次のループ処理に移行させることができます。
よってcontinue以降の処理はすべて無視されます。
ラベル付きループ
const x = 3
//break
loop1: for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
if (j === x) {
break loop1
}
console.log(j) //0, 1, 2まで出力される
}
console.log(i) //出力されることはない
}//continue
loop2: for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
if (j === x) {
continue loop2
}
console.log(j) //0, 1, 2がiの回数分（10回）出力される
}
console.log(i) //出力されることはない
}ループ処理にはラベルを付与することができます。
ラベルは、例のような多重ループに対して効果を発揮します。
break ラベルとすると、ラベルの付いたループ処理自体を終了させることができます。
continue ラベルとすると、ラベルのついたループ処理を次の処理へと移行させることができます。
forEach
const ary = [1, 2, 3]
ary.forEach((e) => console.log(e)) //1, 2, 3forEachはArrayのメソッドとして定義されているループ処理です。
処理はアロー関数を用いて定義します。