JavaScript forEach –JSで配列をループする方法

JavaScript forEachメソッドは、配列をループするいくつかの方法の1つです。それぞれの方法には異なる機能があり、何をしているかに応じて、どちらを使用するかを決めるのはあなた次第です。

この投稿では、JavaScriptforEachメソッドについて詳しく見ていきます。

以下の配列があることを考慮してください。

const numbers = [1, 2, 3, 4, 5];

従来の「forループ」を使用して配列をループすると、次のようになります。

for (i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 

forEach()メソッドの違いは何ですか?

forEachメソッドは、配列をループするためにも使用されますが、従来の「forループ」とは異なる関数を使用します。

forEachメソッドは、配列の各要素のコールバック関数を次のパラメーターとともに渡します。

  • 現在の値(必須)-現在の配列要素の値
  • インデックス(オプション)-現在の要素のインデックス番号
  • 配列(オプション)-現在の要素が属する配列オブジェクト

これらのパラメータを段階的に説明しましょう。

まず、forEachメソッドを使用して配列をループするには、コールバック関数(または無名関数)が必要です。

numbers.forEach(function() { // code });

この関数は、配列のすべての要素に対して実行されます。配列の要素を表すパラメーターを少なくとも1つ取る必要があります。

numbers.forEach(function(number) { console.log(number); });

配列をループするために必要なのはこれだけです。

または、ES6矢印関数表現を使用して、コードを簡略化することもできます。

numbers.forEach(number => console.log(number));

オプションのパラメータ

インデックス

では、オプションのパラメータを続けましょう。1つ目は、各要素のインデックス番号を表す「index」パラメータです。

基本的に、2番目のパラメーターとして要素を含めると、要素のインデックス番号を確認できます。

numbers.forEach((number, index) => { console.log('Index: ' + index + ' Value: ' + number); });

アレイ

配列パラメーターは配列自体です。これもオプションであり、必要に応じてさまざまな操作で使用できます。それ以外の場合は、これを呼び出すと、配列の要素数と同じ回数だけ出力されます。

numbers.forEach((number, index, array) => { console.log(array); });

このビデオでforEach()メソッドの使用例を見ることができます。

ブラウザのサポート

Array.forEachメソッドは、IEバージョン8以前を想定しているすべてのブラウザーでサポートされています。

Web開発について詳しく知りたい場合は、私のYoutubeチャンネルにアクセスしてください。

読んでくれてありがとう!