JavaScriptのForループ、For...Ofループ、およびFor...Inループ

序章

Loops は、反復的なタスクを自動化するためのプログラミングで使用されます。 JavaScriptで使用されるループの最も基本的なタイプは、whileおよびdo...whileステートメントです。これらは、「JavaScriptでWhileおよびDo…Whileループを構築する方法」で確認できます。 」

whileおよびdo...whileステートメントは条件付きであるため、特定のステートメントがtrueの評価として戻ったときに実行されます。 条件付きであるという点でも同様に、forステートメントには、ループカウンターなどの追加機能も含まれており、ループの反復回数を事前に設定できます。

このチュートリアルでは、JavaScriptプログラミング言語の重要な要素であるfor...ofおよびfor...inステートメントを含むforステートメントについて学習します。

Forループ

forステートメントは、最大3つのオプションの式を使用して、コードブロックの繰り返し実行を実装するループの一種です。

それが何を意味するかの例を見てみましょう。

for (initialization; condition; final expression) {
    // code to be executed
}

上記の構文では、forステートメント内に3つの式があります。初期化、条件、および最終式です。インクリメント。

基本的な例を使用して、これらの各ステートメントが何をするかを示しましょう。

forExample.js

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    // Print each iteration to the console
    console.log(i);
}

上記のコードを実行すると、次の出力が表示されます。

Output0
1
2
3

上記の例では、forループをlet i = 0で初期化しました。これにより、0でループが開始されます。 条件をi < 4に設定しました。これは、iが4未満と評価される限り、ループが実行され続けることを意味します。 i++の最終式は、ループの各反復のカウントを増分します。 console.log(i)は、0で始まり、iが4と評価されるとすぐに停止する数値を出力します。

ループを使用せずに、次のコードを使用して同じ出力を実現できたはずです。

noLoop.js

// Set initial variable to 0
let i = 0;

// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

ループが設定されていない場合、コードブロックは反復的であり、より多くの行で構成されます。 より多くの数値をインクリメントする必要がある場合は、さらに多くのコード行を記述する必要があります。

ループ内の各式を調べて、それらを完全に理解しましょう。

初期化

最初の式は初期化です。 こんな感じです。

let i = 0;

letキーワード（キーワードvarも使用できます）を使用してiという変数を宣言し、0の値を指定します。 変数には任意の名前を付けることができますが、iが最も頻繁に使用されます。 変数iは、 i terationの略で、一貫性があり、コードをコンパクトに保ちます。

調子

whileおよびdo...whileループで見たように、forループには通常条件が含まれています。 これが条件ステートメントです。

i < 4;

反復変数iが開始する0を表すことはすでに確立しています。 この例では、iが4未満である限り、条件はtrueであると言っています。

最終式

最終式は、各ループの最後に実行されるステートメントです。 ほとんどの場合、値をインクリメントまたはデクリメントするために使用されますが、任意の目的に使用できます。

i++

この例では、i++を使用して、変数を1つインクリメントしています。 これは、i = i + 1を実行するのと同じです。

初期化式や条件式とは異なり、最終的な式はセミコロンで終わりません。

それを一緒に入れて

forループに含まれる3つの式を確認したので、ループ全体をもう一度確認できます。

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    console.log(i);
}

まず、iを宣言し、0に設定します。 次に、iが4より小さくなるまでループを実行するための条件を設定しています。 最後に、iを反復ごとに1ずつインクリメントします。 コードブロックはiの値をコンソールに出力するため、結果は0、1、2、および3になります。出力。

オプションの式

forループの3つの式はすべてオプションです。 たとえば、ループの外側で変数を初期化することにより、初期化式なしで同じforステートメントを記述できます。

// Declare variable outside the loop
let i = 0;

// Initialize the loop
for (; i < 4; i++) {
    console.log(i);
}

Output0
1
2
3

この場合、最初の;は、ステートメントが省略されている場合でも、初期化、条件、または最終式のいずれを参照しているかを示すために必要です。

以下では、ループから条件を削除することもできます。 ifステートメントをbreakと組み合わせて使用し、iが3より大きくなるとループの実行を停止するように指示します。これは[の逆です。 X162X]状態。

// Declare variable outside the loop
let i = 0;

// Omit initialization and condition
for (; ; i++) {
    if (i > 3) {
        break;
    }
    console.log(i);
}

Output0
1
2
3

警告：条件を省略した場合はbreakステートメントを含める必要があります。そうでない場合、ループは無限ループとして永久に実行され、クラッシュする可能性がありますブラウザ。

最後に、代わりにループの最後に配置することで、最終的な式を削除できます。 両方のセミコロンを含める必要があります。そうしないと、ループが機能しません。

