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 $(document).ready() 与window.onload的区别
Dec 28 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
简单实现js上传文件功能
Aug 21 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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 高级课程笔记 面向对象
2009/06/21 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
jQuery validata插件实现方法
2017/06/25 jQuery
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Django中的forms组件实例详解
2018/11/08 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
庆元旦迎新年广播稿
2014/02/18 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python