Javascript1.6、ECMAScript5.1で実装されたmap関数だが、配列操作において、非常に便利なのに今まで使いこなせていなかった。
この関数を使うと無駄にfor文を書かずにすむ事が分かったので、メモしておくことにする。
Summery
map関数は、配列の内部要素に個別に処理を行い、新たな配列を作り出すことができる。
構文
Array.map(callback[,thisObject]);
リファレンスページ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
どんな場面で使うのか？
自分のソースコードでどの辺が改善できるかを見直してみると以下のような場面でmap関数を使うことで効率化出来ることがわかった。
- URLクエリ（文字列）をkey=valueオブジェクトに変換する場合
- 2つの変数を繋げる※同じ要素数である場合のみ
- cssを配列データ・セットから実装する
使い方サンプル
URLクエリ（文字列）をkey=valueオブジェクトに変換する場合
location.search.replace("?","").split("&").map(function(key){var d = key.split("=");var arr={"key":d[0],"value":d[1]};return arr})
0:Object
key:aaa
value:1
1:Object
key:bbb
value:2
2:Object
key:ccc
value:3
key,valueの連想配列を配列で返しているので、少し違和感がある配列になってますが、これは仕方がないのかな？
2つの変数を繋げる※同じ要素数である場合のみ
var a1 = ["aaa","bbb","ccc"];
var a2 = [001,002,003];
a1.map(function(data,index){
var arr = [];
arr[a1[index]] = a2[index];
return arr;
});
> Array[3]
> 0:Array[0]
> aaa:1
> 0:Array[0]
> bbb:2
> 0:Array[0]
> ccc:3
functionの2つ目の引数であるindexは、配列の何番目を処理しているかという数字が入ってくれるので、
同じ要素数（同じ並び）のデータを連結するのは、比較的容易にできる。
cssを配列データ・セットから実装する
特定の画像のCSSのを変更するコード※mapを使わない記述
var images = document.images;
var css = [
["border" , "2px solid red"],
["margin" , "8px"],
["opacity" , "0.5"]
];
for(var i in css){
images[0].style.setProperty(css[i][0] , css[i][1] , "");
}
これをmapを使うと下記のように記述できる。
[
["border" , "2px solid red"],
["margin" , "8px"],
["opacity" , "0.5"]
].map(function(data){
document.images[0].style.setProperty(data[0] , data[1] , "");
});
記述で見ると若干の差にしか見えませんが、プログラムとしては質が高くなった感じがします。
Pleasure 自己満 ！！！
