理解はしているつもりだが、ついついifやfor、forEachで書いてしまう(もちろんダメなわけではないが)
そろそろ使いこなすために、メモしておく
mapの基礎
Array.prototype.map() - JavaScript | MDN
map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
developer.mozilla.org
例えば、こんな感じで使います
例）配列のデータをそれぞれ3倍する
var array = [1,2,3];
var mapArray = array.map(x => x * 3);
console.log(mapArray); // [2,4,6]
forEachと比較する
// forEach
[1,2,3].forEach(function( value ) {
console.log( value );
});
// map
[1,2,3].map(function( value ) {
console.log( value );
});1
2
3この場合だと、出力はどちらも変わりません。
違いは戻り値
今度は戻り値を見る
// forEach
var result = [1,2,3].forEach(function( value ) {
return value * 2;
});
console.log( result ); // undefined
// map
var result = [1,2,3].map(function( value ) {
return value * 2;
});
console.log( result ); // [2,4,6]forEachは単純に実行するだけのメソッドなのに対して、mapは実行後の結果を配列データとして返してくれるという点が違いますね
コールバック関数
ということで、コールバック関数について詳しく見ていく
[配列].map(function ( value, index, array ) {
// コールバック関数
});valueは、配列の値indexは、インデックス番号arrayは、現在処理している配列
例えば、こんな感じ
var array = [1, 2, 3, 4, 5].map(function(value), index, array) {
return value * index;
});
console.log(array); // [ 0, 2, 6, 12, 20 ]
