TypeScript ループ
時には、同じコードブロックを複数回実行する必要があるかもしれません。通常、文は順番に実行されます。関数の最初の文が実行され、次に2番目の文、というように続きます。
プログラミング言語は、より複雑な実行経路を実現するためのさまざまな制御構造を提供します。
ループ文を使用すると、文または文のグループを複数回実行できます。以下は、ほとんどのプログラミング言語におけるループ文のフローチャートです。
for ループ
TypeScript の for ループは、文のシーケンスを複数回実行するために使用され、ループ変数を管理するコードを簡素化します。
構文
構文は次のとおりです。
for ( init; condition; increment ){
statement(s);
}
for ループの制御フローの説明は次のとおりです。
- initまず最初に実行され、一度だけ実行されます。このステップでは、ループ制御変数を宣言および初期化できます。ここに文を書かなくても、セミコロンがあれば問題ありません。
- 次に、condition条件が評価されます。true の場合はループ本体が実行されます。false の場合はループ本体は実行されず、制御フローは for ループの直後の次の文に移動します。
- for ループ本体の実行後、制御フローは上記のincrement文に戻ります。この文では、ループ制御変数を更新できます。この文は空のままにすることもできます。その場合は、条件の後にセミコロンが必要です。
- 条件が再度評価されます。true の場合はループが実行され、このプロセスが繰り返されます（ループ本体、次に増分、そして条件の再評価）。条件が false になると、for ループは終了します。
ここで、statement(s) は単一の文でも、複数の文からなるコードブロックでもかまいません。
condition は任意の式でかまいません。条件が true のときにループを実行し、条件が false のときにループを終了します。
フローチャート
例
次の例では、5 の階乗を計算します。for ループで 5 から 1 までの数値を生成し、毎回のループで数値の積を計算します。
TypeScript
上記のコードをコンパイルすると、次の JavaScript コードが得られます。
JavaScript
上記の JavaScript コードを実行すると、出力結果は次のとおりです。
120
for...in ループ
for...in 文は、値の集合またはリストを反復処理して出力するために使用されます。
構文
構文は次のとおりです。
for (var val in list) {
//语句
}
val は string 型または any 型である必要があります。例
TypeScript
上記のコードをコンパイルすると、次の JavaScript コードが得られます。
JavaScript
上記の JavaScript コードを実行すると、出力結果は次のとおりです。
a b c
for…of 、forEach、every と some ループ
さらに、TypeScript は for…of 、forEach、every と some ループもサポートしています。
for...of 文は、反復可能なオブジェクトを反復処理するループを作成します。ES6 で導入された for...of ループは、for...in と forEach() を置き換え、新しい反復プロトコルをサポートします。for...of を使用すると、Arrays（配列）、Strings（文字列）、Maps（マップ）、Sets（セット）などの反復可能なデータ構造を走査できます。
TypeScript for...of ループ
forEach、every と some は JavaScript のループ構文であり、TypeScript は JavaScript の構文スーパーセットであるため、当然デフォルトでサポートされています。
forEach は iteration（反復）内で return できないため、forEach の代わりに every と some を使用できます。
TypeScript forEach ループ
TypeScript every ループ
while ループ
while 文は、指定された条件が true の間、文または文のグループを繰り返し実行します。ループ本体が実行される前に条件がテストされます。
構文
構文は次のとおりです。
while(condition)
{
statement(s);
}
ここで、statement(s) は単一の文でも、複数の文からなるコードブロックでもかまいません。
condition は任意の式でかまいません。条件が true のときにループを実行します。条件が false のとき、プログラムの流れはループを終了します。
フローチャート
図中、whileループの重要な点は、ループが一度も実行されない可能性があることです。条件が false の場合、ループ本体はスキップされ、while ループの直後の次の文が実行されます。
例
TypeScript
上記のコードをコンパイルすると、次の JavaScript コードが得られます。
JavaScript
上記の JavaScript コードを実行すると、出力結果は次のとおりです。
5 的阶乘为：120
do...while ループ
for ループとは異なり、forとwhileそれらはループの先頭でループ条件をテストします。do...whileループはループの末尾で条件をチェックします。
構文
構文は次のとおりです。
do
{
statement(s);
}while( condition );
条件式がループの末尾にあることに注意してください。そのため、ループ内の statement(s) は条件がテストされる前に少なくとも 1 回は実行されます。
条件が true の場合、制御フローは上記の do に戻り、ループ内の statement(s) を再実行します。このプロセスは、指定された条件が false になるまで繰り返されます。
フローチャート
例
TypeScript
上記のコードをコンパイルすると、次の JavaScript コードが得られます。
JavaScript
上記の JavaScript コードを実行すると、出力結果は次のとおりです。
10 9 8 7 6 5 4 3 2 1 0
break 文
break文には次の 2 つの使い方があります。
- 当 break文がループ内に現れると、ループはすぐに終了し、プログラムの流れはループの直後の次の文の実行を続けます。
- これは、switchswitch 文内の case を終了するために使用できます。
ネストされたループ（つまり、あるループの中に別のループがネストされている場合）を使用している場合、break 文は最も内側のループの実行を停止し、そのブロックの後の次の行のコードを実行し始めます。
構文
構文は次のとおりです。
break;
フローチャート
例
TypeScript
上記のコードをコンパイルすると、次の JavaScript コードが得られます。
JavaScript
上記の JavaScript コードを実行すると、出力結果は次のとおりです。
在 1~10 之间第一个被 5 整除的数为 : 5
continue 文
continue文は少しbreakbreak 文に似ています。ただし、強制終了ではなく、continue は現在のループ内のコードをスキップして、次のループの開始を強制します。
に対してforfor ループでは、continue文の実行後、増分文は引き続き実行されます。一方、whileとdo...whilewhile ループでは、continue文は条件判断文を再実行します。
構文
構文は次のとおりです。
continue;
フローチャート
例
TypeScript
上記のコードをコンパイルすると、次のJavaScriptコードが得られます：
JavaScript
上記のJavaScriptコードを実行すると、出力結果は次のようになります：
0 ~20 之间的奇数个数为: 10
無限ループ
無限ループとは、実行し続けて停止しないループのことです。forループとwhileループの両方で無限ループを作成できます。
forで無限ループを作成する構文形式：
for(;;) {
// 语句
}
例
for(;;) {
console.log("这段代码会不停的执行")
}
whileで無限ループを作成する構文形式：
while(true) {
// 语句
}
例
while(true) {
console.log("这段代码会不停的执行")
} その他の拡張