Heim > Web-Frontend > js-Tutorial > Hauptteil

Definieren von Arrays und Operationen sowie JQuery-Array-Operationen in JavaScript jQuery

高洛峰
Freigeben: 2017-02-06 09:55:05
Original
1262 Leute haben es durchsucht

Zunächst werde ich Ihnen die relevanten Kenntnisse zum Definieren von Arrays und Operationen in Javascript-JQuery vorstellen. Der spezifische Inhalt ist wie folgt:

Arrays verstehen

Ein Array ist eine Sammlung bestimmter Datentypen und der Datentyp Es kann eine Ganzzahl, eine Zeichenfolge oder sogar ein Objekt sein
Javascript unterstützt keine mehrdimensionalen Arrays, aber da Arrays Objekte enthalten können (ein Array ist auch ein Objekt). ), Arrays können durch gegenseitiges Verschachteln ähnliche Funktionen wie mehrdimensionale Arrays erreichen

1.1 Definieren Sie das Array

Deklarieren Sie ein Array mit 10 Elementen

var a = new Array(10);
Nach dem Login kopieren

Zu diesem Zeitpunkt , der Speicherplatz wurde für a geöffnet und enthält 10 Elemente. Verwenden Sie zum Aufrufen den Array-Namen plus [Index], aber das Element wurde zu diesem Zeitpunkt noch nicht initialisiert. Der Aufruf gibt undefiniert zurück

Der folgende Code definiert ein Variablenarray und weist einen Wert zu

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

wie oben erwähnt. Danach können Objekte im Array platziert werden, zum Beispiel der folgende Code 🎜>a und b sind beides Arrays, aber b verwendet eine implizite Deklaration, um eine weitere Instanz zu erstellen. Wenn zu diesem Zeitpunkt Alert(a==b) verwendet wird, ist false

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

Tatsächlich tut dies Javascript In ASP können Sie dim a(10,3) verwenden, um mehrdimensionale Arrays zu definieren. Wenn Sie in Javascript var a = new Array(10,3) verwenden, wird ein Fehler gemeldet 🎜> Aber wie bereits erwähnt, kann ein Array Objekte enthalten, sodass ein Element im Array als Array deklariert werden kann. Beispielsweise wird

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

bei der Deklaration ein Wert zugewiesen

Der Effekt ist der gleiche, a verwendet reguläre Instanziierung, b ist eine implizite Deklaration und das Ergebnis ist ein mehrdimensionales Array

1.3 Array-Literale
var a = new Array();
a[0] = new Array();
a[0][0] = 1;
alert(a[0][0]); //弹出 1
Nach dem Login kopieren

Das stimmt wirklich. Ich weiß nicht, wie es auf Chinesisch heißt, Textarray?

Apropos Arrays: Arrays sind eigentlich spezielle Objekte. Werte und Aufrufe werden über Objektname.property, object.method() und Arrays abgerufen Durch die folgenden Marker werden Array-Literale in vielerlei Hinsicht verwendet. Sie sind beide Sammlungen eines bestimmten Datentyps. Ihre Deklaration und ihr Aufruf unterscheiden sich jedoch von Arrays >

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

Ein einfaches Objekt erstellen

Dies ist eine andere Möglichkeit, ein Objekt zu erstellen, das Ergebnis ist das gleiche

2. Operation von Array-Elementen

Wie oben erwähnt, können Sie Array [subscript] übergeben, um Elemente zu lesen und zu schreiben

, der Bereich der Indizes ist 0 – (23(hochgestellt 2) -1). Wenn der Index eine negative Zahl, ein Gleitkomma oder sogar ein boolescher Wert ist, wird das Array automatisch in einen Objekttyp konvertiert, z. B.
var aa = new Object();
aa.x = "cat";
aa.y = "sunny";
alert(aa.x);  //弹出cat
Nach dem Login kopieren

Hierbei Zeitlich entspricht es b["2.2"] = "XXXXX"
var a = {x:"cat",  y:"sunny"};
alert(a["y"]); //弹出sunny
Nach dem Login kopieren

2.1 Array-Schleife

Dies wird am häufigsten beim Durchlaufen verwendet Im Array wird der Code 1 bis 6 nacheinander angezeigt.

Es gibt auch einen häufig verwendeten Code

var b  = new Array();
b[2.2]  = "XXXXX";
alert(b[2.2]); //-> XXXXX
Nach dem Login kopieren

, der 1 bis 6 nacheinander anzeigt , for...in dient zum Durchlaufen des Objekts (Array ist ein spezielles Objekt). Da das Array keinen Attributnamen hat, wird der Wert direkt für das Objekt ausgegeben. wie zum Beispiel das folgende

