見かけたことはあるけれど、使ったことがなかったforEach()メソッドを使ってみたいと思います。
forEach()とは
forEach()を正しく書くとArray.prototype.forEach()となりArray(配列)に使われるメソッドです。forEach()を実行すると配列の要素に1つずつに対して処理を行います。
構文 Syntax
// 構文
array.forEach( 処理);
処理の書く際にはアロー関数を使用するのを多く見かけます。
let total = 0;
const arr = [1, 2, 3];
arr.forEach( num => total += num );
console.log(total); // 6
functionの引数について
処理の引数は以下のようになります。
// 構文
array.forEach(function(currentValue, index, arr), thisValue)
少し複雑に感じますが、わかれば簡単に使いこなせそうです。
- currentValue : arrayの中の各要素です。必須
- index : 要素のindexです。オプション
- arr : arrayのarrayオブジェクトです。オプション
- thisValue : thisとして値を渡せます。空の場合、「undefined」がthisの値として渡されます。
currentValue, index, arr の中身を確認するサンプルコード
const numbers = [10, 11, 12];
numbers.forEach(myFunction);
function myFunction(item, index, arr) {
console.log(“item = ” + item );
console.log(“index = ” + index );
console.log(“arr = ” + arr );
}
結果
item = 10
index = 0
arr = 10,11,12
item = 11
index = 1
arr = 10,11,12
item = 12
index = 2
arr = 10,11,12
thisValueの中身を確認するサンプルコード
const numbers = [10, 11, 12];
numbers.forEach(function(currentValue, index, arr) {
console.log(this); // 123
}, 123);
thisの値が123となります。
おまけ forEach()サンプルコード
その他のサンプルコードです。
各要素の数値をforEach()で10倍にする
const numbers = [10, 11, 12];
numbers.forEach(myFunction);
function myFunction(item, index, arr) {
arr[index] = item * 10;
}
console.log(numbers);
結果
(3) [100, 110, 120]
各要素の数値をforEach()で10倍にする(二次元配列)
せっかく作ったので。ついでに。
const numbers = [10, 11, 12, [13, 14]];
numbers.forEach(myFunction);
function myFunction(item, index, arr) {
if(item.length >= 1){
for(let i=0; i < item.length; i++){
arr[index][i] = arr[index][i] * 10;
}
}else{
arr[index] = item * 10;
}
}
おわり
個人的には難しく感じましたが、初心者向けのJavascriptの参考書にもでてくるのでまだまだ勉強が足りなさそうです。
参考サイト
https://www.w3schools.com/jsref/jsref_foreach.asp
Javascript ES5 Array functions. forEach second “This Value” argument
