【Javascript】配列から要素を取り出すmap関数に関して解説

JavascriptやVueなどを使用していると、ある配列から要素を取り出し、何かしらの処理を加えて再度配列として返したい場合があります。

そんな時に便利なのが『map関数』です。今回は通常の配列や連想配列からmap関数を使って、要素を取り出す方法について解説していきます。

ここで紹介するコードを実際にreplitなどで試すと理解が深まると思います。

通常の配列から要素を取り出す場合

まずは1次元の配列からmapを使って要素を取り出す方法について解説していきます。

今回は1 ~5の数字が格納された配列を用意し、中身の要素を2倍した配列を作りたいとします。

numberArray = [1,2,3,4,5]

//完成イメージ
newArray = [2,4,6,8,10]

map関数を使うことで、配列の中身の要素に処理を加えた結果を、配列で返すことができます。実際のコードは下記のようになります。

const newArray = numberArray.map(function(num){
  return num * 2
})

//実行結果
[ 2, 4, 6, 8, 10 ]

コード内で使用している「num」は任意の文字でOKで、配列から取り出した要素に当たります。

その取り出した値に「num * 2」という処理を加えて、returnで結果を返しています。

map内ではfunctionを使用していますが、最近の参考書などでは『アロー関数』で書かれてケースが多いです。

以下では先程のmap関数のコードをアロー関数で書き直したものを書いておきました。下にいくにつれて、コードの省略度が増すだけで結果は同じです。

//アロー関数
const newArray = numberArray.map((num) => {
  return num * 2
})

//アロー関数 省略形②
const newArray = numberArray.map((num) => num *2 )

//アロー関数 省略形③
const newArray = numberArray.map(num => num * 2)

アロー関数が分からない方はこちらの記事を参考にしてくださいね。

【Javascript】アロー関数について分かりやすく解説

連想配列 in 配列から要素を取り出す場合

次に連想配列に対してmap関数を使う方法について解説していきます。

連想配列とは、キー(key)とバリュー(value)のペアを持ったものを指します。

{key:value}

連想配列は配列に格納されて扱うケースが多いです。
ポケモンのパーティーに例えて見てみましょう。

teamArray = [
  {name:'ピカチュー', power:30},
  {name:'カイリュー', power:100},
  {name:'ルージュラー', power:50},
  {name:'ニドクイン', power:70}
]

上記コードの「name」がkeyで、「power」がvalueに当たります。
例えば、powerだけ2倍した値だけ取り出したいとします。

この場合も『map関数』が使えます。

teamArray = [
  {name:'ピカチュー', power:30},
  {name:'カイリュー', power:100},
  {name:'ルージュラー', power:50},
  {name:'ニドクイン', power:70}
]

//powerのみ抜き出した配列を生成
const powerArray = teamArray.map(p => p.power * 2)

console.log(powerArray)

//結果
[ 60, 200, 100, 140 ]

アロー関数では、①引数が1つの場合は、引数を囲む()を省略可能　②処理内容が1行の場合は、returnを省略可能というルールがあるので、map関数の部分は簡潔な書き方になっています。

mapの中身は『アロー関数』で書いているので、何となく分かりづらい方もいると思うので、functionキーワードを使わないパターンも紹介しておきます。

//functionを使った書き方
const powerArray = teamArray.map(function(p){
  return p.power * 2
})

//省略形
const powerArray = teamArray.map((p) =>{
  return p.power * 2
})

またname(キー)を取り出して、処理を加えることもできます。

teamArray = [
  {name:'ピカチュー', power:30},
  {name:'カイリュー', power:100},
  {name:'ルージュラー', power:50},
  {name:'ニドクイン', power:70}
]

//nameのみ取り出した配列を生成
const nameArray = teamArray.map(n => n.name + 'さん')

console.log(nameArray)

//結果
[ 'ピカチューさん', 'カイリューさん', 'ルージュラーさん', 'ニドクインさん' ]