はじめに

今回は、JavaScriptのmap()について学んだことをまとめておきたいと思います。

map()の基本構文の説明後、タイトルのサンプルコードを紹介します。

1. mapメソッドとは

map()は、元となる配列から新しく配列を作るためのメソッドです。

配列の各要素に対して与えられたコールバック関数を実行し、関数の戻り値で
新しい配列を生成します。

コールバック関数の引数には

第１引数：現在処理されている要素の値
第２引数：現在処理されている要素の配列内におけるインデックス（省略可）
第３引数：現在処理している配列（省略可）

の３つを渡すことができます。

1-1. 基本構文

配列データ.map(( value, index, array ) => {
   // 新しい配列の要素を返す
})

1-2. サンプルコード

以下は、配列の要素に2を掛けて新しい配列を生成したサンプルコードです。

const arr = [1, 2, 3];

const newArr = arr.map(value => {
  return value * 2;
});

console.log(arr);
// [1, 2, 3]

console.log(newArr);
// [2, 4, 6]

上記の結果から、元の配列には手を加えずに、新しい配列が返り値となっていることが分かります。

2. 本題

連想配列から特定keyの値を取得する

obj.nameで、オブジェクトのプロパティにアクセスします。
それをmap()と掛け合わせて、プロパティの値で配列を作成します。

const objArr = [
  {id: 1, name: 'Taro'},
  {id: 2, name: 'Koki'},
  {id: 3, name: 'Hiro'}
];

const names = objArr.map(obj => obj.name);

console.log(names);
// ["Taro", "Koki", "Hiro"]

以上で実装完了です。

シンプルに書けるので、より可読性が上がったなと感じました。

map()は、配列の各要素に対してさまざまな処理を行うことができて便利なので、
これからもうまく活用していきたいと思います。

[JavaScript]map()で連想配列から特定keyの値を取得する