f:id:utouto97:20210704222355j:plain

JavaScriptのforEach

JavaScriptでは、forEachを使ってループを記述することもできます。
ただし、JavaScriptのforEachは、配列(Array)のメンバメソッドであるため、配列(Array)でしか利用することができません

以下のように使います。
(arrは配列)

arr.forEach(値を一つずつ受け取って処理するコールバック);

forEachはメソッドなので.でつないで呼び出します。
また、forEachメソッドの引数はコールバック関数となっています。
このコールバック関数は引数として、配列の値を一つずつ受け取り、何かしらの処理を行います。

サンプル

arr = ["JavaScript", "HTML", "CSS", "C/C++", "Ruby"]
 
arr.forEach(e => {
    console.log(e)
})

forEachの引数には、値をeとして受け取り，console.logで表示する関数を渡しています。
結果は次のようになります。

JavaScript
HTML
CSS
C/C++
Ruby

forEachでインデックスも取得する

forEachメソッドに渡すコールバック関数は、引数を最大で三つまでとることができます。

第一引数は先に述べたように、値のための変数です。
第二引数はインデックスを格納するための変数です。
また、第三引数はforEachメソッドを呼び出している配列自体になります。

つまり、引数を二つとるコールバック関数をforEachに渡すことで、インデックスも取得することができます。

サンプルとして、配列の値とそのインデックスを表示してみます。

arr = ["JavaScript", "HTML", "CSS", "C/C++", "Ruby"]

arr.forEach((e, i) => {
    console.log(i + " : " + e)
})

0 : JavaScript
1 : HTML
2 : CSS
3 : C/C++
4 : Ruby

これを利用することで、配列のインデックスと値のペアを一つずつ処理できます。

JavaScriptのforEachから途中で抜ける (breakは使えるのか)