Just do IT

思うは招く

【JavaScript】map関数についての勉強メモ

JavaScriptのmap関数についての勉強メモ。

map関数は、配列の各要素に関数を適用して、新しく配列を作る。つまり、「配列の中身を要素として、ちょちょっといじって、ぽんっと新しい配列を吐き出す」みたいな感じ。

たとえば、次のような配列があったとする。

var a = [1, 2, 3]

aという配列に、1、2、3という番号が入っている。それぞれの要素に「3」をかけると、次のようになる。

a.map((value) => { return value * 3});

結果はこちら。

 [3, 6, 9]

これはつまり、配列の0番目の「1」に「3」をかけて、次に配列の1番目の「2」に「3」をかけて、、、という計算をしている。

引数としては、配列の値以外にも取得できる。

a.map(function(value, index, array) { ~

  • value:配列の値
  • index:配列のインデックス番号
  • array:現在処理している配列

とりあえず最初は、value(配列の値)を使って掛け算などをしてみていじってみると感覚がつかみやすい。 ここではわかりやすく「value」を書いているが、別に他の文字を引数としてセットしても問題ない。たとえば

a.map((i) => { return i * 3});

こんな感じで。

ちなみに a.map((value) => { return value * 3}); この書き方は省略記法を使っている。次のように書いても同じ結果が表示される。

a.map(function(value) { return value * 3; });

 [3, 6, 9]

なお、連想配列の「Map」とはまったく異なるものなので注意。もしそれが何かすらもわからない場合、今のところは無視しておけばいい。あとで理解できるようになる。