サーチ…
構文
- for( 初期化 ; 条件 ; final_expression ){}
- for( オブジェクトの キー ){}
- for( iterableの 変数 ){}
- while( 条件 ){}
- do {} while( 条件 )while
- each( オブジェクトの 変数 ){} // XML用のECMAScript
備考
JavaScriptのループは、通常、特定のコードx回の繰り返しを含む問題を解決するのに役立ちます。メッセージを5回記録する必要があるとします。あなたはこれを行うことができます:
console.log("a message");
console.log("a message");
console.log("a message");
console.log("a message");
console.log("a message");
しかしそれはちょうど時間がかかり、ちょっとばかげたことです。さらに、300以上のメッセージをログに記録する必要がある場合はどうすればいいですか?コードを従来の「for」ループで置き換える必要があります。
for(var i = 0; i < 5; i++){
console.log("a message");
}
標準の "for"ループ
標準使用
for (var i = 0; i < 100; i++) {
console.log(i);
}
期待される出力:
0
1
...
99
複数の宣言
通常、配列の長さをキャッシュするために使用されます。
var array = ['a', 'b', 'c'];
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
期待される出力:
'a'
'b'
'c'
インクリメントの変更
for (var i = 0; i < 100; i += 2 /* Can also be: i = i + 2 */) {
console.log(i);
}
期待される出力:
0
2
4
...
98
デクリメントループ
for (var i = 100; i >=0; i--) {
console.log(i);
}
期待される出力:
100
99
98
...
0
「while」ループ
標準Whileループ
与えられた条件がfalseになるまで標準whileループが実行されます:
var i = 0;
while (i < 100) {
console.log(i);
i++;
}
期待される出力:
0
1
...
99
デクリメントループ
var i = 100;
while (i > 0) {
console.log(i);
i--; /* equivalent to i=i-1 */
}
期待される出力:
100
99
98
...
1
Do ... whileループ
do ... whileループは、条件がtrueかfalseかにかかわらず、少なくとも1回は常に実行されます。
var i = 101;
do {
console.log(i);
} while (i < 100);
期待される出力:
101
ループの「中断」
whileループの中断
var i = 0;
while(true) {
i++;
if(i === 42) {
break;
}
}
console.log(i);
期待される出力:
42
forループからの脱出
var i;
for(i = 0; i < 100; i++) {
if(i === 42) {
break;
}
}
console.log(i);
期待される出力:
42
ループを「続ける」
"for"ループの継続
continue
キーワードをforループに入れると、実行は更新式(この例ではi++
)にジャンプします。
for (var i = 0; i < 3; i++) {
if (i === 1) {
continue;
}
console.log(i);
}
期待される出力:
0
2
Whileループの継続
whileループをcontinue
と、実行は条件にジャンプします(この例ではi < 3
)。
var i = 0;
while (i < 3) {
if (i === 1) {
i = 2;
continue;
}
console.log(i);
i++;
}
期待される出力:
0
2
"do ... while"ループ
var availableName;
do {
availableName = getRandomName();
} while (isNameUsed(name));
do while
ループは、反復の終了時にのみ条件がチェックされるため、少なくとも1回は実行されることが保証されています。伝統的なwhile
ループは、反復の開始時にその条件がチェックされるときに0回以上実行されることがあります。
特定のネストされたループを解除する
私たちはループに名前をつけ、必要に応じて特定のループを壊すことができます。
outerloop:
for (var i = 0;i<3;i++){
innerloup:
for (var j = 0;j <3; j++){
console.log(i);
console.log(j);
if (j == 1){
break outerloop;
}
}
}
出力:
0
0
0
1
ブレークしてラベルを続ける
Break文とcontinue文の後ろには、goto文のような働きをするオプションのラベルを続けることができます。ラベル参照位置から実行を再開します
for(var i = 0; i < 5; i++){
nextLoop2Iteration:
for(var j = 0; j < 5; j++){
if(i == j) break nextLoop2Iteration;
console.log(i, j);
}
}
i = 0 j = 0は残りのj値をスキップする
1 0
i = 1 j = 1は残りのj値をスキップする
2 0
2 1 i = 2 j = 2は残りのj値をスキップする
3 0
3 1
3 2
i = 3 j = 3は残りのj値をスキップする
4 0
4 1
4 2
4 3
i = 4 j = 4はログに記録されず、ループは完了する
"for ... of"ループ
const iterable = [0, 1, 2];
for (let i of iterable) {
console.log(i);
}
期待される出力:
0
1
2
for ... ofループの利点は次のとおりです。
- これは配列要素をループするための最も簡潔で直接的な構文です
- それはforのすべての落とし穴を避けます...
-
forEach()
とは異なり、break、continue、returnで動作します
他のコレクションの...のサポート
文字列
for ... ofは文字列をUnicode文字列として扱います:
const string = "abc";
for (let chr of string) {
console.log(chr);
}
期待される出力:
a b c
セット
for ... for Setオブジェクトの作業。
注意 :
const names = ['bob', 'alejandro', 'zandra', 'anna', 'bob'];
const uniqueNames = new Set(names);
for (let name of uniqueNames) {
console.log(name);
}
期待される出力:
ボブ
アレハンドロ
ザンドラ
アンナ
地図
また、for ... ofループを使ってMapを繰り返し処理することもできます。これは、反復変数がキーと値の両方を格納することを除いて、配列とセットと同様に機能します。
const map = new Map()
.set('abc', 1)
.set('def', 2)
for (const iteration of map) {
console.log(iteration) //will log ['abc', 1] and then ['def', 2]
}
非構造化割り当てを使用して、キーと値を別々に取得することができます。
const map = new Map()
.set('abc', 1)
.set('def', 2)
for (const [key, value] of map) {
console.log(key + ' is mapped to ' + value)
}
/*Logs:
abc is mapped to 1
def is mapped to 2
*/
オブジェクト
for ... forループは 、単純なオブジェクトでは直接動作しません 。 for ... inループに切り替えるかObject.keys()
を使用してオブジェクトのプロパティを反復処理することは可能です:
const someObject = { name: 'Mike' };
for (let key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
期待される出力:
名前:Mike
"for ... in"ループ
警告
for ... inは、配列インデックスではなく、オブジェクトキーを反復するためのものです。 それを使って配列をループするのは一般的にはお勧めできません 。また、プロトタイプのプロパティも含まれているため、hasOwnProperty
を使用してキーがオブジェクト内にあるかどうかを確認する必要があります。オブジェクトの属性がdefineProperty/defineProperties
メソッドで定義され、paramenumerable: false
設定されてenumerable: false
場合、これらの属性にはアクセスできなくなります。
var object = {"a":"foo", "b":"bar", "c":"baz"};
// `a` is inaccessible
Object.defineProperty(object , 'a', {
enumerable: false,
});
for (var key in object) {
if (object.hasOwnProperty(key)) {
console.log('object.' + key + ', ' + object[key]);
}
}
期待される出力:
object.b、bar
object.c、baz