Explication détaillée de l'utilisation de jquery.map() method_jquery

La carte de la méthode prototype est similaire à chacune et appelle la méthode statique du même nom, sauf que les données renvoyées doivent être traitées par une autre méthode prototype pushStack avant d'être renvoyées. Le code source est le suivant :

map: function( callback ) {
    return this.pushStack( jQuery.map(this, function( elem, i ) {
      return callback.call( elem, i, elem );
    }));
  },

Cet article analyse principalement la méthode de la carte statique. Quant à pushStack, elle sera analysée dans le prochain essai

Comprenez d'abord l'utilisation de la carte (contenu manuel)

$.map convertit les éléments d'un tableau en un autre tableau.

La fonction de conversion en tant que paramètre sera appelée pour chaque élément du tableau, et la fonction de conversion recevra un paramètre représentant l'élément en cours de conversion.

La fonction de conversion peut renvoyer la valeur convertie, null (suppression de l'élément du tableau) ou un tableau contenant la valeur développée dans le tableau d'origine.

Paramètres
arrayOrObject,callbackArray/Object,FunctionV1.6
arrayOrObject : tableau ou objet.

est appelé pour chaque élément du tableau et la fonction de conversion reçoit un paramètre représentant l'élément en cours de conversion.

La fonction peut renvoyer n'importe quelle valeur.

Alternativement, cette fonction peut être définie sur une chaîne, et lorsqu'elle est définie sur une chaîne, elle sera traitée comme une "forme lambda" (forme courte ?), où a représente un élément de tableau.

Par exemple, "a * a" représente "function(a){ return a * a; }".

Exemple 1 :

//将原数组中每个元素加 4 转换为一个新数组。
//jQuery 代码:
$.map( [0,1,2], function(n){
 return n + 4;
});
//结果:
[4, 5, 6]

Exemple 2 :

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

Exemple 3 :

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

On peut voir que la méthode map est similaire à la méthode each en parcourant chaque objet ou "élément" du tableau pour exécuter une fonction de rappel pour faire fonctionner le tableau ou l'objet, mais les deux méthodes présentent également de nombreuses différences

Par exemple, each() renvoie le tableau d'origine et ne crée pas de nouveau tableau, tandis que map crée un nouveau tableau ; chaque parcours signifie que cela pointe vers le tableau actuel ou la valeur de l'objet, et mappe vers la fenêtre, car dans Le code source n'utilise pas l'usurpation d'identité d'objet comme chacun

Par exemple :

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]

Retour au code source de la carte

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

Tout d'abord, déclarez quelques variables pour préparer le prochain parcours. La variable jsArray est utilisée pour simplement distinguer les objets et les tableaux. Cette expression composée booléenne est relativement longue, mais elle n'est pas difficile à comprendre tant que vous vous souvenez de la priorité. des opérateurs js. Eh bien, d'abord les parenthèses sont exécutées en premier, puis l'affectation logique AND>Logical OR>Congruent>, et ensuite vous pouvez analyser

Calculez d'abord entre parenthèses, puis ajoutez length !== undefined et typeof length === "number au résultat. Le résultat final de ces deux conditions nécessaires est ensuite logiquement OU combiné avec l'instance elems de jQuery. En termes simples, c'est isArray Les situations qui sont vraies incluent :

1. L'instance elems de jQuery est vraie, en d'autres termes, c'est l'objet jquery

2. longueur !== non défini && type de longueur === "nombre" et longueur > 0 && elems[ 0 ] && elems[ length -1 ] ) || elems) Au moins un de ces trois est établi

Peut être divisé en 3 petites situations

length existe et est un nombre, et l'attribut length du tableau ou de l'objet de type tableau à parcourir est supérieur à 0. length-1 existe Cela garantit qu'il peut être parcouru, comme les objets jquery, les objets domList. , etc.

length existe et est un nombre et l'attribut length est égal à 0. S'il vaut 0, ce n'est pas grave, il ne sera pas parcouru

la longueur existe et est un nombre et l'objet à parcourir est un tableau pur

Après avoir rempli ces conditions, commencez à parcourir séparément en fonction du résultat de isArray, pour "array", utilisez la boucle for, et pour l'objet, utilisez for...in loop

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

Lorsqu'il s'agit d'un tableau ou de type tableau, transmettez directement la valeur et le pointeur de chaque élément de la boucle et le paramètre arg dans la fonction de rappel pour exécution. Le paramètre arg est le paramètre utilisé en interne dans cette méthode, qui est. très similaire à chacune et à certaines autres méthodes jquery. , tant que null n'est pas renvoyé lors de l'exécution de la fonction de rappel, le résultat renvoyé par l'exécution sera ajouté au nouveau tableau. Il en va de même pour les opérations sur les objets et sautera directement

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

Enfin, l'ensemble de résultats est aplati. Pourquoi cette étape est-elle nécessaire ? Parce que map peut étendre les tableaux, c'est le cas dans le troisième exemple précédent :

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

S'il est utilisé de cette manière, le nouveau tableau obtenu est un tableau bidimensionnel, donc la dimensionnalité doit être réduite

ret.concat.apply([], ret) est équivalent à [].concat.apply([], ret). La fonction clé est apply, car le deuxième paramètre de apply divise le tableau ret en plusieurs paramètres. Le passer à concat pour convertir un tableau à deux dimensions en un tableau à une dimension vaut la peine d'être collecté

Une analyse simple de la méthode cartographique a été effectuée. J'espère que vous pourrez me corriger s'il y a des erreurs dues à des capacités limitées.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.