Detailed explanation of json array operation and each traversal example code under jquery

Traversal is used more when processing JSON arrays in jquery, but adding and removing them does not seem to be too much.

1. Creation of array

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

It should be noted that although the second method creates an array with a specified length, in fact the array is variable length in all cases, that is to say Even if a length of 5 is specified, elements can still be stored outside the specified length. Note: the length will change accordingly.
2. Access to array elements

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

3. Addition of array elements

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

4. Deletion of array elements

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

5 , interception and merging of arrays

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

6, copying of arrays

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

7, sorting of array elements

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

8, stringification of array elements

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

A simple jQuery example to iterate over a JavaScript array object.

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);
});

The above code snippet works fine, prompting "apple", "orange"... etc., as expected.
Issue: JSON String

The following example declares a JSON string (enclosed in single or double quotes) directly.

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);
});

In Chrome, it shows the following error in the console:

Uncaught TypeError: Cannot use 'in' operator to search for '156'
in [{"id" :"1","tagName":"apple"}...

Solution: Convert JSON string to JavaScript object.
To fix it, convert it to a JavaScript object via standard JSON.parse() or jQuery's $.parseJSON.

{"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);
});

The above is the detailed content of Detailed explanation of json array operation and each traversal example code under jquery. For more information, please follow other related articles on the PHP Chinese website!