javascript：map()

このメソッドの説明

map() はJavaScriptのメソッドです。

配列の各要素を処理して新しい配列を生成します。

このmap()の使い方には色々な方法がありますが、ここでは一般的に良く使う方法だけを解説します。

メソッド

Array.map(function( item ){ここに item の処理を記述します})

パラメータ

item（変数）（必須）

現在処理中の要素の値が入ります。

※上記以外にインデックスや配列を取得するパラメータもありますが、通常は使わないと思うので説明は割愛します。

戻り値

処理された後の配列が戻ります。

事例

①配列の値を倍にした配列を作成する。

var data_array = [ 1,2,3,4,5];
var ans_array = data_array.map(function(item){return item*2;}); // 配列の値をitemで呼び出して処理しています。
console.log(data_array);
console.log(ans_array);

2行目：配列の各値を2倍にした新しい配列を作成しています。

3行目：元の配列の出力。下記が表示されます。

(5) [1, 2, 3, 4, 5]

4行目：新しい配列の出力。下記が表示されます。

(5) [2, 4, 6, 8, 10]

②RGBコードをHEXコードに変更する

・RGBコード：rgbrgb(9,15,250)は

・HEXコード：#090ffa になります。

すなわち 9→09、15→0f、250→fa に変換する必要があります。

よってRGBコードを取り出し、16進に変換し、頭に0を付け、後ろから2桁の文字を取り出す方法で変換します。

[mapメソッドを使った場合]

var rgb_color = 'rgb(9,15,250)';
var hex_color ="#" + rgb_color.match(/[\d]+/g).map(function(rgb){return ('0' + parseInt(rgb).toString(16)).slice(-2)}).join('');
console.log(rgb_color);
console.log(hex_color);

■2行目

上記の処理で[9,15,250]が[09,0f,fa]という新しい配列を作成しています。

この新しい配列を連結した文字列に変えて、頭に#を付けています。

■3行目、4行目

rgb(9,15,250)
#090ffa

【参考】

上記をfor...ofメソッドを利用すると下記の様になります。

var rgb_color = 'rgb(9,15,250)';
var rgb_array =rgb_color.match(/[\d]+/g); // RGBデータを配列で取得する
var hex_data = '#';
for ( val of rgb_array ) { 
   hex_data = hex_data + ('0'+parseInt(val).toString(16)).slice(-2); 　// HEXデータを2桁ずつ追加する	
}
console.log(rgb_color);
console.log(hex_data);

map()を使った方が簡単になります。

参考情報

他の配列メソッドはは、配列操作を参照してください。