【JavaScript】mapメソッドとは何か?使い方を実例で解説。非破壊で各要素に同じ処理を加える方法(初心者向け、わかりやすい)

javascript-prograshi(プロぐらし)-kv JavaScript
記事内に広告が含まれていることがあります。

mapメソッドとは何か?

JavaScriptのmapメソッドとは、配列の中の要素を一つづつ取り出して、各要素に対して指定の処理を実行し、新たな配列をつくる非破壊処理です。

例えば、[1, 2, 3]という配列の各数値を2倍して[2, 4, 6]を作るといった処理ができます。


mapメソッドの基本形

mapメソッドは次のような使い方をします。

array.map( ( 引数1, 引数2, 引数3 ) => { 処理 } )

3つの引数をとり、それぞれの引数には次の値が入ります。

引数内容
第1引数現在の要素の値
第2引数現在の要素のインデックス番号
第3引数元の配列
point
  • 各要素に対して指定した同じ処理を実行します。
  • 第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]


現在の要素のインデックス番号

第2引数である、「現在の要素のインデックス番号」を使ってmapを行う場合は以下のようになります。

array.reduce( ( 引数1, 引数2 ) => 処理 )


実例

第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 = {}で初期化されているので、指定した値のみが入ります。


参考リンク

MDN公式 Array.prototype.map()

タイトルとURLをコピーしました