JavaScript map 配列を処理して新しい配列を作成

JavaScriptの配列のmapのサンプルです。

目次	mapとは
	mapのサンプル
	アロー関数を使用(=>)
	map関数の引数を確認
	ループ内で関数を呼ぶ

mapとは

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

mapは、配列の各値を関数で実行し新しい配列を作成します。
→新しい配列を作る点がforEachとの違いです。
1つめの引数は、配列の現在の値です。
2つめの引数は、配列の現在にindex値です。
3つめの引数は、使用している配列です。

mapのサンプル

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

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

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

アロー関数を使用(=>)

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

  arr.map((b) => console.log(b + "です")); //Aです Bです Cです
</script>

アロー関数は、=>を使用します。

map関数の引数を確認

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

  arr.map(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.map(function (a) {
    print(a);
  });

  function print(str){
    console.log(str + "です"); //Aです Bです Cです
  }
</script>

5行目は、ループ内で8行目の関数を呼んでいます。