【JavaScript】Mapの使い方について解説

React.jsやVue.jsをキャッチアップする際に.map()を使用する例をよく見かけます。

mapを見た時に使い方がわからなかったので、自分でも理解を深めるために書いてみました。

Contents

map関数とは
1. 使い方
番外編
まとめ
参考リンク

map関数とは

map関数は配列に対して使用できる関数です。

配列に対して処理を操作を行なった後、新しい配列を生成して結果を返してくれます。

Array.prototype.map() – JavaScript | MDN

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

developer.mozilla.org

使い方

使い方としては、以下の２通りがあります。

配列をループして新しく配列を生成する
mapのreturnで返ってきた値に対し何か処理をして新しく配列を生成する

基本的な使い方

基本的な使い方としては、①の「配列をループして新しく配列を生成する方法」です。

// mapの使い方

const array = ['hoge', 'huga', 'test'];

// mapの()の中に関数を書く。今回はアロー関数。
const testArray = array.map((test)=>{
   // 第一引数に配列の値が入ってくる
  return test;
});
  
console.log(testArray);
// 結果
// ['hoge', 'huga', 'test']

mapのインデックスを取得する

// mapのindexを取得する

const array = ['hoge', 'huga', 'test'];

// mapの()の中に第二引数を取ると配列のインデックスが取れる
const testArray = array.map((test, index)=>{
   // 引数に配列の値が入ってくる
  return `${index+1}番目：${test}`;
});
  
console.log(testArray);
// 結果
// ['1番目：hoge', '2番目：huga', '3番目：test']

何か処理をして新しく配列を生成する

ループの他に、returnの後に条件式を記述して何か処理を行なった後に新しく配列を生成する方法もあります。

// 何か処理をして新しく配列を生成する

const arrayNum = [1, 2, 3];

const calcNum = arrayNum.map((num)=>{
   // 配列の値に乗算をした後、新しく配列を生成する
  return num * 5;
});
  
console.log(calcNum);
// 結果
// [5, 10, 15]

番外編

mapで配列→オブジェクトの配列に新しく生成もできるようです。

// 配列→オブジェクトの配列

const array = ['hoge', 'huga', 'test'];

const object = array.map( val => ( { key: val } ) );

console.log(object);
 
// 結果
// [{key: 'hoge'},  {key: 'huga'},  {key: 'test'}]