JavaScript遍历Json串浏览器输出的结果不统一问题


Posted in Javascript onNovember 03, 2016

没有介绍正文之前先给大家说下json是什么。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一是JSON实际上就是JavaScript。它基于ECMAScript第3版中JavaScript对象字面量语法子集的一种文本格式。这表示可以使用responseText从服务器中检索JSON数据,然后再使用JavaScript的eval()方法将JSON字符串转换成JavaScript对象,那么,使用附加JavaScript就可以很地从该对象中提取数据,而不需要处理DOM。

我们在做项目的时候经常会用到javascript的json。

首先说一下javascript的json串是什么,json串属于javascript的一个对象,有键和值对应的对象。

一般的格式是:

a = { 
a1 : 1,
a2 : 'abc',
a3 : 'abc',
a4 : [1,2,3],
a5 : function(){console.log(12)}
};

我们读取这个json 的方法是通过for in 循环来遍历;

使用json串的好处是可以事先把数据库中的数据一次性的读取出来存成json的形式,然后通过javascript来读取里边的属于,这样可以大大减少对服务器的请求次数,增加了前台页面的加载效率 。

我们在遍历json的时候会遇到许多问题,我今天遇到的问题是在我们把json串的键值写成数字的情况下,在主流浏览器遍历的时候不会按照我们输出的json的结构先后输出,而是按照数字的从小到大顺序输出。但是ie8以下浏览器会按照我们输出的顺序输出。

例如:

a = { 
'1' : 1,
'5' : function(){console.log(12)},
'2' : 'abc',
'4' : [1,2,3],
'3' : {'5' : 'abc', '6' : 'bcd'},
};

通过for in循环

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"};

解决这样的问题有两种:

第一:就是把数字的键值改成字符串形式的包括字母或者下划线;

第二 :就是解决ie的兼容性,通过先遍历json然后把键值存入一个数组中,然后再通过数组排序来循环数组取json中的数据。

具体代码:

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]]);
}

浏览器读取的数据就会保持一致了,有个缺点就是这个也不会按照我们输出的json格式输出,只是解决了浏览器的兼容问题。

以上所述是小编给大家介绍的JavaScript遍历Json串浏览器输出的结果不统一问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
three.js 入门案例详解
Jan 23 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 #Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 #Javascript
jQuery下拉菜单的实现代码
Nov 03 #Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 #Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 #Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 #Javascript
vue自定义指令实现v-tap插件
Nov 03 #Javascript
You might like
怎样去阅读一份php源代码
2009/08/21 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
python实现对csv文件的列的内容读取
2018/07/04 Python
把pandas转换int型为str型的方法
2019/01/29 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
解析Python3中的Import
2019/10/13 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
竞选生活委员演讲稿
2014/04/28 职场文书
基层党支部整改方案
2014/10/25 职场文书
2014年信访工作总结
2014/11/17 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书