[jQuery]mapメソッド

昨日のinArrayメソッドに引き続き今日は、jQuery.ScrollToのソースコードを読んでいるのですが、その中にmapメソッドというものがありました。

jQuery日本語リファレンスのmapメソッドを読んでもいまいち納得がいかない。eachメソッドとどう違うの？

というわけで、今回は、少しソースコードを書くことに。

<form> <input type="text" name="name" value="John"/> <input type="text" name="password" value="password"/> <input type="text" name="url" value="http://ejohn.org/"/> </form> <script type="text/javascript"> console.log($("input").map(function(){return;})) </script>

この場合、結果は、どうなるのか？

正解は、こちら

[]

なるほど、空の配列ができました。では、次、これは？？

<form> <input type="text" name="name" value="John"/> <input type="text" name="password" value="password"/> <input type="text" name="url" value="http://ejohn.org/"/> </form> <script type="text/javascript"> console.log($("input").map(function(){return $(this).val();})) </script>

今度は、どうなるのか？

["John", "password", "http://ejohn.org/"]

なるほど、value属性の値を配列で返却してきました。では、最後に、これは、

<form> <input type="text" name="name" value="John"/> <input type="text" name="password" value="password"/> <input type="text" name="url" value="http://ejohn.org/"/> </form> <script type="text/javascript"> console.log($("input").map(function(){return this;})) </script>

結果、こうなりました。

[ <input type=​"text" name=​"name" value=​"John"> , <input type=​"text" name=​"password" value=​"password"> , <input type=​"text" name=​"url" value=​"http:​/​/​ejohn.org/​"> ]

オブジェクトを配列で返しました。

つまり、mapメソッドは、各要素ごとに処理を行いその結果を配列で返してくれるありがたいメソッドなんですね。

使い方によっては、超強力なメソッドかなと思いました。