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

投稿日: 2022-04-20 2022-10-15
タグ: Development, javascript

序章

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

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

このチュートリアルでは、 for ステートメントを含む for...of と for...in JavaScriptプログラミング言語の重要な要素であるステートメント。

Forループ

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

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

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

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

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

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++ ループの各反復のカウントをインクリメントします。 The 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;

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

調子

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

i < 4;

反復変数は、 i、を表す 0 始めること。今、私たちは条件が true に限って i より少ない 4 この例では。

最終式

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

i++

この例では、変数を1つ増やしています。 i++. これはランニングと同じです i = i + 1.

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

それを一緒に入れて

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

// 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 出力として。

オプションの式

の3つの式すべて for ループはオプションです。たとえば、同じように書くことができます 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

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

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

// 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プロパティを使用して、配列内のアイテムの数だけループを実行できます。

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

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

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

The for...in ステートメントはオブジェクトのプロパティを反復処理するのに役立ちますが、配列や文字列などの反復可能なオブジェクトを反復処理するには、 for...of 声明。 The 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ループについてお読みください。

結論

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

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

getdocs

13036