jQueryソース分析(五)map関数$.mapと$fn.map関数の詳細
12628 ワード
$.map()関数は、指定した関数を使用して配列内の各要素(またはオブジェクトの各属性)を処理し、処理結果を新しい配列にカプセル化して返します.この関数には、次の3つのパラメータがあります.
Elems Array/objectタイプで指定した処理する配列またはオブジェクト.
callback遍歴実行コールバック関数
Argパラメータ、コールバック関数の実行時に入力されるパラメータ
callback関数の実行には、2つのパラメータを持つことができます.それぞれは、遍歴に対応する値とそのインデックス(オブジェクトではキー名)であり、戻り値がある場合は、戻り値を1つの配列にまとめることができます.
$.fn.map()の戻り値はjQueryオブジェクトであり、$も呼び出す.map()が実装され、返された配列は最後にpushStackを呼び出してjQueryオブジェクトを作成しただけで、以下のようになります.
ソース分析
writer by:大砂漠QQ:2969969
および$.each()と同じ,$.map()も$.extend()を$にマウントします.fn上の、以下の通りです.
$についてfn.map()は$を呼び出す.mapは、以下のように実現される.
pushStackでは、以前に説明したように、新しいjQueryオブジェクトを作成するだけで、DOM要素とselectorプロパティを指定できます.
Elems Array/objectタイプで指定した処理する配列またはオブジェクト.
callback遍歴実行コールバック関数
Argパラメータ、コールバック関数の実行時に入力されるパラメータ
callback関数の実行には、2つのパラメータを持つことができます.それぞれは、遍歴に対応する値とそのインデックス(オブジェクトではキー名)であり、戻り値がある場合は、戻り値を1つの配列にまとめることができます.
$.fn.map()の戻り値はjQueryオブジェクトであり、$も呼び出す.map()が実装され、返された配列は最後にpushStackを呼び出してjQueryオブジェクトを作成しただけで、以下のようになります.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js">script>
head>
<body>
<p id="p1"> 1p>
<p id="p2"> 2p>
<h1 id="h1"> 1h1>
<h1 id="h2"> 2h1>
<script>
var arr=[11,12,13,14];
var a =$.map(arr,function(element,index){return index;});
console.log(a); // :Array [ 0, 1, 2, 3 ]
var b =$.map([p1,p2,h1,h2],function(elem,i){
console.log(elem,i) // :( ) 0、
1、
2、
3
return elem.parentNode;
})
console.log(b) // :Array [ body, body, body, body ]
var c = $('p').map(function(i,elem){return elem.parentNode});
console.log(c.length) // :2
console.log(c[0]===c[1]) // :true
console.log(c[1]===document.body) // :true
script>
body>
html>ソース分析
writer by:大砂漠QQ:2969969
および$.each()と同じ,$.map()も$.extend()を$にマウントします.fn上の、以下の通りです.
map: function( elems, callback, arg ) { // ，
var value, key, ret = [], //ret
i = 0,
length = elems.length,
// jquery objects are treated as arrays
isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ; //isArray elems
// Go through the array, translating each of the items to their
if ( isArray ) { // ， for ，
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg ); // callback ， Object, Object arg
if ( value != null ) { // null undefined， ret。
ret[ ret.length ] = value;
}
}
// Go through every key on the object,
} else { // ， for-in
for ( key in elems ) {
value = callback( elems[ key ], key, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
}
// Flatten any nested arrays
return ret.concat.apply( [], ret ); // concat() ret ，
},$についてfn.map()は$を呼び出す.mapは、以下のように実現される.
map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) { // jQuery.map() .pushStack() ，
return callback.call( elem, i, elem );
}));
},pushStackでは、以前に説明したように、新しいjQueryオブジェクトを作成するだけで、DOM要素とselectorプロパティを指定できます.