Maison >interface Web >js tutoriel >Comment jquery définit-il et exploite-t-il les tableaux et les éléments du tableau ?

Comment jquery définit-il et exploite-t-il les tableaux et les éléments du tableau ?

伊谢尔伦
伊谢尔伦original
2017-06-17 10:19:071702parcourir

Tout d'abord, je vais vous présenter les connaissances sur la définition de tableaux et d'opérations en javascript jquery. Le contenu spécifique est le suivant :

1. Comprendre les tableaux

Un tableau est une collection de certains types de données. Le type de données peut être un entier, une chaîne ou même un objet
Javascript ne prend pas en charge . tableaux multidimensionnels, mais comme le tableau peut contenir un objet (un tableau est également un objet), les tableaux peuvent donc réaliser des fonctions similaires aux tableaux multidimensionnels en s'emboîtant les uns les autres

1.1 Définir des tableaux

Déclarez un tableau avec 10 éléments

var a = new Array(10);

À ce moment, l'espace mémoire a été ouvert pour a, contenant 10 éléments. Utilisez le nom du tableau plus [indice] pour appeler. , comme a[2], mais l'élément n'a pas été initialisé pour le moment et l'appel retournera undefined

Le code suivant définit un tableau de variables et attribue des valeurs

var a = new Array();
a[0] = 10;
a[1] = "aaa";
a[2] = 12.6;

Comme mentionné ci-dessus, les objets peuvent être placés dans le tableau, par exemple, le code suivant

var a =  new Array();
a[0]  = true;
a[1]  = document.getElementByIdx_x("text");
a[2]  = {x:11, y:22};
a[3]  = new Array();

Les tableaux peuvent être directement attribués lorsqu'ils sont instanciés, par exemple

var a = new Array(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];

a et b. sont les deux tableaux, mais b utilise une déclaration implicite pour créer une autre instance à ce moment, si alert(a= =b) False apparaîtra

1.2 Tableau multidimensionnel

En fait, Javascript ne prend pas en charge les tableaux multidimensionnels. Vous pouvez utiliser dim a(10,3) pour le définir dans asp. Pour les tableaux multidimensionnels, en Javascript, si vous utilisez var a = new Array(10). ,3), une erreur sera signalée
Mais comme mentionné précédemment, les tableaux peuvent contenir des objets, vous pouvez donc déclarer un élément du tableau comme un tableau, par exemple

var a = new Array();
a[0] = new Array();
a[0][0] = 1;
alert(a[0][0]); //弹出 1

Attribuer une valeur lors de la déclaration

var a = new Array([1,2,3], [4,5,6],  [7,8,9]);
var b = [[1,2,3], [4,5,6], [7,8,9]];

L'effet est le même, a utilise une instanciation régulière, b est une déclaration implicite et le résultat est un tableau multidimensionnel

<.>1.3 Littéraux de tableau

Je ne sais vraiment pas comment cela s'appelle en chinois, tableau littéral ?

En parlant de tableaux, nous devons parler des littéraux de tableau. Les tableaux sont en fait des objets spéciaux. Les objets ont des
propriétés et des méthodes uniques. Les valeurs peuvent être obtenues et appelées via le nom de l'objet.propriété et l'objet. method() et les tableaux obtiennent des valeurs via des indices. Les littéraux de tableau sont similaires aux tableaux à bien des égards. Ce sont tous deux des collections d'un certain type de données. Cependant, les littéraux de tableau sont fondamentalement un objet, et leur déclaration et leur appel sont différents. arrays

var aa = new Object();
aa.x = "cat";
aa.y = "sunny";
alert(aa.x);  //弹出cat
Créer un objet simple. Généralement, l'appel se fait via aa. C'est une autre

façon de créer un objet

, le résultat est le même
var a = {x:"cat",  y:"sunny"};
alert(a["y"]); //弹出sunny

2. Fonctionnement des éléments du tableau

Comme mentionné ci-dessus, l'élément peut être lu et écrit via le tableau [indice]. l'indice est 0 – (23 (exposant 2) -1). L'indice est un nombre négatif, une virgule flottante ou même une valeur booléenne. Le moment venu, le tableau sera automatiquement converti en type d'objet, par exemple,

