JavaScript の for ループの概要

JavaScript には、配列、オブジェクト、またはその他の反復可能なデータ構造を反復するために使用できるさまざまなループステートメントがあります。これらの一般的に使用されるループには、for ループ、for-in ループ、for-of ループ、および forEach メソッドが含まれます。この記事では、それらの特徴と使用法を順番に紹介します。

1. for ループ:

for (初期化; 条件; インクリメント){

// ループ本体

}

このうち、初期化はループ変数を初期化するためにループの開始前に実行されるコードブロック、条件は各ループの前にチェックされる条件、条件が false の場合はループが終了、インクリメントはループの後に実行されるコードです。各ループが終了するブロック、ループ変数の値を更新するために使用されます。

これは最も一般的なループ方法であり、反復回数がわかっている状況に適しています。

例：

const arr = [10, 20, 30, 40, 50];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

この例では、初期化部分で let キーワードを使用して変数 i を宣言し、その初期値を 0 に設定します。条件部分では、小なり演算子 (<) を使用して、i が arr 配列の長さより小さいかどうかを判断します。i が配列の長さより小さい場合にのみ、ループは実行を継続します。演算部分では++演算子を使用してiの値を1ずつ増やします。

出力結果:

10
20
30
40
50

オプションパーツの一部を省略することも可能です。たとえば、次のループでは、初期化部分が省略され、ループカウンタが 0 に初期化されます。上記のコードは次のように変更できます。

const arr = [10, 20, 30, 40, 50];
let i = 0;
for (; i < arr.length; i++) {
  console.log(arr[i]);
}

2. for-in ループ:

for (オブジェクト内の var キー) {

if (object.hasOwnProperty(key)) {

// ループ本体

}

for-in ループは、オブジェクトのプロパティを走査するために使用されます。ここで、 key はオブジェクトの各プロパティの名前を表します。このメソッドはオブジェクトのプロパティ (キーと値のペア) を走査するために使用され、配列の走査には適していないことに注意してください。

例：

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ": " + obj[key]);
  }
}

出力結果:

a: 1
b: 2
c: 3

3. for-of ループ:

for (反復可能な変数項目) {

// ループ本体

}

for-of ループは ES6 で導入された新機能で、反復可能なオブジェクト (配列、文字列、セット、マップなど) を走査するために使用できます。各ループでは、 item はインデックスやキーではなく、反復可能なオブジェクトの各要素の値を表します。このメソッドは、配列、文字列、および反復可能プロトコルに従うその他のオブジェクトを走査するのに適しています。

例：

const arr = [10, 20, 30, 40, 50];
for (let item of arr) {
  console.log(item);
}

出力結果:

10
20
30
40
50

4. さらに、JavaScript は配列を走査するための forEach() メソッドも提供します。:

array.forEach(関数(項目, インデックス, 配列) {

// ループ本体

});

forEach() は配列オブジェクトによって提供されるメソッドです。forEach メソッドには戻り値はなく、配列内の各要素を走査するために使用されます。各ループでは、現在の要素、インデックス、および元の配列がコールバック関数を通じて処理されます。forEach() メソッドは配列全体を走査し、(例外がスローされない限り) ループを途中で抜け出すことができないことに注意してください。

例：

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array) {
  console.log("Index: " + index + ", Value: " + item);
});

出力結果:

インデックス: 0、値: 10
インデックス: 1、値: 20
インデックス: 2、値: 30
インデックス: 3、値: 40
インデックス: 4、値: 50

JavaScript では、for ループ、for-in ループ、for-of ループのループ本体で Break ステートメントと continue ステートメントを使用して、ループの動作を制御できます。

Break ステートメントは、ループを直ちに終了し、ループ本体の後のコードを実行せず、ループの後にコードの実行を継続するために使用されます。

continue ステートメントは、現在の反復をスキップし、次の反復の実行を継続するために使用されます。

たとえば、for ループで Break と continue を使用する例は次のとおりです。

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // 跳过当前迭代，继续下一次迭代
  }
  if (i === 4) {
    break; // 中途跳出循环
  }
  console.log(i);
}

出力結果:

0
1
3

ただし、forEach() メソッドの場合、これは配列メソッドであるため、ループ本体で Break ステートメントと continue ステートメントを使用してループの動作を制御することはできません。forEach() メソッドは配列全体を走査し、要素ごとにコールバック関数を実行しますが、途中でループから抜け出すことはできません。コールバック関数で Break または continue を使用すると、構文エラーが生成されます。

概要:

for ループ、for...in ループ、および for...of ループは JavaScript のループステートメントであり、forEach() は配列オブジェクトのメソッドです。

for ループは最も一般的なループステートメントであり、各ループ後の開始条件、終了条件、および実行操作を指定することで、実行コードブロックを横断できます。

for...in ループは、オブジェクトのプロパティを反復するために使用され、オブジェクトとそのプロトタイプチェーンの列挙可能なプロパティを反復します。

for...of ループは、反復可能なオブジェクト (配列、文字列、セット、マップなど) を反復するために使用され、オブジェクト内の各要素の値を反復できます。

forEach() は配列オブジェクトのメソッドであり、配列の各要素を反復処理し、各要素に対して指定されたコールバック関数を実行するために使用されます。

JavaScript では、for ループ、for-in ループ、for-of ループはすべて、ループの動作を制御するための Break ステートメントと continue ステートメントの使用をサポートしています。forEach() メソッドで Break および continue ステートメントを使用してループを中断またはスキップすることはできません。

JavaScript の for ループの概要

JavaScript の for ループの概要

おすすめ