TOC

JavaScriptでforループを構築する方法

前書き

Loopsは、反復タスクを自動化するためのプログラミングで使用されます。 JavaScriptで使用される最も基本的なタイプのループは、whileステートメントとdo...whileステートメントです。これらは、「https://www.digitalocean.com/community/tutorials/using-while-and-」で確認できます。 do-while-loops-in-javascript [JavaScriptでWhileおよびDo…Whileループを構築する方法]。」

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

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

ループ用

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

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

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

上記の構文では、forステートメント内に3つの式があります。initialization、condition、およびfinal expressionで、インクリメントとも呼ばれます。

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

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++);

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

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

初期化

最初の式はinitializationです。 これはそれがどのように見えるかです。 

let i = 0;

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

調子

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

i < 4;

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

最終的な表現

final expressionは、各ループの最後に実行されるステートメントです。 ほとんどの場合、値を増分または減分するために使用されますが、任意の目的に使用できます。 

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未満になるまでループを実行するための条件を設定します。 最後に、反復ごとに1ずつiをインクリメントします。 コードブロックは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より大きくなるとループの実行を停止するように指示します。これはtrueの逆です。調子。 

// 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

[.note]＃Warning：条件が省略されている場合はbreakステートメントmustが含まれます。含まれていない場合、ループはinfinite loopとして永久に実行され、ブラウザーがクラッシュする可能性があります。
＃

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

// 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ループを使用して、arrayを変更できます。

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

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 propertyを使用して、配列内の項目の数だけループを実行できます。

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 statement is available on the Mozilla Developer Networkの詳細。

For…In Loop

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は、オブジェクトのプロパティを反復処理するための非常に便利な方法です。

詳細については、for...in on the Mozilla Developer Networkを確認してください。

For…Ofループ

for...inステートメントは、オブジェクトプロパティを反復処理するのに役立ちますが、arraysやstringsなどの反復可能オブジェクトを反復処理するには、for...ofステートメントを使用できます。 for...ofステートメントは、ECMAScript 6以降の新しい機能です。 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の違いの詳細については、for...of loops on the Mozilla Developer Networkについてお読みください。

結論

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

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

Related