JavaScript の for ループを学ぶにはどうすればよいですか?

JS for ループ構文

JS for ループは、ループの数がわかっている場合の使用に適しており、構文形式は次のとおりです。

for(initialization; condition; increment) {
    // 要执行的代码
}

for ループには、初期化、条件、増分などの 3 つのオプションの式が含まれています。

初期化:式または変数の宣言の場合、通常、このステップを「カウンター変数の初期化」と呼び、ループ中に 1 回だけ実行されます。
条件: while ループの条件式と同じ機能を持つ条件式です。通常、カウンタの値と比較してループするかどうかを決定するために使用されます。この式はループ回数を設定できます。
increment:は、各ループの後にカウンターの値を更新 (インクリメントまたはデクリメント) するために使用される式です。

サンプルコードは次のとおりです。

for (var i = 1; i <= 10; i++) {
    document.write(i + " ");
}

操作結果:

1 2 3 4 5 6 7 8 9 10

上記のコードではループ開始前に実行しvar i = 1;、変数iをカウンタとして真かどうかを判定しi <= 10、真であれば{ }途中のコードを実行します。失敗すると、for ループは終了します。各ループの実行が完了すると、i++操作が実行されます。つまり、カウンター値が更新されます。

[例] for ループを使用して配列の内容を走査します。

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
for(var i = 0; i < fruits.length; i++) {
    document.write(fruits[i] + "&emsp;");
}

操作結果:

アップルバナナマンゴーオレンジパパイヤ

JS for ループ内の 3 つの式

次の例に示すように、JS for ループのかっこ内の 3 つの式は省略できますが、3 つの式を区切るセミコロンは省略できません。

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

ループのネスト用の JS

ループの種類に関係なく、入れ子で使用できます (つまり、1 つ以上のループがループ内で定義されます)。ループの入れ子の使用を示すために for ループを例に挙げてみましょう。

for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        document.write(j + " x " + i + " = " + (i * j) + "&emsp;");
    }
    document.write("<br>");
}

操作結果:

1 x 1 = 1 
1 x 2 = 2 2 x 2 = 4 
1 x 3 = 3 2 x 3 = 6 3 x 3 = 9 
1 x 4 = 4 2 x 4 = 8 3 x 4 = 12 4 x 4 = 16 
1 x 5 = 5 2 x 5 = 10 3 x 5 = 15 4 x 5 = 20 5 x 5 = 25 
1 x 6 = 6 2 x 6 = 12 3 x 6 = 18 4 x 6 = 24 5 x 6 = 30 6 x 6 = 36 
1 x 7 = 7 2 x 7 = 14 3 x 7 = 21 4 x 7 = 28 5 x 7 = 35 6 x 7 = 42 7 x 7 = 49 
1 x 8 = 8 2 x 8 = 16 3 x 8 = 24 4 x 8 = 32 5 x 8 = 40 6 x 8 = 48 7 x 8 = 56 8 x 8 = 64 
1 x 9 = 9 2 x 9 = 18 3 x 9 = 27 4 x 9 = 36 5 x 9 = 45 6 x 9 = 54 7 x 9 = 63 8 x 9 = 72 9 x 9 = 81

ループのバリエーションについて

オブジェクト、配列、文字列などをより便利に走査するために、JS は 2 つの for ループのバリアント、つまり for in ループと for of ループもサポートしています。

JS for in ループは特殊なタイプのループであり、通常の for ループの変形です。主にオブジェクトを走査するために使用されます。オブジェクト内の属性を順番にループアウトするために使用できます。その構文形式は次のとおりです。

for (variable in object) {
    // 要执行的代码
}

このうち、variable は変数で、この変数にはループするたびに異なる値が代入されます。{ }

この変数を使用して、一連の操作を実行します。object は、走査されるオブジェクトです。各ループでは、オブジェクト内のすべての属性が走査されるまで、object オブジェクト内の属性のキーが変数 variable に割り当てられます。

インループ用の JS サンプルコード:

// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
    document.write("<p>" + prop + " = " + person[prop] + "</p>");
}

操作結果:

name = Clark
surname = Kent
age = 36

JS for in ループはオブジェクトを走査するために作成されることに注意してください。配列も走査できますが、お勧めできません。配列を走査するには、for ループまたは for of ループを使用できます。

JS の for of ループはECMAScript6 で新しく追加されたループメソッドで、for in ループに似ており、通常の for ループの変形でもあります。for of ループを使用すると、配列やその他の走査可能なオブジェクト (文字列、オブジェクトなど) を簡単に走査できます。

JS for of ループの構文形式は次のとおりです。

for (variable of iterable) {
    // 要执行的代码
}

このうち、variable は変数で、この変数にはループするたびに異なる値が代入され、後で使用できます。{ }

この変数を使用して、一連の操作を実行します。iterable は、走査されるコンテンツです。各ループでは、iterable のすべての値が走査されるまで、iterable の値が変数 variable に割り当てられます。

サンプルコードは次のとおりです。

// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
    document.write(value + ", ");
}
document.write("<br>");
// 定义一个字符串
var str = "Hello World!";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {
    document.write(value + ", ");
}
document.write("<br>");
// 定义一个对象
var obj = {"name": "Clark", "surname": "Kent", "age": "36"};
// 使用 for of 循环遍历对象中的所有属性
for(var value in obj) {
    document.write(value + ", ");
}

操作結果:

a, b, c, d, e, f,
H, e, l, l, o, , W, o, r, l, d, !,
name, surname, age,

for of ループでもオブジェクトをトラバースすることはできますが、お勧めできません。オブジェクトをトラバースしたい場合は、for in ループを使用できます。

Dark Horse プログラマー向けのフロントエンド JavaScript の入門から習得までの完全なビデオチュートリアルと、高度な ES6 構文、API、およびコア JavaScript の js に関する基本的な知識と実践的なチュートリアルです。