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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
js实现时钟定时器
Mar 26 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
easyui validatebox验证
2016/04/29 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
Node.js的特点详解
2017/02/03 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python算法学习之基数排序实例
2013/12/18 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
python 对xml解析的示例
2021/02/27 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
员工薪酬福利制度
2014/01/17 职场文书
应届生自荐信
2014/06/30 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
2015小学师德工作总结
2015/07/21 职场文书
感恩的心主题班会
2015/08/12 职场文书
详解Redis瘦身指南
2021/05/26 Redis
MongoDB支持的数据类型
2022/04/11 MongoDB