JavaScript forEach 配列を関数に渡して1回ずつ実行

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行目の関数を呼んでいます。

関連の記事

JavaScript 配列の仕組みと使い方のサンプル

△上に戻る