Maison > interface Web > js tutoriel > Explication détaillée du fonctionnement du tableau json et de chaque exemple de code de traversée sous jquery

Explication détaillée du fonctionnement du tableau json et de chaque exemple de code de traversée sous jquery

伊谢尔伦
Libérer: 2017-07-17 14:37:59
original
1252 Les gens l'ont consulté

Traversal est davantage utilisé lors du traitement des tableaux JSON dans jquery, mais les ajouter et les supprimer ne semble pas être de trop.

1. Création d'un tableau

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

Il convient de noter que bien que la deuxième méthode crée un tableau d'une longueur spécifiée, en fait le tableau est de longueur variable dans tous les cas, et cela c'est-à-dire que même si la longueur est spécifiée à 5, les éléments peuvent toujours être stockés en dehors de la longueur spécifiée. Remarque : la longueur changera en conséquence.
2. Accès aux éléments du tableau

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

3. Ajout d'éléments du tableau

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

4. Suppression des éléments du tableau

< 🎜. >
arrayObj.pop(); //移除最后一个元素并返回该元素值 
arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移 
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
Copier après la connexion
5. Interception et fusion de tableaux

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

arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向 
arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向
Copier après la connexion
7. Tri des éléments du tableau

arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址 
arrayObj.sort(); //对数组元素排序,返回数组地址
Copier après la connexion
8. . Stringification des éléments du tableau

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。 
toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用
Copier après la connexion
Un exemple jQuery simple pour parcourir un objet

Tableau JavaScript.

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);
});
Copier après la connexion
L'extrait de code ci-dessus fonctionne correctement, invitant « pomme », « orange »… etc., comme prévu.

Problème : Chaîne JSON

L'exemple suivant déclare directement une chaîne JSON (entre guillemets simples ou doubles).

var json = &#39;[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]&#39;;
 
$.each(json, function(idx, obj) {
alert(obj.tagName);
});
Copier après la connexion
Dans Chrome, l'erreur suivante s'affiche dans la console :

Uncaught TypeError : impossible d'utiliser l'opérateur 'in' pour rechercher '156'

dans [{" id ":"1","tagName":"apple"}...

Solution : Convertir la chaîne JSON en

objet JavaScript. Pour le corriger, convertissez-le en objet JavaScript via le standard JSON.parse() ou $.parseJSON de jQuery.

{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]&#39;;
 
$.each(JSON.parse(json), function(idx, obj) {
alert(obj.tagName);
}); 
//or
$.each($.parseJSON(json), function(idx, obj) {
alert(obj.tagName);
});
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal