JavaScript - map() を使った配列のループ

JavaScript では for 文を使った配列のループ方法以外にも、 map()、forEach()、filter() などのメソッドを使ったループ方法もあります。

ここでは、map() メソッドを使った配列のループについて説明します。

map() メソッドの概要

map() メソッドは、配列を巡回しながら、要素ごとに指定された関数を呼び出します。

そして、関数の戻り値からなる新しい配列を生成します。

map() メソッドの引数として指定された関数は、3つの引数（値、配列のインデックス、配列自身）を持ちます。

つまり、次のような書き方となります。

新たな配列 = 元の配列.map(function(value, index, array){
	// 処理
	return 戻り値;
});

map() の場合は、forEach() と違って、return 文が必要となります。

return 文で戻した値からなる、新しい配列が生成されます。

「配列要素の値」だけ必要な場合は、次のように引数を省略できます。

新たな配列 = 元の配列.map(function(value){
	// 処理
	return 戻り値;
});

map() のサンプルコード

配列の各要素を自乗した配列を生成

次のコードは、配列（arr）の各要素を自乗した新しい配列（new_arr）を生成します。

var arr = [1, 2, 3, 4, 5];
var new_arr = [];

new_arr = arr.map(function(x){return x * x;});

console.log((arr));     // Array [ 1, 2, 3, 4, 5 ]
console.log((new_arr)); // Array [ 1, 4, 9, 16, 25 ]

疎な配列に対して map() を実行した場合は？

次のコードは、疎な配列（要素が0から順に埋まっていない配列)に対して、 map() メソッドを実行したケースです。

新しく生成される配列も疎な配列となっています。

var arr = [1, 2,, 4, 5]; // 疎な配列
var new_arr = [];

new_arr = arr.map(function(x){return x * 2});

console.log((arr));     // Array [ 1, 2, <1 個の空行>, 4, 5 ]
console.log((new_arr)); // Array [ 2, 4, <1 個の空行>, 8, 10 ]

まとめ

★ map() メソッドは、配列を巡回しながら、要素ごとに指定された関数を呼び出します。

そして、関数の戻り値からなる新しい配列を生成します。

★ 指定された関数には値、インデックス、配列自身の3つの引数があります。