équivaut à b["2.2"] = "XXXXX"

var b  = new Array();
b[2.2]  = "XXXXX";
alert(b[2.2]); //-> XXXXX
2.1 Boucle de tableau

C'est le celui le plus couramment utilisé. Lors de la traversée du tableau, le code apparaîtra de 1 à 6 dans l'ordre

Il existe également un
var a = [1,2,3,4,5,6];
for(var i =0; i<a.length; i++){
alert(a[i]);
}

couramment utilisé qui apparaîtra 1 dans l'ordre. 6, for...in consiste à parcourir l'objet (le tableau est un objet spécial). Il est utilisé sur le tableau. Parce que le tableau n'a pas de nom d'attribut, la valeur est affichée directement sur l'objet. , comme ce qui suit

var a = [1,2,3,4,5,6];
for(var e in a){
alert(e);
}
À ce moment, e obtient le nom de l'attribut, c'est-à-dire x, y, x, et pour obtenir la valeur, le nom du tableau [attribut] est utilisé, donc un [e] est équivalent à a["x"], a[ "y"], a["z"]

var a = {x:1,y:2,z:3};
for(var e in a){
alert(e  + ":" + a[e]);
}
2.2 Tableau

Fonctions communes

concat

Ajoute un tableau après le tableau existant et renvoie le nouveau tableau, sans affecter le tableau existant

Il est à noter qu'il ne peut être utilisé pour les tableaux ou les chaînes que s'ils sont connectés (le précédent a). S'il s'agit d'une valeur numérique, d'une valeur booléenne ou d'un objet, une erreur sera signalée lorsque la chaîne

est connectée au tableau

. La chaîne sera épissée avec le premier élément du tableau pour former un nouvel élément, tandis que la chaîne de connexion du tableau ajoutera de nouveaux éléments (sur ce point, je ne connais pas toute l'histoire, veuillez la divulguer si vous la connaissez). tableaux et objets qui contiennent des tableaux et des objets, conservez-les tels quels après avoir rejoint
var a = [123];
var b = "sunnycat";
var c =  ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1,2,3,4,[5,6,[7,8]]];
alert(a.concat(b));   // -> 123,sunnycat
alert(a); //  -> 123
alert(b.concat(c, d));    // -> sunnycatwww,21,ido[object  Object]
alert(c.concat(b));   // -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" #  "));    // -> 1 # 2 # 3  # 4 # 5,6,7,8 # 11 # 22 # 33

join

et connectez-les avec le séparateur spécifié, convertissez le tableau en une chaîne

C'est facile à comprendre, mais il convient de noter qu'il ne convertit que le tableau unidimensionnel

var a = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;];
lert(a.join(","));  // -> a,b,c,d,e,f,g 相当于a.toString()
alert(a.join(" x ")); // -> a x b x c x d x e x f x g
à l'intérieur, si le tableau Il y a aussi des tableaux à l'intérieur. en utilisant la chaîne spécifiée par join, la valeur par défaut toString() est utilisée. Par exemple, les tableaux du tableau

ne sont pas connectés à l'aide de .
pop

var a =  [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;,[11,22,33]];
alert(a.join(" * ")); // -> a * b * c * d * e * f * g *  11,22,33

Supprimez le dernier élément du tableau et renvoyez cet élément

Si le tableau est vide, renvoyez undéfini

push

var a =  ["aa","bb","cc"];
document.write(a.pop());  // -> cc
document.write(a);    // -> aa, bb

Ajoute un tableau à la fin du tableau et renvoie la nouvelle longueur du tableau

La différence avec concat est que concat n'affecte pas le tableau d'origine et renvoie directement la nouvelle longueur du tableau, tandis que push modifie directement le tableau d'origine et renvoie la nouvelle longueur du tableau

sort

数组排序,先看个例子

var a = [11,2,3,33445,5654,654,"asd","b"];
alert(a.sort()); // -> 11,2,3,33445,5654,654,asd,b

结果是不是很意外,没错,排序并不是按整型大小,而是字符串对比,就是取第一个字符的ANSI码对比,小的排前面,相同的话取第二个字符再比,如果要按整型数值比较,可以这样

