【JavaScrip】forEach()メソッドの使い方

JavaScriptのforEach()メソッドは、配列の各要素に対して何らかの処理をするために使用されます。配列を反復処理する際に非常に便利で、配列の各要素に対して同様の操作を行いたい場合に役立ちます。

forEach()の基本的な使用方法

forEach()メソッドの基本的な構文は以下の通りです：

array.forEach(function(currentValue, index, arr), thisValue)

array: 処理を適用したい配列。
function(currentValue, index, arr): 配列の各要素に対して実行する関数。
currentValue: 配列の現在処理中の要素。
index (任意): 現在処理中の要素のインデックス。
arr (任意): forEach()が適用されている配列。
thisValue (任意): 関数実行時にthisとして使用する値。

forEach()の使用例

配列内の各数値に対して何らかの処理を行いたい場合、forEach()を使用して以下のように実装できます。

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

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

このコードは配列numbersの各要素を2倍にしてコンソールに表示します。結果は以下のようになります。

インデックスを使用する例

配列の各要素とそのインデックスを表示するには、forEach()メソッドの第一引数の関数でインデックスも使用します。

let fruits = ['Apple', 'Banana', 'Cherry'];

fruits.forEach(function(fruit, index) {
  console.log(`${index}: ${fruit}`);
});

このコードの出力は以下のようになります。

0: Apple
1: Banana
2: Cherry

`thisValue`を使用する例

forEach()メソッドでthisValueを使用すると、コールバック関数内でのthisの値を指定できます。

function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry;
    ++this.count;
  }, this);
};

const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.sum); // 16
console.log(obj.count); // 3

この例では、forEach()メソッドの第二引数にthisを渡すことで、コールバック関数内でCounterインスタンスにアクセスしています。

注意点

forEach()メソッドは配列の各要素に対して関数を実行しますが、関数からの戻り値は無視されます。
breakやcontinue文をforEach()ループの中で直接使用することはできません。全ての要素を反復処理したい場合に適しています。
既存の配列を変更したい場合以外では、map()やfilter()のような他の配列メソッドの使用が推奨される場合があります。これらのメソッドは新しい配列を返します。

forEach()の基本的な使用方法

forEach()の使用例

インデックスを使用する例

thisValueを使用する例

注意点

`thisValue`を使用する例