JavaScript forEach インデックス

1. JavaScript forEach() インデックス
2. forEach() コールバック関数の引数とパラメータ
3. forEach() を使用して、指定された配列の奇数と偶数の値を出力する
4. forEach() を使用してループを中断/続行または終了する
5. まとめ

配列の反復に使用される JavaScript のメソッドのうち、forEach() が最も一般的に使用されます。

JavaScript forEach() インデックス

配列は、インデックスで指定されたオブジェクトの下に格納された値の順序付きリストです。 forEach() は、index[0] から始まり、index[1]、index[2] など、配列内のインデックス付きの値をループしています。

forEach() は、配列内の各要素に対して関数を呼び出し、新しい配列を返す代わりに undefined を返します。これは連鎖可能ではないためです。 ただし、これは、削除または初期化されていない空の要素とインデックスに対しては実行されません。

コールバック関数を持つミューテーター メソッドではありませんが、forEach() は元の配列を変更します。 forEach() メソッドがインデックスの昇順で一度に 1 要素ずつ配列をトラバースする場合、それはコールバック関数として知られています。

forEach() とコールバック関数の仕組み

まず、コールバック関数を呼び出す前に、forEach() が配列の要素の範囲を処理します。 次に、コールバック関数は、既に呼び出されたインデックスまたは範囲外のインデックスとは別に、他のインデックスを訪問します。

ループ時に既存の要素が変更または削除された場合、前に forEach() 関数に渡された値がデフォルト値になります。 ただし、コールバック関数は、反復中に削除または変更された要素をスキップします。

forEach() コールバック関数の引数とパラメータ

forEach() のコールバック関数の標準化されたメソッドは、2つの引数で構成されます。

array.forEach(function(currentValue, index, array), thisArg)

ここでの 関数 は、値を呼び出すために使用する関数です。 すべての要素を実行するときに、コールバック関数を function として使用します。

コールバック関数には、以下に定義された 3つのパラメーターが含まれます。

1. currentValue – 配列内の現在の要素 (ループ時)。
2. index – インデックスは、currentValue のインデックスを保持します。
3. array – 現在の処理要素が属する配列。

thisArg は単に this に渡される値です。 また、callback で使用されるこの値を参照します。

必要に応じて、この標準化されたメソッドで index、array、および thisArg を使用できます。 function と currentValue のみが必要です。

例を通してこれを明確にしましょう。 ここでは、アルファベットにランダムな文字を割り当てて、名前付き文字の配列を使用しました。

var letters = ['b', 'e', 'f', 'j', 'u'];

currentValue パラメータを使用する

コード：

letters.forEach(function callback(letters) {
  console.log(letters);
});

出力：

配列内のすべての文字を個別に表現したい場合は、forEach() を currentValue と共に使用できます。 ここでは、letters 配列を currentValue として使用しました。

関数を実行するときは、配列内のすべての要素を実行するため、少なくとも 1つのパラメーターを使用する必要があります。 上記のコードを単純化するために、以下のようにアロー関数表現を使用できます。

コード：

letters.forEach(letters => console.log(letters))

出力：

index パラメータを使用する

配列内の各要素のインデックスを取得するには、以下に示すパラメータ index を追加してコードを拡張できます。

コード：

letters.forEach((letters, index) => {
  console.log('Index of ' + letters + ' is ' + index);
});

出力：

ここで、コードは要素の値とそのインデックスを 1つずつ表示します。

array パラメータを使用する

コールバック関数で使用するもう 1つのオプション パラメータは array です。 このパラメーターarrayを使用して、以下のように配列を個別に出力できます。

コード：

letters.forEach((letters, index, array) => {console.log(array)})

出力：

このコード チャンクは、含まれる反復とインデックスと同様の型の元の配列を出力します。 上記のプロセスに適応することにより、ユースケースに応じてパラメーター index および array と共に forEach() 関数を実装できます。

ここまで、コールバック関数の引数とパラメータを分けて説明してきました。 以下は、forEach() コールバック関数を使用した別の例です。

forEach() を使用して、指定された配列の奇数と偶数の値を出力する

コード：

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach(function(currentValue, index, array) {
  if (currentValue % 2) {
    console.log(' ' + currentValue + ' is an odd number.');
  } else {
    console.log(' ' + currentValue + ' is an even number.');
  }
});

出力：

ここで、数値配列は、日常生活で使用するいくつかの乱数で構成されています。 forEach() 関数をパラメーターと共に使用しました: currentValue、index、array、および if 条件ステートメントを使用して、数値が奇数であるかどうかを出力します。

各反復の後、これは if 条件ステートメントに従って出力として値を出力します。

forEach() を使用してループを中断/続行または終了する

ループ中に break または continue を使用して、条件が満たされたら配列を終了する方法の 1つです。 他のループと同様に、break と continue を forEach() に適用しましょう。

break の使用:

コード：

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach((numbers) => {
  if (numbers == 9) break;

出力：

続行 の使用:

コード：

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach((numbers) => {
  if (numbers == 9) continue;
  console.log(numbers);
});

出力：

両方のコード スニペットの出力と同様に、forEach() メソッドを使用すると、ループ内で例外をスローすることなく、forEach() を使用するループに対して break または continue を終了または使用できなくなるようです。 コールバック関数。 そのため、forEach() は break または continue キーワードではサポートされていません。

まとめ

forEach() 関数は、コードの再利用性と可読性を考慮して、for ループの代わりになります。

コード：

var letters = ['b', 'e', 'f', 'j', 'u'];

//using for() loop
Console.log(“From For Loop”)
for(var i=0; i< letters.length; i++){
    console.log(letters [i]);
}

//using forEach() function
console.log("From ForEach() function")
letters.forEach(function(currentValue){
    console.log(currentValue);
});

出力：

全体として、ES5 の他の機能の中で、forEach() は、最大の機能互換性を備えた最高の機能の 1つです。