Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der JSON-Array-Operation und jedes Traversal-Beispielcodes unter JQuery

Detaillierte Erläuterung der JSON-Array-Operation und jedes Traversal-Beispielcodes unter JQuery

伊谢尔伦
Freigeben: 2017-07-17 14:37:59
Original
1258 Leute haben es durchsucht

Traversal wird häufiger verwendet, wenn JSON-Arrays in jquery verarbeitet werden, aber das Hinzufügen und Entfernen derselben scheint nicht allzu viel zu sein.

1. Erstellung eines Arrays

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

Es ist zu beachten, dass die zweite Methode zwar ein Array mit einer angegebenen Länge erstellt, das Array jedoch in allen Fällen eine variable Länge hat Das heißt, auch wenn die Länge mit 5 angegeben ist, können Elemente außerhalb der angegebenen Länge gespeichert werden. Hinweis: Die Länge ändert sich entsprechend.
2. Zugriff auf Array-Elemente

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

3. Hinzufügen von Array-Elementen

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

4. Löschen von Array-Elementen

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

5. Abfangen und Zusammenführen von Arrays

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

6. Kopieren von Arrays

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

8 . Stringifizierung von Array-Elementen

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

Ein einfaches jQuery-Beispiel zum Durchlaufen eines

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

Das obige Code-Snippet funktioniert einwandfrei und fordert wie erwartet „Apfel“, „Orange“ usw. auf.

Problem: JSON-Zeichenfolge
var json = [
{"id":"1","tagName":"apple"},
{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},
{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}
];
 
$.each(json, function(idx, obj) {
alert(obj.tagName);
});
Nach dem Login kopieren

Das folgende Beispiel deklariert direkt eine JSON-Zeichenfolge (in einfache oder doppelte Anführungszeichen eingeschlossen).

In Chrome wird in der Konsole der folgende Fehler angezeigt:

var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
 
$.each(json, function(idx, obj) {
alert(obj.tagName);
});
Nach dem Login kopieren
Uncaught TypeError: Cannot use 'in' Operator to search for '156'

in [{" id ::1,tagName:Apple}...

Lösung: JSON-Zeichenfolge in
JavaScript-Objekt

konvertieren.

Um das Problem zu beheben, konvertieren Sie es über Standard-JSON.parse() oder $.parseJSON von jQuery in ein JavaScript-Objekt.

{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
 
$.each(JSON.parse(json), function(idx, obj) {
alert(obj.tagName);
}); 
//or
$.each($.parseJSON(json), function(idx, obj) {
alert(obj.tagName);
});
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JSON-Array-Operation und jedes Traversal-Beispielcodes unter JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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