JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題
沒有介紹正文之前先給大家說下json是什么。
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式,我們稱之為JavaScript對(duì)象表示法。使用JSON進(jìn)行數(shù)據(jù)傳輸?shù)膬?yōu)勢(shì)之一是JSON實(shí)際上就是JavaScript。它基于ECMAScript第3版中JavaScript對(duì)象字面量語法子集的一種文本格式。這表示可以使用responseText從服務(wù)器中檢索JSON數(shù)據(jù),然后再使用JavaScript的eval()方法將JSON字符串轉(zhuǎn)換成JavaScript對(duì)象,那么,使用附加JavaScript就可以很地從該對(duì)象中提取數(shù)據(jù),而不需要處理DOM。
我們?cè)谧鲰?xiàng)目的時(shí)候經(jīng)常會(huì)用到j(luò)avascript的json。
首先說一下javascript的json串是什么,json串屬于javascript的一個(gè)對(duì)象,有鍵和值對(duì)應(yīng)的對(duì)象。
一般的格式是:
a = {
a1 : 1,
a2 : 'abc',
a3 : 'abc',
a4 : [1,2,3],
a5 : function(){console.log(12)}
};
我們讀取這個(gè)json 的方法是通過for in 循環(huán)來遍歷;
使用json串的好處是可以事先把數(shù)據(jù)庫中的數(shù)據(jù)一次性的讀取出來存成json的形式,然后通過javascript來讀取里邊的屬于,這樣可以大大減少對(duì)服務(wù)器的請(qǐng)求次數(shù),增加了前臺(tái)頁面的加載效率 。
我們?cè)诒闅vjson的時(shí)候會(huì)遇到許多問題,我今天遇到的問題是在我們把json串的鍵值寫成數(shù)字的情況下,在主流瀏覽器遍歷的時(shí)候不會(huì)按照我們輸出的json的結(jié)構(gòu)先后輸出,而是按照數(shù)字的從小到大順序輸出。但是ie8以下瀏覽器會(huì)按照我們輸出的順序輸出。
例如:
a = {
'1' : 1,
'5' : function(){console.log(12)},
'2' : 'abc',
'4' : [1,2,3],
'3' : {'5' : 'abc', '6' : 'bcd'},
};
通過for in循環(huán)
for(var i in a){
console.log(a[i]);
}
chrome,firefox等瀏覽器輸出:1,abc,Object { 5="abc", 6="bcd"},[1, 2, 3],function();
ie8以及以下瀏覽器:1,function(),abc,[1, 2, 3],Object { 5="abc", 6="bcd"};
解決這樣的問題有兩種:
第一:就是把數(shù)字的鍵值改成字符串形式的包括字母或者下劃線;
第二 :就是解決ie的兼容性,通過先遍歷json然后把鍵值存入一個(gè)數(shù)組中,然后再通過數(shù)組排序來循環(huán)數(shù)組取json中的數(shù)據(jù)。
具體代碼:
var arr = [],sortNumber = function (a,b){
return a - b;
};
for(var i in a){
arr[arr.length] = a[i];
arr.sort(sortNumber);
for(var x = 0; x < arr.length; x++) {
console.log(a[arr[x]]);
}
瀏覽器讀取的數(shù)據(jù)就會(huì)保持一致了,有個(gè)缺點(diǎn)就是這個(gè)也不會(huì)按照我們輸出的json格式輸出,只是解決了瀏覽器的兼容問題。
以上所述是小編給大家介紹的JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript中擴(kuò)展Array contains方法實(shí)例
這篇文章主要介紹了JavaScript中擴(kuò)展Array contains方法實(shí)例,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03
layui自定義插件citySelect實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了layui自定義插件citySelect實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)選擇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
基于js disabled="false"不起作用的解決辦法
本篇文章是對(duì)js disabled="false"不起作用的解決辦法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06
javascript 限制輸入和粘貼(IE和火狐3.x下測(cè)試通過)
限制輸入和粘貼的js代碼2008-11-11

