For…ループ・オン・マイ・マインド

初めて JavaScript を使用するのは、特にバックグラウンドでコーディングを行っていない場合は、確かに難しいかもしれません。JavaScript を学習している方なら、JavaScript がオブジェクト指向言語であることは理解しているでしょう。つまり、JavaScript はオブジェクトとそのプロパティとメソッドの概念に基づいています。JavaScript で作業すると、Web ページの構造を表すドキュメント オブジェクト モデル (DOM) を簡単に操作できます。JavaScript は、あなたや私が日常的に使用するインタラクティブな Web ページを作成するために、HTML や CSS などの他のテクノロジと組み合わせて使用​​されることがよくあります。Web 上で最も一般的に使用されているプログラミング言語の 1 つであるこの言語は、JavaScript のエキスパートになるために学ぶべきことがたくさんあります。

このような複雑なコーディング言語の学習には課題があります。JavaScript はイベント駆動型、つまりコードの実行がユーザー入力、ページの読み込み、ネットワーク リクエストなどのイベントに基づいているため、JavaScript を上手に作成するには、さまざまなオブジェクトおよび配列メソッドがどのように機能するかをよく理解する必要があります。

JavaScript 内のより複雑なメソッドに苦戦している場合でも、基本に立ち返り、JavaScript 内でさまざまなタイプの for ループがどのように機能するかを詳しく説明します。

for…ループとは何ですか?

JavaScript の for ループは、コードのブロックを指定した回数だけ繰り返すことができる制御構造です。for ループの基本的な構文は次のとおりです。

初期化セクションは、ループの先頭で 1 回だけ実行されます。通常、カウンター変数を初期化するために使用されます。ループの各反復の前に条件がチェックされ、それが true と評価されると、ループ内のコード ブロックが実行されます。条件が false と評価された場合、ループは終了します。インクリメント セクションは各反復の最後に実行され、通常はカウンター変数を更新するために使用されます。

たとえば、次のコードは for ループを使用して 1 ～ 10 の数字をコンソールに出力します。

この例では、初期化セクションは変数 i を 1 に初期化し、条件セクションは i が 10 以下であるかどうかを確認し、増分セクションは反復ごとに i を 1 ずつ増分します。これにより、ループが 10 回実行され、各反復で i の値がコンソールに出力されます。

for ループに加えて、JavaScript では for…in ループと for…of ループを使用することもできます。これらはそれぞれオブジェクトと配列を反復処理するために使用されます。

for…in ループを理解する

for…ループは一連の数値または配列を反復処理するために使用されますが、for…in ループは通常、オブジェクトのプロパティを反復処理する場合に使用されます。

for…in ループの基本的な構文は次のとおりです。

変数はループの反復ごとに作成される新しい変数で、オブジェクトのプロパティの名前を取得します。オブジェクトは、そのプロパティが反復処理されるオブジェクトです。

たとえば、次のコードは for…in ループを使用してオブジェクトのプロパティを反復処理し、その値をコンソールに出力します。

この例では、変数「key」がループの反復ごとに作成され、オブジェクト「person」のプロパティの名前を取得し、key 変数を使用してそのプロパティの値にアクセスします。出力は次のようになります。

オブジェクト内のプロパティの順序は保証されていない可能性があることに注意してください。そのため、for…in ループを使用する場合は、特定の順序に依存しないでください。また、for…in ループは配列では機能しません。その場合は、for..of ループまたは forEach() ループを使用する必要があります。

for…of ループを理解する

JavaScript の for…of ループは、配列や文字列などの反復可能なオブジェクトの要素を反復処理するために使用されます。

for…of ループの基本的な構文は次のとおりです。

この変数は、ループの反復ごとに作成される新しい変数であり、反復可能オブジェクト内の現在の要素の値を取得します。iterable は、その要素が反復処理されるオブジェクトです。

たとえば、次のコードは for…of ループを使用して配列の要素を反復処理し、その値をコンソールに出力します。

この例では、ループの反復ごとに変数「number」が作成され、配列内の現在の要素の値が取得されます。出力は次のようになります。

forEach() ループを理解する

forEach() メソッドは、配列の各要素に対して指定された関数を実行できるようにする配列メソッドです。forEach() はオブジェクトに対して使用できないことに注意してください。そのため、これは配列を反復処理する場合に最適なメソッドです。

forEach メソッドの基本的な構文は次のとおりです。

関数の最初のパラメータは現在の要素、2 番目のパラメータは現在の要素のインデックス、3 番目のパラメータは配列です。オプションの thisValue パラメーターを指定して、関数内で this キーワードとして使用することもできます。

たとえば、次のコードは forEach メソッドを使用して配列の要素を反復処理し、その値をコンソールに出力します。

オブジェクトのプロパティを反復処理する場合は、for…in ループを使用するか、オブジェクト自体のプロパティ名の配列を取得した順序で返す Object.keys() メソッドを使用できます。通常のループで。そして、forEach メソッドを使用してその配列を反復処理できます。

ラップされた for ループ

結論として、for ループは JavaScript で配列とオブジェクトを反復処理するための重要なツールです。これらは、コードのブロックを複数回実行する方法を提供するため、配列の要素をループしたり、オブジェクトのプロパティを反復したりするなどのタスクに役立ちます。

JavaScript はさまざまなタイプの for ループを提供しており、それぞれに独自の使用例があります。

• for ループは、一連の数値または配列を反復処理するために使用されます。
• for…in ループは、オブジェクトのプロパティを反復処理するために使用されます。
• for…of ループは、配列や文字列などの反復可能なオブジェクトの要素を反復処理するために使用されます。
• forEach() メソッドは、配列の各要素に対して指定された関数を実行できるようにする配列メソッドです。

現在のタスクに適切なタイプのループを使用すると、コードがより読みやすく、効率的になり、エラーが発生しにくくなります。したがって、さまざまなタイプのループとそれらをいつ使用するかを理解することは、JavaScript を使用した開発の重要な側面です。