// Declare variable outside the loop
let i = 0;

// Omit all statements
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}

Output0
1
2
3

上記の例からわかるように、3つのステートメントすべてを含めると、通常、最も簡潔で読みやすいコードが生成されます。 ただし、将来遭遇した場合に備えて、ステートメントを省略できることを知っておくと便利です。

配列の変更

forループを使用して、配列を変更できます。

次の例では、空の配列を作成し、ループカウンター変数を入力します。

modifyArray.js

// Initialize empty array
let arrayExample = [];

// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
    // Update array with variable value
    arrayExample.push(i);
    console.log(arrayExample);
}

上記のJavaScriptコードを実行すると、次の出力が得られます。

Output[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

i < 3がtrueでなくなるまで実行するループを設定し、各反復の最後にarrayExample配列をコンソールに出力するようにコンソールに指示しています。 このメソッドを使用すると、配列が新しい値でどのように更新されるかを確認できます。

配列の長さ

場合によっては、反復回数が何であるかを確認せずに、ループを何度も実行したいことがあります。 前の例で行ったように静的な数値を宣言する代わりに、配列の lengthプロパティを使用して、配列内のアイテムの数だけループを実行できます。

loopThroughArray.js

// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];

// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
    // Print each item to the console
    console.log(fish[i]);
}

次の出力を受け取ります。

Outputflounder
salmon
pike

この例では、fish[i]を使用して配列の各インデックスをインクリメントします（例： ループはfish[0]、fish[1]などを介して増分します。 これにより、インデックスは反復ごとに動的に更新されます。

forステートメントの詳細については、Mozilla DeveloperNetworkを参照してください。

For…InLoop

for...inステートメントは、オブジェクトのプロパティを繰り返し処理します。 実例を示すために、いくつかの name：valueペアを持つ単純なsharkオブジェクトを作成します。

shark.js

const shark = {
    species: "great white",
    color: "white",
    numberOfTeeth: Infinity
}

for...inループを使用すると、各プロパティ名に簡単にアクセスできます。

// Print property names of object
for (attribute in shark) {
    console.log(attribute);
}

Outputspecies
color
numberOfTeeth

オブジェクトのインデックス値としてプロパティ名を使用して、各プロパティの値にアクセスすることもできます。

// Print property values of object
for (attribute in shark) {
    console.log(shark[attribute]);
}

Outputgreat white
white
Infinity

それらを組み合わせると、オブジェクトのすべての名前と値にアクセスできます。

// Print names and values of object properties
for (attribute in shark) {
    console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}

OutputSPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity

toUpperCase()メソッドを使用してプロパティ名を変更し、それに続いてプロパティ値を変更しました。 for...inは、オブジェクトのプロパティを反復処理するための非常に便利な方法です。

詳細については、Mozilla DeveloperNetworkでfor...inを確認してください。

For…OfLoop

for...inステートメントは、オブジェクトプロパティを反復処理するのに役立ちますが、arraysやstringsなどの反復可能オブジェクトを反復処理するには、for...ofステートメントを使用できます。 。 for...ofステートメントは、 ECMAScript6以降の新しい機能です。 ECMAScript（またはES）は、JavaScriptを標準化するために作成されたスクリプト言語仕様です。

このfor...ofループの例では、配列を作成し、配列内の各アイテムをコンソールに出力します。

sharks.js

// Initialize array of shark species
let sharks = [ "great white", "tiger", "hammerhead" ];

// Print out each type of shark
for (let shark of sharks) {
    console.log(shark);
}

for...ofステートメントからの出力として次を受け取ります。

Outputgreat white
tiger
hammerhead

entries()メソッドを使用して、インデックス要素に関連付けられたインデックスを印刷することもできます。

sharks.js

...
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
    console.log(index, shark);
}

Output0 'great white'
1 'tiger'
2 'hammerhead'

文字列は、配列と同じ方法で繰り返すことができます。

sharkString.js

// Assign string to a variable
let sharkString = "sharks";

// Iterate through each index in the string
for (let shark of sharkString) {
    console.log(shark);
}

Outputs
h
a
r
k
s

この場合、文字列内の各文字をループして、順番に出力します。

for...inとfor...ofの違いの詳細については、Mozilla DeveloperNetworkのfor...ofループについてお読みください。

結論

このチュートリアルでは、JavaScriptでforループを構築する方法を学びました。これは、for、for...of、およびfor...inステートメントで構成されています。

ループはJavaScriptのプログラミングの不可欠な部分であり、反復的なタスクを自動化し、コードをより簡潔で効率的にするために使用されます。