Array.prototype.map()とは
例のごとく、、
Arrayとは？
MDNによるとArrayは配列を構築するためのグローバルオブジェクトで、
配列とは複数の要素を管理格納してくれるリスト構造らしい。 正確ではないかもしれないが、僕の認識では配列はインデックス番号をもった
ビルドインオブジェクトと言う認識です。 配列を現実で例えると、出席簿みたいなもので、
番号と何かしらの要素(出席簿の場合は生徒の名前)が入ったリスト表みたいなイメージで良いと思う。
JavaScript の Array オブジェクトは、配列を構築するためのグローバルオブジェクトで、配列とは複数の要素の集合を格納管理するリスト構造です。 MDN
prototypeとは？
prototypeとはビルドインオブジェクトがあらかじめ持っているプロパティや
メソッドのことを言います。 正直まだ深く理解出来てない、、
Array.prototype.map()とは？
やっと本題。
map()メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
ポイントは三つ。
1,第一引数には関数を、第二引数にはオブジェクトを渡す。
2,配列の要素全てを関数に通す。
3,関数の結果から新しい配列っを生成する
const array1 = [1,2,3]
const newArray = array1.map(x => x * 2);
console.log(newArray); // [2,4,6]
混乱ポイントはmapの記述方法だと思う。
mapに渡す関数は式が一行だった場合returnを省略したり、中括弧を省略したり出来る。
使用用途は僕の場合はReactを書く際に
データをmapで回して複数の要素を作る時に多用する。
Arrayメソッドの中でも重要度の高いメソッドなので使い方をしっかり覚えておきたい。
mapに渡す関数には三つ引数を与えることが可能。
1,配列の要素
2,インデックス番号
3,mapが実行されている配列
これらはmapに渡す関数が取れる引数であり、mapの引数ではないので注意が必要です。
１の配列の要素はexampleのxの部分です。
2のインデックス番号はタグにkeyを仕込む際に使ったり、配列の中から特定の要素に変更を加えたいときに使います。
3のmapが実行されている配列はexampleで言うとarray1に当たります。
mapに渡した関数内で元の配列に何かしらの処理をすることが可能になります。
mapの第二引数にオブジェクトを渡す場合
const capital = {
'Japan': 'Tokyo',
'USA': 'Washington, D.C.',
'England': 'London',
'Australia': 'Canberra'
};
const southernHemisphere = ['Australia'];
const result = southernHemisphere.map(function(value) {
return this[value];
}, capital);
console.log(result);
オブジェクトから目的の要素を抜き出したい場合などに使用出来ます。
僕はあんまり使ったことありません。。
ちなみに、第一引数の関数内でthisを使用してオブジェクトにアクセスしてますが、第一引数の関数がアロー関数だった場合はこの書き方ではオブジェクトに
アクセス出来ないのでご注意ください。
上記のサンプルはこちらで確認できます。