JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題
沒有介紹正文之前先給大家說下json是什么。
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式,我們稱之為JavaScript對象表示法。使用JSON進(jìn)行數(shù)據(jù)傳輸?shù)膬?yōu)勢之一是JSON實(shí)際上就是JavaScript。它基于ECMAScript第3版中JavaScript對象字面量語法子集的一種文本格式。這表示可以使用responseText從服務(wù)器中檢索JSON數(shù)據(jù),然后再使用JavaScript的eval()方法將JSON字符串轉(zhuǎn)換成JavaScript對象,那么,使用附加JavaScript就可以很地從該對象中提取數(shù)據(jù),而不需要處理DOM。
我們在做項(xiàng)目的時候經(jīng)常會用到j(luò)avascript的json。
首先說一下javascript的json串是什么,json串屬于javascript的一個對象,有鍵和值對應(yīng)的對象。
一般的格式是:
a = { a1 : 1, a2 : 'abc', a3 : 'abc', a4 : [1,2,3], a5 : function(){console.log(12)} };
我們讀取這個json 的方法是通過for in 循環(huán)來遍歷;
使用json串的好處是可以事先把數(shù)據(jù)庫中的數(shù)據(jù)一次性的讀取出來存成json的形式,然后通過javascript來讀取里邊的屬于,這樣可以大大減少對服務(wù)器的請求次數(shù),增加了前臺頁面的加載效率 。
我們在遍歷json的時候會遇到許多問題,我今天遇到的問題是在我們把json串的鍵值寫成數(shù)字的情況下,在主流瀏覽器遍歷的時候不會按照我們輸出的json的結(jié)構(gòu)先后輸出,而是按照數(shù)字的從小到大順序輸出。但是ie8以下瀏覽器會按照我們輸出的順序輸出。
例如:
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然后把鍵值存入一個數(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ù)就會保持一致了,有個缺點(diǎn)就是這個也不會按照我們輸出的json格式輸出,只是解決了瀏覽器的兼容問題。
以上所述是小編給大家介紹的JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動畫效果封裝與使用示例
這篇文章主要介紹了JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動畫效果封裝與使用,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)圖片元素旋轉(zhuǎn)的相關(guān)功能代碼的封裝與使用操作技巧,需要的朋友可以參考下2018-07-07淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11詳細(xì)總結(jié)Javascript中的焦點(diǎn)管理
相信大家都知道焦點(diǎn)作為javascript中的一個重要功能,基本上和頁面交互都離不開焦點(diǎn)。但卻少有人對焦點(diǎn)管理系統(tǒng)地做總結(jié)歸納。本文就javascript中的焦點(diǎn)管理作詳細(xì)介紹,有需要的朋友們可以參考借鑒。2016-09-09[JS]實(shí)現(xiàn)動態(tài)增加框架!未完成
[JS]實(shí)現(xiàn)動態(tài)增加框架!未完成...2007-03-03JavaScript實(shí)現(xiàn)點(diǎn)擊自動選擇TextArea文本的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊自動選擇TextArea文本的方法,涉及javascript中focus()、select()方法的使用技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-07-07JavaScript組合設(shè)計(jì)模式--改進(jìn)引入案例分析
這篇文章主要介紹了JavaScript組合設(shè)模式改進(jìn)引入案例,結(jié)合實(shí)例形式分析了JavaScript組合設(shè)計(jì)模式特性改進(jìn)的引入示例相關(guān)操作技巧,需要的朋友可以參考下2020-05-05JavaScript中訪問節(jié)點(diǎn)對象的方法有哪些如何使用
js訪問節(jié)點(diǎn)對象的方法有很多,比如getElementById在本文將舉例為大家介紹下2013-09-09基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果,代碼簡單易懂,需要的小伙伴參考下吧2015-11-11