forEachとは
- ここで説明するforEach とは次の語句からなるjavascriptのメソッドです。
- for
- 読み: フォー
意味: 目的にして、目指して - each
- 読み: イーチ
意味: 各、それぞれ、おのおの
forEachメソッドの概要
このメソッドは、引数に与えた関数や他のメソッドを、配列の各要素(各値)に一回ずつ実行します。
構文
サンプルを見る前に構文を確認しておきます。
- callback: 各要素(各値)に対して実行するコールバック関数です。引数は1つからオプションを含め3つまで受け付けます。
- value: 現在処理されている配列の要素(値)です。
- index: 現在処理されている配列のインデックス番号です。
- array: 呼び出し元の配列の全要素(全の値)です。
- ThisArg: callback内で this として使用する値です。
arr.forEach(callback(value[, index[, array]]){
// execute something
}[, ThisArg]);サンプルコードと実行結果 (構文の理解)
ここでは、構文を理解しやすくする目的で、構文に近しい例でサンプルを紹介したいと思います。 配列には3つの文字列要素が代入されています。 この配列からforEach()で取得することができる3つの値を各要素ごとにページに書き出します。
サンプルコード: HTML
<body>
<script>...</script>
</body>
- 02: script (プログラムを実行します。)
サンプルコード: script
<script>
let arrStr = new Array("A", "B", "C");
arrStr.forEach((value, index, array) => {
document.write(
"value: " + value + " / ",
"index: " + index + " / ",
"array: " + array + "<br>"
);
});
// 03:は、 arrStr.forEach(function(value, index, array){ と同じ意味です。
</script>
- 02: arrStr (3つの値が代入された配列を宣言します。)
- 03-09: forEach((引数)=>) (value, index, arrayの値をコールバック関数の引数に指定して実行します。)
- 04-08: write() (現在の配列値から取得したvalue, index, arrayの値を書き出します。)