JavaScriptの配列のforEachのサンプルです。
目次 | forEachとは |
forEachのサンプル | |
アロー関数を使用(=>) | |
forEach関数の引数を確認 | |
ループ内で関数を呼ぶ |
forEachとは
配列.forEach(function callback(currentValue [, index [, array]]) { //繰り返される箇所 }[, thisArg]); |
- forEachは、配列を関数に渡して1回ずつ実行します。
→戻り値として新しい配列は返しません。mapとの違いです。 - 1つめの引数は、配列の現在の値です。
- 2つめの引数は、配列の現在にindex値です。
- 3つめの引数は、使用している配列です。
- breakとcontinueは使用できません。
- 以下は、MDNのforEachのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
forEachのサンプル
<script>
const arr = ["A", "B", "C"];
arr.forEach(function (value) {
console.log(value + "です"); //Aです Bです Cです
});
</script>
forEachは、配列の値の数分、function(a)を実行します。
aには、配列の各値(A,B,C)が順番にはいります。breakは使用できません。
console.logが3回実行されます。
アロー関数を使用(=>)
<script>
const arr = ["A", "B", "C"];
arr.forEach((b) => console.log(b + "です")); //Aです Bです Cです
</script>
アロー関数は、=>を使用します。
forEach関数の引数を確認
<script>
const arr = ["A", "B", "C"];
arr.forEach(function (value, index, array) {
console.log(value); //A B C
console.log(index); //0 1 2
console.log(array); //["A", "B", "C"]が3回出力される
});
</script>
1つめの引数は、配列の値です。
2つめの引数は、配列の添字です。
3つめの引数は、配列です。
ループ内で関数を呼ぶ
<script>
const arr = ["A", "B", "C"];
arr.forEach(function (a) {
print(a);
});
function print(str){
console.log(str + "です"); //Aです Bです Cです
}
</script>
5行目は、ループ内で8行目の関数を呼んでいます。
関連の記事