Detaillierte Erläuterung der Verwendung von jquery.map() method_jquery

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.

wird für jedes Array-Element aufgerufen und der Konvertierungsfunktion wird ein Parameter übergeben, der das konvertierte Element darstellt.

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]

Beispiel 2:

//原数组中大于 0 的元素加 1 ，否则删除。
//jQuery 代码:
$.map( [0,1,2], function(n){
 return n > 0 ? n + 1 : null;
});
//结果:
[2, 3]

Beispiel 3:

//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组
//jQuery 代码:
$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});
//结果:
[0, 1, 1, 2, 2, 3]

Es ist ersichtlich, dass die Map-Methode der Each-Methode ähnelt, indem sie jedes Objekt oder „Element“ des Arrays durchläuft, um eine Rückruffunktion zum Betreiben des Arrays oder Objekts auszuführen, aber die beiden Methoden weisen auch viele Unterschiede auf

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]

Zurück zum Kartenquellcode

// 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 );
  },

Deklarieren Sie zunächst einige Variablen, um sich auf die nächste Durchquerung vorzubereiten. Die Variable jsArray wird einfach zur Unterscheidung von Objekten und Arrays verwendet. Dieser boolesche zusammengesetzte Ausdruck ist relativ lang, aber er ist nicht schwer zu verstehen, solange Sie sich an die Priorität erinnern Nun, zuerst werden die Klammern ausgeführt, dann die logische UND>Logische ODER>Kongruente>Zuweisung, und dann können Sie

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;
        }
      }

Wenn es sich um ein Array oder ein Array handelt, übergeben Sie den Wert und den Zeiger jedes Elements der Schleife sowie den Parameter arg zur Ausführung direkt an die Rückruffunktion. Der Parameter arg ist der in dieser Methode verwendete Parameter Sehr ähnlich zu jeder und einigen anderen jquery-Methoden. Solange bei der Ausführung der Rückruffunktion nicht null zurückgegeben wird, wird das von der Ausführung zurückgegebene Ergebnis dem neuen Array hinzugefügt und direkt übersprungen >

// Flatten any nested arrays
    return ret.concat.apply( [], ret );

Abschließend wird die Ergebnismenge reduziert. Warum ist dieser Schritt erforderlich? Da Map Arrays erweitern kann, ist dies im vorherigen dritten Beispiel der Fall:

$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});

Bei dieser Verwendung ist das erhaltene neue Array ein zweidimensionales Array, daher muss die Dimensionalität reduziert werden

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.