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

atlas-1869680_1280
LINEで送る
Share on GREE
Share on LinkedIn

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オブジェクトに変換する場合

key,valueの連想配列を配列で返しているので、少し違和感がある配列になってますが、これは仕方がないのかな?

2つの変数を繋げる※同じ要素数である場合のみ

functionの2つ目の引数であるindexは、配列の何番目を処理しているかという数字が入ってくれるので、
同じ要素数(同じ並び)のデータを連結するのは、比較的容易にできる。

cssを配列データ・セットから実装する

特定の画像のCSSのを変更するコード※mapを使わない記述

これをmapを使うと下記のように記述できる。

記述で見ると若干の差にしか見えませんが、プログラムとしては質が高くなった感じがします。

Pleasure 自己満 !!!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*