Home >Web Front-end >JS Tutorial >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]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。
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!