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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
大学军训感言
2014/01/10 职场文书
高二物理教学反思
2014/02/08 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
教师节标语大全
2014/10/07 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python