Array.prototype.map() - 配列の各要素に処理を実行して新しい配列を作る

2017/09/26

Array.prototype.map()は、配列の各要素に関数を実行し、その返り値で構成された新しい配列を作成するメソッドです。元の配列に変更はありません。

概要

名前: map
所属: Array.prototype
仕様書: https://tc39.github.io/ecma262/#sec-array.prototype.map

説明

Array.prototype.map ( callbackfn [ , thisArg ] )

第1引数(callbackfn)にコールバック関数を指定します。配列の各要素がこのコールバック関数にかけられ、その返り値が新しい配列における値となります。コールバック関数は値、インデックス番号、配列そのもの、の3つの引数を受け取ります。

第2引数(thisArg)を指定すると、それがコールバック関数内におけるthisの値となります。省略した場合、thisの値はundefinedです。

function callbackfn ( value, index, array ) {
	var newValue = value + 5 ;
	return newValue ;
}

チュートリアル

例えば、配列の各要素を2倍する、というテーマでArray.prototype.map()を利用してみます。コールバック関数は、引数で受け取った値(value)を2倍にした値を返します。

var array = [ 4, 6, 8, 7, 9, 10 ] ;

var callbackfn = function ( value, index, sourceArray ) {
	return value * 2 ;
}

array.map( checkFunc ) ;	// [ 8, 12, 16, 14, 18, 20 ]

処理は内部で次のように繰り返されます。この返り値が新しく作成される配列の各値となります。

callbackfn( 4, 0, array ) ;	// 8
callbackfn( 6, 1, array ) ;	// 12
callbackfn( 8, 2, array ) ;	// 16
callbackfn( 7, 3, array ) ;	// 14
callbackfn( 9, 4, array ) ;	// 18
callbackfn( 10, 5, array ) ;	// 20

// → [ 8, 12, 16, 14, 18, 20 ]

デモ

Array.prototype.map()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var callbackfn = function ( value, index, sourceArray ) {
	return value * 2 ;
}

var a = [ 4, 13, 8, 3, 5, 9, ].map( callbackfn ) ;
var b = [ 11, 8, 2, 7, 8, 9, ].map( callbackfn ) ;
/** try it! **/

var results = { a:a, b:b, } ;

for( var name in results ) {
	console.log( name, results[name] ) ;
	document.body.appendChild( new Text( name + " = " + JSON.stringify( results[name] ) + "\n" ) ) ;
}
</script>
</body>
</html>