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 相关文章推荐
Jquery Ajax请求代码(2)
Jan 07 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
javascript中的隐式调用
Feb 10 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 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
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python常用模块介绍
2014/11/21 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
浅谈python对象数据的读写权限
2016/09/12 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python随机数函数代码实例解析
2020/02/09 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
J2EE面试题
2016/03/14 面试题
药剂专业个人求职信范文
2014/04/29 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL