mapメソッドの使い方をメモ。

forループの場合

まず、forループを使って書いたコード。
例：配列の各要素を２倍にして、after配列に格納する。

var numbers= [1, 2, 3, 4, 5];
var after = [];

for(var i = 0; i < numbers.length; i++) {
    after.push(numbers[i] * 2);
}
console.log(after);

実行結果は[2, 4, 6, 8, 10]

mapの場合

それをmapで書き換える。

var numbers= [1, 2, 3, 4, 5];
var after = [];

after = numbers.map(function(value) {
    return value * 2;
});
console.log(after);

配列の要素１つ１つを使って、コールバック関数「function(value)」を呼び出して、要素を２倍にしてreturnしている。
★mapの場合、コールバック関数内でreturn文が必要となる。
★mapメソッド自身が、処理した最終結果を返却する。
　その為、after変数で受け取るようにしている。

少し応用

オブジェクト配列から特定項目に絞った配列を取得することができる。

var fruits = [
    { fruit: 'orange', price: 100},
    { fruit: 'apple' , price: 200}
];

var prices = fruits.map(function(fruit){
    return fruit.price;
});

console.log(prices);

実行結果は、[100, 200]
fruits配列の中から、price項目の値を取得して新しい配列を作り、prices変数で受け取っている。

まとめ

・mapは、配列の各要素を使って処理した結果を、新しい別の配列に
　変換したい時に使える。
・forEachと同じで、mapはforループの代わりとして使うことができる。
・オブジェクト配列から、特定の項目の値に絞って、新しい配列に
　変換することができる。（必要な情報に絞ることができる）