Die Prototyp-Methodenzuordnung ähnelt jeder und ruft die gleichnamige statische Methode auf, mit der Ausnahme, dass die zurückgegebenen Daten vor der Rückgabe von einer anderen Prototyp-Methode pushStack verarbeitet werden müssen. Der Quellcode lautet wie folgt:
map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
},
Dieser Artikel analysiert hauptsächlich die statische Kartenmethode. Was pushStack betrifft, wird es im nächsten Aufsatz analysiert
Verstehen Sie zunächst die Verwendung der Karte (manueller Inhalt)$.map konvertiert Elemente in einem Array in ein anderes Array.
Die Konvertierungsfunktion wird als Parameter für jedes Array-Element aufgerufen und der Konvertierungsfunktion wird ein Parameter übergeben, der das konvertierte Element darstellt.
Die Konvertierungsfunktion kann den konvertierten Wert null (Entfernen des Elements aus dem Array) oder ein Array zurückgeben, das den in das ursprüngliche Array erweiterten Wert enthält.
Parameter
arrayOrObject,callbackArray/Object,FunctionV1.6
arrayOrObject: Array oder Objekt.
Funktion kann jeden Wert zurückgeben.
Alternativ kann diese Funktion auf eine Zeichenfolge festgelegt werden. Wenn sie auf eine Zeichenfolge festgelegt wird, wird sie als „Lambda-Form“ (Kurzform?) behandelt, wobei a ein Array-Element darstellt.
Zum Beispiel steht „a * a“ für „function(a){ return a * a; }“.
Beispiel 1:
//将原数组中每个元素加 4 转换为一个新数组。
//jQuery 代码:
$.map( [0,1,2], function(n){
return n + 4;
});
//结果:
[4, 5, 6]
//原数组中大于 0 的元素加 1 ，否则删除。
//jQuery 代码:
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
//结果:
[2, 3]
//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组
//jQuery 代码:
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
//结果:
[0, 1, 1, 2, 2, 3]
Beispielsweise gibt every() das ursprüngliche Array zurück und erstellt kein neues Array, während „map“ bei jedem Durchlauf bedeutet, dass dies auf das aktuelle Array oder den aktuellen Objektwert zeigt, und „map“ auf das Fenster zeigt, weil in Der Quellcode verwendet keinen Objektidentitätswechsel wie alle anderen
Zum Beispiel:
var items = [1,2,3,4];
$.each(items, function() {
alert('this is ' + this);
});
var newItems = $.map(items, function(i) {
return i + 1;
});
// newItems is [2,3,4,5]
//使用each时，改变的还是原来的items数组，而使用map时，不改变items，只是新建一个新的数组。
var items = [0,1,2,3,4,5,6,7,8,9];
var itemsLessThanEqualFive = $.map(items, function(i) {
// removes all items > 5
if (i > 5)
return null;
return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]
// arg is for internal usage only
map: function( elems, callback, arg ) {
var value, key, 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 ) ) ;
// Go through the array, translating each of the items to their
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
// Go through every key on the object,
} else {
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 );
},
analysieren
Rechnen Sie zuerst in Klammern und fügen Sie dann length !== undefiniert und typeof length === "number zum Ergebnis hinzu. Das Endergebnis dieser beiden notwendigen Bedingungen wird dann logisch ODER-verknüpft mit der elems-Instanz von jQuery. Einfach ausgedrückt ist es isArray Zu den Situationen, die wahr sind, gehören:1. elems-Instanz von jQuery ist wahr, mit anderen Worten, es ist das Jquery-Objekt
2. length !== undefiniert && typeof length === "number" und length > 0 && elems[ length -1 ] ) ||. length === 0 ||. elems) Mindestens einer dieser drei ist etabliert
Kann in 3 kleine Situationen aufgeteilt werden
length existiert und ist eine Zahl, und das Längenattribut des zu durchlaufenden Arrays oder arrayähnlichen Objekts ist größer als 0. length-1 ist vorhanden. Dadurch wird sichergestellt, dass es durchlaufen werden kann, z. B. JQuery-Objekte und DomList-Objekte usw.
Länge existiert und ist eine Zahl und das Längenattribut ist gleich 0. Wenn es 0 ist, spielt es keine Rolle, es wird nicht durchlaufen
Länge existiert und ist eine Zahl und das zu durchlaufende Objekt ist ein reines Array
Nachdem Sie diese Bedingungen erfüllt haben, beginnen Sie mit der Traversierung entsprechend dem Ergebnis von isArray. Verwenden Sie für „Array“ die for-Schleife und für das Objekt die for...in-Schleife
// Go through the array, translating each of the items to their
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret[ ret.length ] = value;
}
}
// Flatten any nested arrays
return ret.concat.apply( [], ret );
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
ret.concat.apply([], ret) entspricht [].concat.apply([], ret). Die Schlüsselfunktion ist apply, da der zweite Parameter von apply das ret-Array in mehrere Parameter unterteilt. Es lohnt sich, es an concat zu übergeben, um ein zweidimensionales Array in ein eindimensionales Array umzuwandeln
Eine einfache Analyse der Kartenmethode ist abgeschlossen. Ich hoffe, Sie können mich korrigieren, falls aufgrund eingeschränkter Funktionen Fehler auftreten.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.
