jQuery() の挙動を解読する(9) jQuery().find()メソッド解読のためのjQuery.map()メソッド解読──jQuery解読(13)

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

このエントリイでは、jQuery.init()メソッド内の53行で呼び出されるjQuery().find(selector)メソッドを解読する手始めとして、jQuery().find()メソッドの最初に登場するjQuery.map()クラスメソッドの解読を行います。

このエントリイのjQuery.js 1.2.1における対象箇所

コードの表示/隠蔽

225: find: function(t) {
226: 　var data = jQuery.map(this, function(a){ return jQuery.find(t,a); });
227: 　return this.pushStack( /[^+>] [^+>]/.test( t ) || t.indexOf("..") > -1 ?
228: 　　jQuery.unique( data ) : data );
229: },
　　　・・・・・
987: map: function(elems, fn) {
988: 　// If a string is passed in for the function, make a function
989:　 // for it (a handy shortcut)
990: 　if ( typeof fn == "string" )
991: 　　fn = eval("false||function(a){return " + fn + "}");
992:
993:　 var result = [];
994:
995: 　// Go through the array, translating each of the items to their
996: 　// new value (or values).
997: 　for ( var i = 0, el = elems.length; i < el; i++ ) {
998: 　　var val = fn(elems[i],i);
999:
1000: 　 if ( val !== null && val != undefined ) {
1001:　　　if ( val.constructor != Array ) val = [val];
1002:　　　result = result.concat( val );
1003:　　}
1004:　}
1005:
1006:　return result;
1007: }

全く知りませんでしたが、「map」とはプログラミング界では一般的な専門用語のようです。ある関数の引数として別の関数を受け取る関数を「高階関数（higher-order function）」と呼ぶらしい。その結果、ある配列の各要素を対象として順番にそれを操作した結果を返す関数を作ることが出来る、ということらしい。

C言語やPerlなどでは一般的なようですが、Javascriptの場合実装されてないため、each()メソッドと同様に、フレームワークで色々と工夫されている模様です。

cf.　こちらに数少ないJavascriptの高階関数の説明があります。
第2回　JavaScriptの関数をマスターしよう − ＠IT

さてその map 関数ですが、要所は998行の val = fn(elems[i],i); にあると思います。元の関数の第二引数である関数の、その第一引数に、元の関数の第一引数である配列の各要素を渡しています。後はこのvalを元の配列回数分だけ集めて新たな配列としてまとめればよい訳で、まとめ上げられたその配列は、呼出し元の関数の返値となって目的が達せられています。

$.map()の例

まずjQuery.js 1.1.4の解説にあった例題を掲載します。

• $.map( [0,1,2], function(i){ return i + 4; }); //result [4, 5, 6]
• $.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); // result [2, 3]
• $.map( [0,1,2], function(i){ return [ i, i + 1 ]; }); //result [0, 1, 1, 2, 2, 3]

これらの例によって、$.map()を使って、単純に配列要素に加算したり、条件づけて配列要素数さえ増減させたり、自在に加工出来ることがよく分かります。

そこで$.map()の定義を踏まえて独自のサンプルを作ってみます。

$.mapの定義から、引数となる関数には２つの引数（元の配列の各要素とインクリメント値）を渡していますので、jQuery.js1.1.4のサンプルではなかった2つの引数を取る場合を作成してみました。

$.map( [5,10,-2], function(b,a){ 　return (a+1).toString() +"番目は" + (b + 4).toString()+"です。"; });　//返値は ["1番目は9です。","2番目は14です。","3番目は2です。"] となります。

$().find()において$.map()はどの様に使われているのか

以上を踏まえて本題に戻ります。IEやOperaにおける id 値による DOM 操作時に、同一のname値をもつ要素を拾ってしまった場合の対処として、jQuery().find(a)が起動され、その結果$.map()メソッドがよびだされたのでした。

呼び出されたmapメソッドは具体的には次のようになっています。

var data = jQuery.map(this, function(a){ return jQuery.find(t,a); });

つまり、配列 this の各要素に対して、jQuery.find(t,thisの要素) を適用し、その結果の配列を data に代入しています。ここに this は $.map()が jQuery().find（）から呼び出されたのですから jQuery() インスタンスの返値である配列になっているはずです。

ところで上の内容を知るためには、次に進まなければなりません。 jQuery.find() メソッドを解明しなければなりません。

--------------------------------------------------------

ということで、次は愈々長大な $.find()メソッドの解読です。