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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
JavaScript Array对象使用方法解析
Sep 24 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获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现Decorator模式实例代码
2018/02/09 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
Python常用外部指令执行代码实例
2020/11/05 Python
中文系师范生自荐信
2013/10/01 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
协议书怎么写
2014/04/21 职场文书
运动会入场口号
2014/06/07 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
董事长新年致辞
2015/07/29 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python