JavaScript 配列で関数を使用(forEach/map/filter/reduce)

nas

JavaScriptの配列で関数を使用するサンプルです。

確認環境
・Google Chrome

目次

サンプル 配列を関数に渡して１回ずつ実行する(forEachメソッド)
  各値を処理して、新しい配列を作成する(mapメソッド)
  値を絞って、新しい配列を作成する(filterメソッド)
  単一の値にして、新しい配列を作成する(reduceメソッド)

配列を関数に渡して１回ずつ実行する(forEachメソッド)

配列.forEach(function callback(currentValue [, index [, array]]) {
//繰り返される箇所
}[, thisArg]);

配列を関数に渡して１回ずつ実行するサンプルです。

<script>
  const a = ["A", "B", "C"];
  a.forEach(function (b) {
    console.log(b + "です"); //Aです Bです Cです
  });
</script>

forEachは、配列の値の数分、function(b)を実行します。
bには、配列の各値(A,B,C)が順番にはいります。breakは使用できません。
console.logが3回実行されます。

アロー関数を使用

<script>
  const a = ["A", "B", "C"];
  a.forEach((b) => console.log(b + "です")); //Aです Bです Cです
</script>

3行目は、アロー関数を使用しています。結果は上記のforEachと同じです。

forEach関数の引数の値

<script>
  const a = ["A", "B", "C"];

  a.forEach(function (b, c, d) {
    console.log(b); //A B C
    console.log(c); //0 1 2
    console.log(d); //["A", "B", "C"]が3回出力される
  });
</script>

1つめの引数は、配列の値です。
2つめの引数は、配列の添字です。
3つめの引数は、配列です。

 

各値を処理して、新しい配列を作成する(mapメソッド)

変数 = 配列.map(function callback(currentValue[, index[, array]]) {
// 処理
}[, thisArg])

配列の各値を関数で実行+新しい配列を作成するサンプルです。

<script>
  const a = ["A", "B", "C"];

  const c = a.map(function (b) {
    return b + "です";
  });
  console.log(c); //(3) ["Aです", "Bです", "Cです"]
  console.log(a); //(3) ["A", "B", "C"]
</script>

4行目は、配列の値の数分、function(b)を実行します。bに各値が入ります。
bには、配列の各値(A,B,C)が順番にはいります。
5行目は、3回実行されます。
7行目は、新規で作成された配列のcです。
8行目は、元の配列です。値は変更されていません。

 

値を絞って、新しい配列を作成する(filterメソッド)

変数 = 配列.filter(callback(element[, index[, array]]){
// 処理
}[, thisArg])

配列の各値を関数で実行＋新しい配列を作成＋絞るサンプルです。

<script>
  const a = [1, 5, 9];

  const c = a.filter(function (b) {
    return b > 6;
  });
  console.log(c); //[9]
  console.log(a); //(3) [1, 5, 9]
</script>

4行目は、配列の値の数分、function(b)を実行します。bに各値が入ります。
bには、配列の各値(A,B,C)が順番にはいります。
5行目は、条件にあったものが実行されます。
7行目は、新規で作成された配列のcです。
8行目は、元の配列です。値は変更されていません

 

単一の値にして、新しい配列を作成する(reduceメソッド)

配列.reduce(callback[, initialValue])

配列の各値を関数で実行＋新しい配列を作成＋単一の値にするサンプルです。
配列の各値を合計するときなどに使用します。

<script>
  const a = [1, 5, 9, 3];

  const c = a.reduce(function (b, c) {
    return b + c;
  });
  console.log(c); //18
  console.log(a); //(3) [1,5,9,3]
</script>

4行目の引数は、以下のように実行されます。
1回目は、引数のbには1つめの配列の値(1)、cには2つめの配列の値(5)がはいります。
→戻り値は 1 + 5 = 6
2回目は、引数のbには1回めの戻り値(6)、cには3つめの配列の値(9)がはいります。
→戻り値は 6 + 9 = 15
3回目は、引数のbには2回めの戻り値(15)、cには4つめの配列の値(3)がはいります。
→戻り値は 15 + 3 = 18

7行目は、新規で作成された配列のcです。
8行目は、元の配列です。値は変更されていません

2つめの引数をセットした場合(initialValue)

<script>
  const a = [1, 5, 9, 3];

  const c = a.reduce(function (b, c) {
    return b + c;
  },100);
  console.log(c); //118
</script>

6行目は、2つめの引数です。最初のループ時の戻り値として渡されます。

Arrayオブジェクト

関連の記事

JavaScript 配列の仕組みと使い方のサンプル
JavaScript if文で配列を比較するサンプル
JavaScript for...in文とfor...of文のサンプル

△上に戻る