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