jQueryの便利なmapの使い方

lispでmapに初めて触れた時は「何、このめんどくさい関数？」と感じ、正直な話あまり触れたくもなかったのですが慣れてくるとこいつはとても便利な賢いやつです。

さてjavascriptでもmapが使えるか調べてみたらjQueryで提供されてました。

mapを使えば配列全部に関数を適用させて、返り値を配列で受け取れます。for文なんて使わなくてもええんやっ！！

定番の累乗を求めるサンプル。

arr = [1,2,3];
arr = $.map(arr, function(n,i){return n*n;});
for(i=0;i<arr.length;i++){
  alert(arr[i]);
}

サンプルには良く使われるけど、実際にプログラミングしてて累乗が必要になったことがないですね。まあサンプルなんで実用性よりも分かりやすさが重要だから当然といえば当然の話しですね。

とりあえずこんな感じの動作がmapはできます。

たとえばこんなhtmlがあって

<div>1</div>
<div>2</div>
<div>3</div>

配列で[1,2,3]が欲しいとする。

そんな時もこの map を使えば一発解決さ！(深夜の外人がやってる通販のノリで)

arr = $("div").map(function(){
    return $(this).text();
  }).get();

これでとれる。注意点は最後の get()。これがなくても配列っぽいのが返ってくるんだけども、これはjQuery-wrapped arrayというものらしく別物とのこと。

for文で実行したり arr[0] で要素のアクセスしたりはできるけどもjoinすると上手く行かない。このjoinがうまくできないのにはまってだいぶ時間を食われました。

arr.constructor でクラスを調べたら

function Array() {
    [native code]
}

となるべき所が

function (a, b) {
    return new e.fn.init(a, b, h);
}

になってました。この「get() すればよい」という情報を得るためにどれだけ遠回りしたことか…。

とはいえこれで安心してmapをjavascriptでも使えるようになったのでガシガシ使っていこうと思います。