mapメソッドとは何か？
JavaScriptのmapメソッドとは、配列の中の要素を一つづつ取り出して、各要素に対して指定の処理を実行し、新たな配列をつくる非破壊処理です。
例えば、[1, 2, 3]という配列の各数値を2倍して[2, 4, 6]を作るといった処理ができます。
mapメソッドの基本形
mapメソッドは次のような使い方をします。
array.map( ( 引数1, 引数2, 引数3 ) => { 処理 } )3つの引数をとり、それぞれの引数には次の値が入ります。
| 引数 | 内容 |
|---|---|
| 第1引数 | 現在の要素の値 |
| 第2引数 | 現在の要素のインデックス番号 |
| 第3引数 | 元の配列 |
- 各要素に対して指定した同じ処理を実行します。
- 第1引数には現在の要素が入るので、要素を意味する「element」を省略した「elem」や「e」がよく使われています。
- 第2引数には現在の要素のインデックス番号が入るので「index」がよく使われます。
- 第3引数には元の配列が入るので「array」や「arr」がよく使われます。
mapメソッドの注意点
mapメソッドの処理は「非破壊」です。このため、元の要素の内容は変更されずに元のままとなります。
処理結果を元の要素に置き換えたい場合は、代入する必要があります。
元の変数に処理結果を代入しない場合の例
arr = [1, 2, 3]
arr.map( elem => elem * 2 )
console.log(arr)
//処理結果
//[1, 2, 3]元の変数に処理結果を代入する場合の例
arr = [1, 2, 3]
arr = arr.map( elem => elem * 2 )
console.log(arr)
//処理結果
//[2, 4, 6]現在の要素の値を使う処理
第1引数である、「現在の要素の値」を使ってmapを行う場合は以下のようになります。
array.reduce( 引数1 => 処理 )アロー関数においては、引数が1つの場合、引数のカッコを省略できます。また、処理が1行で記述できるときは処理のカッコやreturnを省略することができます。
これは以下と同じです。
array.reduce( ( 引数1 ) => { return 処理 } )functionを省略しない場合は以下のようになります。
array.reduce( function( 引数1 ){ return 処理 } )実例（カッコやreturnを省略）
各要素を2倍する場合は以下のようになります。
arr = [1, 2, 3]
arr.map( elem => elem * 2 )
//処理結果
//[2, 4, 6]実例（カッコやreturnを省略しない場合）
引数にカッコをつけて、処理に{ } とreturnをつけると以下のようになります。
arr = [1, 2, 3]
arr.map( ( elem ) => { return elem * 2 } )
//処理結果
//[2, 4, 6]実例（functionを省略しない場合）
functionを省略しない場合は以下のようになります。
arr = [1, 2, 3]
arr.map( function( elem ){ return elem * 2 } )
//処理結果
//[2, 4, 6]現在の要素のインデックス番号
第２引数である、「現在の要素のインデックス番号」を使ってmapを行う場合は以下のようになります。
array.reduce( ( 引数1, 引数2 ) => 処理 )実例
第２引数である、「現在の要素のインデックス番号」と現在の要素を掛け合わせる
arr = [1, 2, 3]
res = arr.map( ( elem, index ) => elem * index )
console.log(res)
//処理結果
[0, 2, 6]元の配列を使う場合
第3引数である、「元の配列」を使ってmapを行う場合は以下のようになります。
array.reduce( ( 引数1, 引数2, 引数3 ) => 処理 )実例
第3引数である、「元の配列」を使って、要素の値が、配列の要素数より大きい場合のみ要素を2倍する処理は以下のようになります。
array = [0, 5, 10, 15, 20]
res = array.map( ( elem, index, arr ) => {
if ( arr.length < elem ){ return elem * 2 }
else{ return elem }
})
console.log(res)
//処理結果
[0, 5, 20, 30, 40]配列の中のオブジェクトに対して使う
配列の中のオブジェクト「{ プロパティ名: 値 }」の要素に対してもmapを使うことができます。
例えば以下のようなkvArrという複数のオブジェクトが入った配列の、keyの値をプロパティ名として、valueの値を値とする処理は以下のようになります。
let kvArr = [
{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}
]
let brr = kvArray.map( obj => {
let newObj = {}
newObj[ obj.key ] = obj.value
return newObj
})
console.log(brr)
//出力
[
{1: 10},
{2: 20},
{3: 30}
]オブジェクト[ プロパティ名 ] = 値とすると、指定したオブジェクトの対象のプロパティ名に値をセットします。
オブジェクトはnewObj = {}で初期化されているので、指定した値のみが入ります。