var a = [11,2,3,33445,5654,654];
a.sort(function(a,b) {
return a - b;
});
alert(a); //  -> 2,3,11,654,5654,33445

sort()方法有个可选参数,就是代码里的function,这是个简单的例子,不可对非数字进行排序,非数字需要多做判断,这里就不多讲

reverse

对数组进行反排序跟,sort()一样,取第一字符ASCII值进行比较

var a = [11,3,5,66,4];
alert(a.reverse()); // -> 4,66,5,3,11

如果数组里面还包含数组,则当为对象处理,并不会把元素解出来

>var a = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;,[4,11,33]];
alert(a.reverse()); // -> 4,11,33,g,f,e,d,c,b,a
alert(a.join(" * ")); // -> 4,11,33 * g * f * e * d * c * b * a

按理应该是11排最后面,因为这里把 4,11,33 当做完整的对象比较,所以被排在第一位。看不明白的话,用join()串起来,就明了多

shift

删除数组第一个元素,并返回该元素,跟pop差不多

var a =  ["aa","bb","cc"];
document.write(a.shift());  // -> aa
document.write(a);    // -> bb,cc

当数组为空时,返回undefined

unshift

跟shift相反,往数组最前面添加元素,并返回数组新长度

var a =  ["aa","bb","cc"];
document.write(a.unshift(11));  // -> 4 注:IE下返回undefined
document.write(a);    // -> 11,aa,bb,cc
document.write(a.unshift([11,22]));  // -> 5
document.write(a);    // -> 11,22,11,aa,bb,cc
document.write(a.unshift("cat")); // -> 6
document.write(a);    // -> cat,11,22,11,aa,bb,cc

注意该方法,在IE下将返回undefined,貌似微软的bug,我在firefox下则能正确发挥数组新长度

slice

返回数组片段

var a = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;];
alert(a.slice(1,2)); // -> b
alert(a.slice(2));  // -> c,d,e,f,g
alert(a.slice(-4));  // -> d,e,f,g
alert(a.slice(-2,-6));  // -> 空

a.slice(1,2),从下标为1开始,到下标为2之间的数,注意并不包括下标为2的元素
如果只有一个参数,则默认到数组最后
-4是表示倒数第4个元素,所以返回倒数的四个元素
最后一行,从倒数第2开始,因为是往后截取,所以显然取不到前面的元素,所以返回空数组,如果改成 a.slice(-6,-2) 则返回b,c,d,e

splice

从数组删除某片段的元素,并返回删除的元素

var a = [1,2,3,4,5,6,7,8,9];
document.write(a.splice(3,2));  // -> 4,5
document.write(a);    // -> 1,2,3,6,7,8,9
document.write(a.splice(4)); // -> 7,8,9 注:IE下返回空
document.write(a);    // -> 1,2,3,6
document.write(a.splice(0,1));  // -> 1
document.write(a);    // -> 2,3,6
document.write(a.splice(1,1,["aa","bb","cc"]));  // -> 3
document.write(a);    // -> 2,aa,bb,cc,6,7,8,9
document.write(a.splice(1,2,"ee").join("#")); // -> aa,bb,cc#6
document.write(a);    // -> 2,ee,7,8,9
document.write(a.splice(1,2,"cc","aa","tt").join("#")); // -> ee#7
document.write(a);    // -> 2,cc,aa,tt,8,9

注意该方法在IE下,第二个参数是必须的,不填则默认为0,例如a.splice(4),在IE下则返回空,效果等同于a.splice(4,0)

toString

把数组转为字符串,不只数组,所有对象均可使用该方法

var a =  [5,6,7,8,9,["A","BB"],100];
document.write(a.toString());  // -> 5,6,7,8,9,A,BB,100
var b = new Date()
document.write(b.toString());  // -> Sat Aug 8 17:08:32 UTC+0800  2009
var c = function(s){
alert(s);
}
document.write(c.toString());  // -> function(s){ alert(s); }

布尔值则返回true或false,对象则返回[object objectname]
相比join()方法,join()只对一维数组进行替换,而toString()则把整个数组(不管一维还是多维)完全平面化
同时该方法可用于10进制、2进制、8进制、16进制转换,例如

