まえがき

mapメソッドの基礎を実例を通してまとめます。

簡単な例


var numbers = [1,2,3,4]
numbers.map(
	function(){
		console.log("OK");
	}
)
// OKと4回出る

配列に.mapとつけて、中に関数を入れる。
4個入った配列なので、中の関数は4回実行されました。

アロー関数で書いてみよう

アロー関数で書いた方がきれいです。
アロー関数の解説→https://qiita.com/NNNiNiNNN/items/c19405345d8751ceb178

var numbers = [1,2,3,4]
numbers.map(()=>{
	console.log("OK");
	}
)
// OKと4回出る

ここからはアロー関数で説明していきます。

引数をつけてみよう

まず、引数を一つ付けてみます。

var numbers = ["あ","い","う","え"]
numbers.map((value)=>{ // 引数を一つ付けます。
		console.log(value);// valueの中には・・・？
	}
)
// あ
// い
// う
// え

第一引数は配列の値を取得しています。
次に、二つ目の引数をつけます。

var numbers = ["あ","い","う","え"]
numbers.map((value, index)=>{// 引数を二つ付けます。
		console.log(index);// indexの中には・・・？
	}
)
// 0
// 1
// 2
// 3

第二引数では、配列のインデックス番号を取得しています。
もう一つ付けます。

var numbers = ["あ","い","う","え"]
numbers.map((value, index,array)=>{// 引数を三つ付けます。
		console.log(array);// arrayの中には・・・？
	}
)
// ["あ", "い", "う", "え"]
// ["あ", "い", "う", "え"]
// ["あ", "い", "う", "え"]
// ["あ", "い", "う", "え"]

配列そのものを取得しています。
これは例えば


var numbers = ["あ","い","う","え"]
numbers.map((value, index,array)=>{
    array.push(value);// valueあいうえを順番にpush
    console.log(array);// pushされるごとに表示してみます。
	}
)
// ["あ", "い", "う", "え","あ"]
// ["あ", "い", "う", "え","あ", "い"]
// ["あ", "い", "う", "え","あ", "い", "う"]
// ["あ", "い", "う", "え","あ", "い", "う", "え"]

こんな感じで、対象の配列を操作することができます。

返り値を利用してみよう

mapの最大の特徴は返り値を利用できることです。
以下の例を見てみましょう。

var numbers = [1,2,3,4]
var double = numbers.map(value=>{
	return(value * 2); 
	}
)
console.log(double);// [2,4,6,8]

mapで得た値をそのままreturnすることで新しい配列を得ることができました。

まとめ

配列の要素に対して一つ一つ関数を実行できる。
引数として要素の値、番号、配列そのものを使うことができる。
返り値を出力できる。

以下はおまけ

オブジェクトを引数にしてみよう

mapの側に第二引数としてオブジェクトを用意してみます。

var move = {
	  "name": "だいもんじ",
  	"damage": 110,
    "accuracy": 85
  }// こんなオブジェクトを作ってみる
var properties = ["damage","accuracy"];// mapを使う配列はこっち
properties.map(function(value){ // アロー関数「ではない」ことに注意
	console.log(this[value])
}, move )// 第二引数にオブジェクトmoveを設定
// 110
// 85

thisで第二引数であるmapを参照できました。
thisの挙動の違いがあるため、アロー関数では同じ動きをしないので注意。