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)アロー関数が分からない方はこちらの記事を参考にしてくださいね。
次に連想配列に対して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)
//結果
[ 'ピカチューさん', 'カイリューさん', 'ルージュラーさん', 'ニドクインさん' ]
