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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
react 创建单例组件的方法
Apr 26 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 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
织梦模板标记简介
2007/03/11 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
详解jQuery事件
2017/01/13 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
解决Django连接db遇到的问题
2019/08/29 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
python实现的Iou与Giou代码
2020/01/18 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
建筑工程技术应届生求职信
2013/11/17 职场文书
小学运动会开幕词
2015/01/28 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
深入理解Vue的数据响应式
2021/05/15 Vue.js
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
Python 全局空间和局部空间
2022/04/06 Python