L'utilisation de tableaux basés sur jquery

Le traitement des tableaux de jQuery est pratique et entièrement fonctionnel. Il encapsule de nombreuses fonctions que le tableau JavaScript natif ne peut pas réaliser en une seule étape. Ce qui suit est une explication détaillée de l'utilisation des tableaux jquery. Les amis qui en ont besoin peuvent s'y référer

1 $.each(array, [callback]) Traversal [couramment utilisé]

. Explication : Différent du parcours d'objets jQuery La méthode $().each(), cette méthode peut être utilisée pour parcourir n'importe quel objet. La fonction de rappel a deux paramètres : le premier est le membre de l'objet ou l'index du tableau, et le second est la variable ou le contenu correspondant. Si vous devez quitter chaque boucle, vous pouvez créer. la fonction de rappel renvoie false et les autres valeurs de retour seront ignorées.

Chaque parcours est familier à tout le monde. Dans le traitement d'événements ordinaire, c'est une variante de la boucle for, mais elle est plus puissante que la boucle for. Dans un tableau, il peut facilement capturer l'index du tableau et la valeur correspondante. Exemple :

Le code est le suivant :

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同  
$.each(_mozi,function(key,val){  
    //回调函数有两个参数,第一个是元素索引,第二个为当前值  
    alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);  
});

Par rapport au natif for..in, chacun est plus fort. for..in peut également parcourir le tableau et renvoyer l'index correspondant, mais la valeur doit être obtenue via arrName[key].

2. $.grep(array, callback, [invert]) filter array [couramment utilisé]

Explication : utilisez la fonction filter pour filtrer les éléments du tableau. (le troisième paramètre Chaque est vrai ou faux, et la valeur de retour de la fonction filtre est inversée. Personnellement, je pense que ce n'est pas très utile) : le tableau à filtrer et la fonction filtre La fonction filtre doit retourner vrai pour conserver le. elements ou false pour supprimer les éléments. De plus, la fonction de filtre peut également être définie sur une chaîne de texte.

Le code est le suivant :

$.grep(_mozi,function(val,key){  
    //过滤函数有两个参数,第一个为当前元素,第二个为元素索引  
    if(val=='墨子'){  
        alert('数组值为 墨子 的下标是: '+key);  
    }  
});  
var _moziGt1=$.grep(_mozi,function(val,key){  
    return key>1;  
});  
alert('_mozi数组中索引值大于1的元素为: '+_moziGt1);  
var _moziLt1=$.grep(_mozi,function(val,key){  
    return key>1;  
},true);  
//此处传入了第三个可靠参数,对过滤函数中的返回值取反  
alert('_mozi数组中索引值小于等于1的元素为: '+_moziLt1);

3 $.map(array,[callback])Convertir le tableau selon les conditions données [générales. ]

Explication : 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 élément représentant l'élément converti en tant que paramètre. La fonction de conversion peut renvoyer la valeur convertie, null. (supprimez l'élément dans les éléments du tableau) ou un tableau contenant des valeurs, développé dans le tableau d'origine.

Il s'agit d'une méthode très puissante, mais elle n'est pas couramment utilisée. Elle peut mettre à jour la valeur d'un élément du tableau en fonction de conditions spécifiques, ou développer un nouvel élément de copie en fonction de la valeur d'origine.

Le code est le suivant :

var _mapArrA=$.map(_mozi,function(val){  
    return val+'[新加]';  
});  
var _mapArrB=$.map(_mozi,function(val){  
    return val=='墨子' ? '[只给墨子加]'+val : val;  
});  
var _mapArrC=$.map(_mozi,function(val){  
    //为数组元素扩展一个新元素  
    return [val,(val+'[扩展]')];  
});  
alert('在每个元素后面加\'[新加]\'字符后的数组为: '+ _mapArrA);  
alert('只给元素 墨子 添加字符后的数组为: '+ _mapArrB);  
alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为 '+_mapArrC);

