まえがき
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の挙動の違いがあるため、アロー関数では同じ動きをしないので注意。