var a =  [5,6,7,8,9,"A","BB",100];
for(var i=0; i<a.length; i++){
document.write(a[i].toString()  + " 的二进制是 "  + a[i].toString(2) + " ,八进制是 " + a[i].toString(8) + " ,十六进制是 " + a[i].toString(16)); //  -> 4,5
}

输出结果

5 的二进制是 101 ,八进制是 5 ,十六进制是 5
6 的二进制是 110 ,八进制是 6 ,十六进制是 6
7 的二进制是 111 ,八进制是 7 ,十六进制是 7
8 的二进制是 1000 ,八进制是 10 ,十六进制是 8
9 的二进制是 1001 ,八进制是 11 ,十六进制是 9
A 的二进制是 A ,八进制是 A ,十六进制是 A
BB 的二进制是 BB ,八进制是 BB ,十六进制是 BB
100 的二进制是 1100100 ,八进制是 144 ,十六进制是 64

转换只能在元素进行,如果对整个数组进行转换,则原封不动返回该数组

toLocaleString

返回本地格式字符串,主要用在Date对象上

var a = new Date();
document.write(a.toString());  // -> Sat Aug 8 17:28:36 UTC+0800  2009
document.write(a.toLocaleString());  // -> 2009年8月8日 17:28:36
document.write(a.toLocaleDateString());  // -> 2009年8月8日

区别在于,toString()返回标准格式,toLocaleString()返回本地格式完整日期(在【控制面板】>>【区域和语言选项】,通过修改[时间]和[长日期]格式),toLocaleDateString()跟toLocaleString()一样,只是少了时间

valueOf

根据不同对象返回不同原始值,用于输出的话跟toString()差不多,但是toString()是返回string类型,而valueOf()是返回原对象类型

var a = [1,2,3,[4,5,6,[7,8,9]]];
var b = new Date();
var c = true;
var d = function(){
alert("sunnycat");
};
document.write(a.valueOf());  // -> 1,2,3,4,5,6,7,8,9
document.write(typeof (a.valueOf())); // -> object
document.write(b.valueOf());  // -> 1249874470052
document.write(typeof(b.valueOf())); // -> number
document.write(c.valueOf());  // -> true
document.write(typeof(c.valueOf())); // -> boolean
document.write(d.valueOf());  // -> function () {  alert("sunnycat"); }
document.write(typeof(d.valueOf())); // -> function

数组也是对象,所以typeof (a.valueOf())返回object,返回的依然是个多维数组

var a = [1,2,3,[4,5,6,[7,8,9]]];
var aa = a.valueOf();
document.write(aa[3][3][1]); // -> 8

Date对象返回的是距离1970年1月1日的毫秒数,
Math和Error对象没有valueOf方法

Jquery 数组操作

在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多。
今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像JSON数据是以数组的形式出现的,查阅了下相关JS中数组的操作一试果然很爽。
记录下来。

1、数组的创建

var arrayObj = new Array(); //创建一个数组
var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值

    要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。

2、数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值

3、数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""

4、数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

5、数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

6、数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向
arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向

7、数组元素的排序
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址
arrayObj.sort(); //对数组元素排序,返回数组地址

8、数组元素的字符串化

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。
toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用


jQuery操作对象数组元素的3种方法以及一种错误方法介绍

<div id="div1">
     <span>a</span>
     <span>b</span>
     <span>c</span>
 </div>

1.错误方式:不能用[]方式取jquery对象数组,如下:

$(function() {
     var div_span = $("#div1 span");
     for( var i = 0; i < div_span.length; i++ ) {
         div_span.[i].html(i);
     }
 });

这样无效.

2.可以用jquery的eq()方法来选择:

 for( var i = 0; i < div_span.length; i++ ) {
     div_span.eq(i).html(i);
 }

3.可以用each()方法来遍历:

$(function() {
     var div_span = $("#div1 span");
     var i = 0;
     div_span.each( function(){
         $(this).html(i);
         i++;
     });
 });

each()遍历的时候,如果用$(this)得到的是jquery对象,如果直接用this,得到的是DOM对象

4.纯js代码获取的DOM对象数组,可以用[]的方式获取数组元素

后面3种是正确的方法,第一种是错误的,把他放在第一个,是因为要强调下,以后不能再犯同样的错误了,小伙伴们可要看仔细哈。

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn