[Javascript] map関数を使いこなして無駄にfor文を使わない

2017年3月20日

Javascript テクノロジー プログラミング

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関数を使うことで効率化出来ることがわかった。
  1. URLクエリ(文字列)をkey=valueオブジェクトに変換する場合
  2. 2つの変数を繋げる※同じ要素数である場合のみ
  3. 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 自己満 !!!