首頁 > web前端 > js教程 > jquery下json數組的操作和each遍歷實例程式碼詳解

jquery下json數組的操作和each遍歷實例程式碼詳解

伊谢尔伦
發布: 2017-07-17 14:37:59
原創
1259 人瀏覽過

jquery中處理JSON數組的情況中遍歷用到的比較多,但是用添加移除這些好像不是太多。

1、陣列的建立 

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

要說明的是,雖然第二種方法建立陣列指定了長度,但實際上所有情況下陣列都是變長的,也就是說即使指定了長度為5,仍然可以將元素儲存在規定長度以外的,注意:這時長度會隨之改變。
2、陣列的元素的存取 

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

3、陣列元素的新增 

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

4、陣列元素的刪除 

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

5 、陣列的截取與合併 

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

6、陣列的拷貝 

arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向 
arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向
登入後複製

7、陣列元素的排序 

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

8、陣列元素的字串化 

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

一個簡單的jQuery的例子來遍歷一個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);
});
登入後複製

上面的程式碼片段運作正常,提示 “apple”, “orange” … 等,如預期般。
問題: JSON 字串

在下面的範例中,宣告了一個JSON字串(隨附單或雙引號)直接地。

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);
});
登入後複製

在Chrome中,它顯示在控制台下面的錯誤:

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

解決方案:JSON字串轉換為JavaScript物件
要修復它,透過標準JSON.parse()或jQuery 的 $.parseJSON 將其轉換為JavaScript物件。

{"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);
});
登入後複製


#

以上是jquery下json數組的操作和each遍歷實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板