JSのmapをそろそろ使いこなしたい

プログラミング

理解はしているつもりだが、ついついifforforEachで書いてしまう(もちろんダメなわけではないが)

そろそろ使いこなすために、メモしておく

mapの基礎

Array.prototype.map()
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

例えば、こんな感じで使います

例)配列のデータをそれぞれ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 ]

次回、filterも使いこなしたい

コメント

タイトルとURLをコピーしました