jquery對Json的各種遍歷方法總結(jié)(必看篇)
更新時間：2016年09月29日 10:46:42 投稿：jingxian
下面就為大家?guī)硪黄猨query對Json的各種遍歷方法總結(jié)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
概述
JSON(javascript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，采用完全獨立于語言的文本格式，是理想的數(shù)據(jù)交換格式。同時，JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的 API 或工具包。
在JSON中，有兩種結(jié)構(gòu)：對象和數(shù)組。
1.對象
一個對象以“{”開始，“}”結(jié)束。每個“key”后跟一“:”，“‘key/value' 對”之間運用 “,”分隔。
packJson = {"name":"caibaojian.com", "password":"111"}
2.數(shù)組
packJson = [{"name":"caibaojian.com", "password":"111"}, {"name":"tony", "password":"111"}];
數(shù)組是值的有序集合。一個數(shù)組以“[”開始，“]”結(jié)束。值之間運用 “,”分隔。
JSON對象和JSON字符串的轉(zhuǎn)換
在數(shù)據(jù)傳輸流程中，json是以文本，即字符串的形式傳遞的，而JS操作的是JSON對象，所以，JSON對象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵。例如：
JSON字符串：
var jsonStr = '{"name":"caibaojian", "password":"1111"}';
JSON對象：
var jsonObj = {"name":"caibaojian.com", "password":"1111"};
1、String轉(zhuǎn)換為Json對象
var jsonObj = eval('(' + jsonStr + ')');
2.Json對象轉(zhuǎn)換為String字符串
var jsonStr = jsonObj.toJSONString();
jQuery遍歷json對象
grep
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var array = [1,2,3,4,5,6,7,8,9];
var filterarray = $.grep(array,function(value){
return value > 5;//篩選出大于5的
});
for(var i=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for (key in filterarray){
alert(filterarray[key]);
}
}
);
</script>
each
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anObject = {one:1,two:2,three:3};//對json數(shù)組each
$.each(anObject,function(name,value) {
alert(name);
alert(value);
});
var anArray = ['one','two','three'];
$.each(anArray,function(n,value){
alert(n);
alert(value);
}
);
}
);
</script>
inArray
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anArray = ['one','two','three'];
var index = $.inArray('two',anArray);
alert(index);//返回該值在數(shù)組中的鍵值，返回1
alert(anArray[index]);//value is two
}
);
</script>
map
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var strings = ['0','1','2','3','4','S','6'];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null:result;//isNaN:is Not a Number的縮寫
}
);
for (key in values) {
alert(values[key]);
}
}
);
</script>
原生js遍歷json對象
遍歷json對象：
無規(guī)律：
<script>
var json = [{dd:'SB',AA:'東東',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
for(var key in json[i]){
alert(key+':'+json[i][key]);
}
}
</script>
有規(guī)律：
packJson = [
{"name":"nikita", "password":"1111"},
{"name":"tony", "password":"2222"}
];
for(var p in packJson){//遍歷json數(shù)組時，這么寫p為索引，0,1
alert(packJson[p].name + " " + packJson[p].password);
}
也可以用這個：
for(var i = 0; i < packJson.length; i++){
alert(packJson[i].name + " " + packJson[i].password);
}
遍歷json對象
myJson = {"name":"caibaojian", "password":"1111"};
for(var p in myJson){//遍歷json對象的每個key/value對,p為key
alert(p + " " + myJson[p]);
}
有如下 json對象：
var obj ={"name":"馮娟","password":"123456","department":"技術(shù)部","sex":"女","old":30};
遍歷方法：
for(var p in obj){
str = str+obj[p]+',';
return str;
}
以上就是小編為大家?guī)淼膉query對Json的各種遍歷方法總結(jié)(必看篇)的全部內(nèi)容了，希望對大家有所幫助，多多支持腳本之家~
相關(guān)文章
這個選項卡不是一個單獨的選項卡，而是多個選項卡，每個選項卡里面有多個選項，而且選項的個數(shù)也不一樣。廢話不多說，直接上jquery代碼。2013-03-03
B/S開發(fā)的朋友，首頁常常需要一些新聞圖片切換的特效，鑒于jQuery良好的插件開發(fā)機(jī)制，我也常常自己寫一些實用的小插件，這里分享一個新聞圖片切換插件2011-10-10
JQuery 拾色器插件發(fā)布-jquery.icolor.js
web項目中不少地方需要用到顏色選擇器，比如設(shè)置某個元素的背景色、邊框色等等，按照我們交互設(shè)計的期望-設(shè)色器最好簡單易用，僅顯示常用的那些色塊給用戶選擇，另外提供一個輸入框方便用戶輸入自定義的色值。2010-10-10
這篇文章主要介紹了jQuery里prev()的簡單操作代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
進(jìn)度條和Loading加載動畫在當(dāng)今的網(wǎng)頁功能中顯得越來越重要了，于是接下來為大家推薦幾款比較新穎進(jìn)度條插件,感興趣的你可以參考下希望可以幫助到你2013-03-03
Bootstrap插件非常的好用了，今天小編通過本教程給大家介紹Bootstrap中點擊按鈕后變灰并顯示加載中實例代碼，非常不錯，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了jQuery的text()方法用法,以實例形式詳細(xì)分析了jQuery的text()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jquery實現(xiàn)選項卡切換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
jQuery中Ajax全局事件引用方式及各個事件(全局/局部)執(zhí)行順序
這篇文章主要介紹了jQuery中Ajax全局事件引用方式及各個事件(全局/局部)執(zhí)行順序的相關(guān)資料，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
這篇文章主要介紹了jQuery中prependTo()方法用法,實例分析了prependTo()方法的功能、定義及匹配的元素插入指定元素之前的使用技巧,需要的朋友可以參考下2015-01-01