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 `ステートメントはhttps://www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript[conditionally based]であるため、実行されます与えられたステートメントが ` true `への評価として返されたとき。 同様に条件ベースであるという点で、 ` for +`ステートメントには* loop counter *などの追加機能も含まれており、ループの繰り返し回数を事前に設定できます。

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

ループ用

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

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

for (; ; ) {
   // 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 i」ループを「+ 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 」キーワードで「 i 」という変数を宣言し(キーワード「 var 」も使用できます)、値に「+0」を指定します。 変数には任意の名前を付けることができますが、「+ i 」が最も頻繁に使用されます。 変数 ` i +`は i terationを表し、一貫性があり、コードをコンパクトに保ちます。

調子

「+ while」ループと「+ do …​ while」ループで見たように、「+ for」ループには通常* condition *が含まれます。 これが条件ステートメントです。

i < 4;

繰り返し変数 `+ i `は、開始する ` 0 `を表すことをすでに確立しています。 この例では、「 it」が「4」よりも小さい限り、条件は「+ true」であると言っています。

最終的な表現

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

i++

この例では、変数を1つ増やし、 `+ i +`を使用しています。 これは、「+ 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 」が「 true 」条件の逆である「+3」よりも大きくなるとループの実行を停止するように指示します。

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

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

// 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 +」ループを使用して、https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript [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 +`配列をコンソールに出力するようコンソールに指示します。 このメソッドを使用すると、新しい値で配列が更新される様子を確認できます。

配列の長さ

場合によっては、繰り返しの回数がわからないままループを何度も実行したい場合があります。 前の例で行ったように静的な番号を宣言する代わりに、https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript#indexing-arrays [`+ 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] +`などを介して増加します)。 これにより、インデックスは反復ごとに動的に更新されます。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for [`+ for +`ステートメントの詳細は、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 +`は、オブジェクトのプロパティを反復処理する非常に便利な方法です。

詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…​in [+ for …​ in + on the Mozilla Developer Network]を参照してください。

For…Ofループ

`+ for …​ in `ステートメントはオブジェクトのプロパティを反復するのに便利ですが、https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#arraysのような反復可能なオブジェクトを反復するのに役立ちます[配列]およびhttps://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#strings [strings]、 ` for …​ of `ステートメントを使用できます。 ` for …​ of +`ステートメントは、http://es6-features.org/ [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 」の違いの詳細については、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenceをご覧ください。 /Statements/for...of[Mozilla Developer Networkでの ` for …​ of +`ループ]。

結論

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

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