forEach()とは? Javascript初心者の勉強

見かけたことはあるけれど、使ったことがなかった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

Javascript

Posted by Nakamoto