L'utilisation de méthodes statiques inArray, grep, merge, makeArray et l'analyse du code source dans jQuery

Méthode inArray

détermine la position du premier paramètre dans le tableau, en comptant à partir de 0 (renvoie -1 s'il n'est pas trouvé) .

Exemple :

var arr = [ 4, "Pete", 8, "John" ];

jQuery.inArray("John", arr);  //3

jQuery.inArray(4, arr);  //0

jQuery.inArray("David", arr);  //-1

jQuery.inArray("Pete", arr, 2);  //-1

Analyse du code source :

inArray: function( elem, array, i ) {
        var len;

        if ( array ) {
            if ( indexOf ) {
                return indexOf.call( array, elem, i );
            }

            len = array.length;
            i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;

            for ( ; i < len; i++ ) {
                // Skip accessing in sparse arrays
                if ( i in array && array[ i ] === elem ) {
                    return i;
                }
            }
        }

        return -1;
    },

Accepter 3 Paramètres, le paramètre elem est l'élément à rechercher et array est le tableau à rechercher, i représente la position de départ spécifiée de la recherche. La valeur par défaut est 0. Autrement dit, la recherche dans l'ensemble du tableau est similaire à la méthode trim. ECMA5 fournit également une méthode prototype indexOf pour l'objet tableau. Si le code est exécuté, les navigateurs prennent en charge l'appel direct de cette méthode

var arr=[1,2,3];
     
  alert(arr.indexOf(2));  //1     
  alert(arr.indexOf(2,2));  //-1

peut être utilisée directement par les développeurs qui n'en ont pas besoin ; pour envisager la navigation en version basse. Pour les navigateurs qui ne le prennent pas en charge, utilisez une boucle for...in

Enregistrez d'abord la longueur du tableau et traitez i en fonction. la longueur. Si i n'existe pas, laissez-la être 0. Si elle est inférieure à 0, ajoutez len puis jugez si elle est toujours inférieure à 0, alors faites-la à nouveau

. La boucle for...in ici est différente de la forme que nous utilisons habituellement. Comme mentionné dans les commentaires, les tableaux clairsemés doivent être évités. Qu'est-ce qu'un tableau clairsemé ? Par exemple :

var arr=[undefined,undefined];
 arr[2]=4;
 console.log(arr);//[undefined,undefined,4]
 var i=0;len=arr.length;
 for ( i in arr ) {
      alert(i in arr);  //true x 3
 }

 var arr=[];
 arr[2]=4;
 console.log(arr);//[2:4]
 var i=0;len=arr.length;
 for ( i in arr ) {
       alert(i in arr);  //false x 3 true
  }

.

Les deux tableaux utilisent la même méthode. Bien que la longueur soit de 3 et la valeur de performance soit la même, les résultats renvoyés par l'opération in sont différents. Le deuxième type est un tableau clairsemé, dont les éléments sont discontinus. La boucle for...in en ajoutera automatiquement deux non définis mais le résultat est faux. Pour ce type de tableau, il n'est pas nécessaire d'ajouter un défini en arrière-plan js, donc jQuery adopte cette approche, qui mérite également d'être apprise. Après l'avoir trouvé, la valeur i correspondante est renvoyée, sinon -1 est renvoyée, vous pouvez donc juger si le résultat renvoyé > -1 existe.

méthode grep

Utilisez la fonction de filtre pour filtrer les éléments du tableau.

Cette fonction passe au moins deux paramètres : le tableau à filtrer et la fonction de filtre. La fonction de filtre doit renvoyer true pour conserver l'élément ou false pour supprimer l'élément.

Exemple :

$.grep( [0,1,2], function(n,i){  return n > 0;
});//结果:[1, 2]//排除数组中大于 0 的元素，使用第三个参数进行排除。$.grep( [0,1,2], function(n,i){  return n > 0;
}, true);//结果:[0]

Analyse du code source :

<span style="font-size: 18px;">grep: <span style="color: #0000ff;">function</span><span style="color: #000000;">( elems, callback, inv ) {    </span><span style="color: #0000ff;">var</span> ret =<span style="color: #000000;"> [], retVal;
    inv </span>= !!<span style="color: #000000;">inv;    </span><span style="color: #008000;">//</span><span style="color: #008000;"> Go through the array, only saving the items</span>
    <span style="color: #008000;">//</span><span style="color: #008000;"> that pass the validator function</span>
    <span style="color: #0000ff;">for</span> ( <span style="color: #0000ff;">var</span> i = 0, length = elems.length; i < length; i++<span style="color: #000000;"> ) {
         retVal </span>= !!<span style="color: #000000;">callback( elems[ i ], i );         </span><span style="color: #0000ff;">if</span> ( inv !==<span style="color: #000000;"> retVal ) {
             ret.push( elems[ i ] );
         }
   }   </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> ret;<br/>}</span></span>