4 .$.inArray(val,array) détermine si la valeur existe dans le tableau [couramment utilisé]

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

Vous vous souvenez de la méthode indexOf() ? indexOf() renvoie la première position d'occurrence de la chaîne, tandis que $.inArray() renvoie la position du paramètre passé dans le tableau. De même, s'il est trouvé, qu'est-ce qui est renvoyé. est une valeur supérieure ou égale à 0, ou à -1 si elle n'est pas trouvée. Maintenant, vous savez comment l'utiliser. Avec cela, il devient facile de déterminer si une valeur existe dans le tableau.

Le code est le suivant :

var _exist=$.inArray('墨子',_mozi);  
var _inexistence=$.inArray('卫鞅',_mozi)  
if(_exist>=0){  
    alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist);  
}  
if(_inexistence<0){  
    alert(&#39;卫鞅 不存在于数组_mozi中!,返回值为: &#39;+_inexistence+&#39;!&#39;);  
}

5 .$.merge(first, second) fusionne deux tableaux [général]

Explication : Return Le résultat modifie le contenu du premier tableau - les éléments du premier tableau sont suivis des éléments du deuxième tableau. Cette méthode utilise la méthode jQuery pour remplacer la méthode native concat(), mais sa fonction n'est pas aussi puissante que concat(), qui peut fusionner plusieurs tableaux en même temps.

Le code est le suivant :

//原生concat()可能比它还简洁点  
_moziNew=$.merge(_mozi,['鬼谷子','商鞅','孙膑','庞涓','苏秦','张仪'])  
alert('合并后新数组长度为: '+_moziNew.length+'. 其值为: '+_moziNew);

6 .$.unique(array) filtre les éléments en double dans le tableau [pas couramment utilisé]

Explication : Supprimer les doublons éléments du tableau. Traite uniquement la suppression des tableaux d’éléments DOM, mais ne peut pas traiter les tableaux de chaînes ou numériques.

La première fois que j'ai vu cette méthode, j'ai pensé que c'était une méthode très pratique qui permet de filtrer les doublons. C'est parfait. Mais si vous y regardez de plus près, vous pouvez voir qu'il ne peut gérer que les éléments DOM et que ses fonctionnalités sont réduites de 20 %. Par conséquent, je l'ai défini comme un élément qui n'est pas couramment utilisé. Du moins, je ne l'ai pas utilisé depuis que j'ai commencé à utiliser jQuery.

Le code est le suivant :

var _h2Arr=$.makeArray(h2obj);  
//将数组_h2Arr重复一次  
_h2Arr=$.merge(_h2Arr,_h2Arr);  
var _curLen=_h2Arr.length;  
_h2Arr=$.unique(_h2Arr);  
var _newLen=_h2Arr.length;  
alert('数组_h2Arr原长度值为: '+_curLen+' ,过滤后为: '+_newLen  
      +' .共过滤 '+(_curLen-_newLen)+'个重复元素')

7 $.makeArray(obj) Convertir des objets de type tableau en tableaux [pas couramment utilisé]

Explication : Convertissez un objet de type tableau en objet de type tableau. L'objet de type tableau a un attribut de longueur et son index de membre est de 0 à longueur-1.
C'est une méthode redondante. Le tout-puissant $ contient déjà cette fonction. L'explication sur le site officiel de jQuery est très vague. En fait, il convertit un objet de type tableau (comme une collection d'objets élément obtenu avec getElementsByTagName) en un objet tableau.
Le code est le suivant :

var _makeArr=$.makeArray(h2obj);  
alert('h2元素对象集合的数据
类型转换
为: '+_makeArr.constructor.name);//输出Array

8 $(dom).toArray() restaure tous les éléments DOM dans des tableaux [peu couramment utilisé]
Explication : restaurez tous les éléments DOM de la collection jQuery dans un tableau. Ce n'est pas une méthode couramment utilisée. Personnellement, je pense qu'elle est aussi redondante que $.makeArray.

Le code est le suivant :

.

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!