var a = [1,2,3,4,5,6];
for(var i =0; i<a.length; i++){
alert(a[i]);
}
Nach dem Login kopieren
Zu diesem Zeitpunkt ruft e den Attributnamen ab, d. h. x, y, x, und um den Wert zu erhalten, den Array-Namen [Attribut] wird verwendet, daher ist a[e] äquivalent zu a[" x"], a["y"], a["z"]

2.2 Allgemeine Array-Funktionen

concat

Hängt ein Array nach dem vorhandenen Array an und gibt ein neues Array zurück, wirkt sich nicht auf das vorhandene Array aus
var a = [1,2,3,4,5,6];
for(var e in a){
alert(e);
}
Nach dem Login kopieren

Es ist zu beachten, dass es nur für Arrays oder Zeichenfolgen verwendet werden kann Wenn das verbundene (das vorherige a) ein numerischer Wert oder ein boolescher Wert ist, wird ein Fehler gemeldet. Wenn die Zeichenfolge mit dem Array verbunden ist, wird die Zeichenfolge mit dem ersten Element des Arrays verbunden Bilden Sie ein neues Element, und das Array wird mit der Zeichenfolge verbunden, um neue Elemente anzuhängen (ich kenne den Grund dafür nicht. Bitte geben Sie ihn an, wenn Sie ihn kennen. Bei Arrays, die Arrays und Objekte enthalten, behalten Sie sie bei). nach dem Beitritt
var a = {x:1,y:2,z:3};
for(var e in a){
alert(e  + ":" + a[e]);
}
Nach dem Login kopieren

join

und bestimmte Trennzeichen verwenden, um die Arrays zu Strings zu verbinden

Das ist leicht zu verstehen, sollte es aber sein Beachten Sie, dass nur eindimensionale Arrays konvertiert werden. Wenn das Array Arrays enthält, wird die durch Join angegebene Zeichenfolgenverbindung nicht verwendet, sondern die Standardeinstellung toString(), z. B.

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
Nach dem Login kopieren

Das Array innerhalb des Arrays ist nutzlos* Verbindung

Pop

Löschen Sie das letzte Element des Arrays und geben Sie das Element zurück

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
Nach dem Login kopieren

Wenn das Array leer ist, geben Sie undefiniert zurück

push
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
Nach dem Login kopieren

Fügen Sie ein Array am Ende des Arrays hinzu und geben Sie die neue Länge des Arrays zurück

< Das Der Unterschied zwischen 🎜>

und concat besteht darin, dass concat das ursprüngliche Array nicht beeinflusst und direkt ein neues Array zurückgibt, während push das ursprüngliche Array direkt ändert und die neue Länge des Arrays zurückgibt

sort

var a =  ["aa","bb","cc"];
document.write(a.pop());  // -> cc
document.write(a);    // -> aa, bb
Nach dem Login kopieren
Array-Sortierung, schauen wir uns zunächst ein Beispiel an

Ist das Ergebnis nicht überraschend? Ja, die Sortierung erfolgt nicht nach ganzzahliger Größe, sondern nach Zeichenfolge Vergleich, d. h. Vergleichen Sie die ANSI-Codes eines Zeichens, wobei der kleinere an erster Stelle steht. Wenn sie gleich sind, nehmen Sie das zweite Zeichen und vergleichen Sie dies auf der Grundlage ganzzahliger Werte

var a =  ["aa","bb","cc"];
document.write(a.push("dd"));  // -> 4
document.write(a);    // -> aa,bb,cc,dd
document.write(a.push([1,2,3])); // -> 5
document.write(a);    // -> aa,bb,cc,dd,1,2,3
Nach dem Login kopieren

sort( )-Methode hat einen optionalen Parameter, der die Funktion im Code darstellt. Nicht-Zahlen können nicht mehr sortiert werden Urteil, daher werde ich hier nicht auf Details eingehen

umgekehrt

Umgekehrte Sortierung von Arrays ist dasselbe wie sort(), wobei der ASCII-Wert des ersten Zeichens zum Vergleich verwendet wird

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

Wenn das Array auch ein Array enthält, wird es als Objekt behandelt. Die Elemente werden nicht aufgelöst

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

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

shift

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

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

当数组为空时,返回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
Nach dem Login kopieren

注意该方法,在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));  // -> 空
Nach dem Login kopieren

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
Nach dem Login kopieren

注意该方法在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); }
Nach dem Login kopieren

布尔值则返回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
}
Nach dem Login kopieren

输出结果

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日
Nach dem Login kopieren

区别在于,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
Nach dem Login kopieren

数组也是对象,所以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
Nach dem Login kopieren

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]]]]); 创建一个数组并赋值
Nach dem Login kopieren

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

2、数组的元素的访问

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

3、数组元素的添加

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

4、数组元素的删除

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

5、数组的截取和合并

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

6、数组的拷贝

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

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

8、数组元素的字符串化

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

更多JavaScript jQuery 中定义数组与操作及jquery数组操作相关文章请关注PHP中文网!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!