Cette méthode accepte 3 paramètres, elems est le tableau à filtrer, callback est la fonction de rappel, inv indique s'il faut inverser le filtrage, le la valeur par défaut est fausse ;

Tout d'abord, forcez la conversion de inv en une valeur booléenne, puis utilisez une boucle for pour transmettre les éléments dans le tableau dans la fonction de rappel un par un pour exécution. Le résultat du retour est attribué à retVal. Si retVal est égal à inv, l'élément est placé dans le nouveau tableau ret et ret est finalement renvoyé. si elle est égale, la valeur de retour de la fonction de rappel doit être une valeur booléenne.

Méthode de fusion

Fusionner deux tableaux

Le résultat renvoyé modifie le contenu du premier tableau - les éléments du premier tableau sont suivis par les éléments du deuxième tableau.

Exemple :

//合并两个数组到第一个数组上。$.merge( [0,1,2], [2,3,4] )//结果:[0,1,2,2,3,4]

Analyse du code source :

merge: function( first, second ) {    var i = first.length,
        j = 0;    if ( typeof second.length === "number" ) {         for ( var l = second.length; j < l; j++ ) {
             first[ i++ ] = second[ j ];
         }

    } else {          while ( second[j] !== undefined ) {
             first[ i++ ] = second[ j++ ];
          }
    }

    first.length = i;    return first;
},

Cette méthode accepte deux paramètres de tableau, le second est le tableau fusionné et le premier est le tableau à fusionner. En fait, le tableau ici n'est pas nécessairement un "pur tableau", il peut s'agir d'un objet de type tableau ou d'un objet avec un indice numérique

Tout d'abord, différenciez en fonction de la longueur ; attribut du deuxième tableau, s'il s'agit d'un type numérique, il est supposé être un tableau et une boucle for est utilisée pour l'ajouter un par un au premier tableau. S'il ne s'agit pas d'un nombre ou s'il n'existe pas, une boucle while est utilisée pour ajouter ou écraser toutes les valeurs non définies du deuxième tableau par la valeur d'indice correspondante du premier tableau.

Enfin, corrigez manuellement la valeur de longueur, car pour les données qui ne sont pas un "pur tableau", la valeur de longueur ne sera pas automatiquement modifiée.

Méthode makeArray

Convertit un objet de type tableau en objet tableau.

Les objets de type tableau ont une propriété de longueur dont les membres sont indexés de 0 à longueur - 1. En pratique cette fonction sera utilisée automatiquement dans jQuery sans aucune conversion particulière.

Exemple :

//HTML 代码:<p>First</p><p>Second</p><p>Third</p><p>Fourth</p>//jQuery 代码:var arr = jQuery.makeArray(document.getElementsByTagName("p"));
arr.reverse(); // 使用数组翻转函数//结果:[Fourth,Third,Second,First]

Analyse du code source :

<span style="font-size: 18px;"><span style="color: #008000;">//</span><span style="color: #008000;"> results is for internal usage only</span>makeArray: <span style="color: #0000ff;">function</span><span style="color: #000000;">( array, results ) {   <br/><br/></span><span style="color: #0000ff;">var</span> ret = results ||<span style="color: #000000;"> [];   </span><span style="color: #0000ff;">if</span> ( array != <span style="color: #0000ff;">null</span><span style="color: #000000;"> ) {        <br/> <br/></span><span style="color: #008000;">//</span><span style="color: #008000;"> The window, strings (and functions) also have &#39;length&#39;</span>
        <span style="color: #008000;">//</span><span style="color: #008000;"> Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930</span>
        <span style="color: #0000ff;">var</span> type =<span style="color: #000000;"> jQuery.type( array );        <br/> <br/></span><span style="color: #0000ff;">if</span> ( array.length == <span style="color: #0000ff;">null</span> || type === "string" || type === "function" || type === "regexp" ||<span style="color: #000000;"> jQuery.isWindow( array ) ) {
            push.call( ret, array );
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            jQuery.merge( ret, array );
        }
   }   </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> ret;<br/>},</span></span>

 

这里接受两个参数，其中第二个参数是内部使用的，在源码内部经常被调用作为其他方法的支持方法。

创建一个新数组ret，如果只有一个参数则为空，如果存在第二个参数就把第二个参数赋值给ret，在array参数存在的前提下获取其数据类型，如果数据类型为字符串、函数或者正则时或者不存在length属性时，则假定array不是数组或者类数组，因为字符串、函数和正则（黑莓系统下）都是有length属性的，所以只判断length不准确，如果不是数组或者类数组就直接将第一个参数放入ret的末尾。如果通过了则认为是数组或者是类数组，此时调用merge方法将两个数组合并，最后返回ret。

 

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!