Array.prototype.forEach()とは
Array.prototype.forEach()とは？
forEach()メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。
ポイントは三つ。
1,第一引数には関数を、第二引数にはオブジェクトを渡す。
2,配列の要素全てを関数に通す。
3,mapメソッドとは違い戻り値はundefined
const array1 = [1,2,3]
array1.forEach((x) => {
const result = x * 2;
console.log(result);
});
// 2 //4 //6
混乱ポイントはfor文との違いだと思う。
for文との違いはループ回数を指定しないことによる扱いのし易さだと思う。
配列の長さが分からない場合、for文では下記でも記述でも対応出来るけど、、
for(let i = 0; i < arr.length; i++)
forEachの書き方の方が短くて済む↓
arr.forEach( value => {~})
mapメソッドと同じでforEachメソッドも渡す関数に渡す引数が一つなら()の省略や、関数内の式が一行だった場合returnを省略したり、中括弧を省略したり出来る。
Arrayメソッドの中でも重要度の高いメソッドなので使い方をしっかり覚えておきたい。
forEachに渡す関数には三つ引数を与えることが可能。
1,配列の要素
2,インデックス番号
3,forEachが実行されている配列
これらはforEachに渡す関数が取れる引数であり、mapの引数ではないので注意が必要です。
１の配列の要素はexampleのxの部分です。
2のインデックス番号はタグにkeyを仕込む際に使ったり、配列の中から特定の要素に変更を加えたいときに使います。
3のforEachが実行されている配列はexampleで言うとarray1に当たります。
mapに渡した関数内で元の配列に何かしらの処理をすることが可能になります。
forEachメソッドはforEach()が実行されている最中に実行対象の配列に
pushメソッドなどで新しく要素が追加されても、その要素に関数は実行されません。
また、途中で配列の要素が減った場合はforEach()に参照されたタイミングで要素が無ければ、消された要素に関数は実行されません。
const words = ['one', 'two', 'three', 'four']
words.forEach((word) => {
console.log(word)
if (word === 'two') {
words.shift()
}});
// one// two// four
上のコード(MDNからの引用)の場合では、forEachが'three'を参照する前に'two'が配列から
削除されたため、'three'のインデックス番号が2から1に変化し、
既にインデックス番号1を参照し終わっているforEach()は次の参照対象である
インデックス番号2、つまり'four'を参照するのである。
リアルタイムで配列が更新されるシステムでは意識しないといけない部分である。
ちなみに、疎かな配列の場合要素がない部分は無視してループが実行されます。
[1,2,,4] //←疎かな配列
要素が途中抜けている配列のことを「疎かな配列」と言う
一応、第二引数にオブジェクトを渡すことも出来ますが、
MDNでも不自然な例として挙げられているので今回は解説なしです。
気になる方は上のリンクから調べてみてください。
上記のサンプルはこちらで確認できます。