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 相关文章推荐
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
JS修改css样式style浅谈
May 06 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
vue实现分页的三种效果
Jun 23 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jQuery的基本概念与高级编程
2015/05/14 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
甜点店创业计划书
2014/01/27 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
教师求职自荐信
2014/03/09 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
JavaScript实现班级抽签小程序
2021/05/19 Javascript
七个非常实用的Python工具包总结
2021/06/15 Python
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers