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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
jQuery实现本地存储
Dec 22 jQuery
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采集相关教程之一 CURL函数库
2010/02/15 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
PHP CURL使用详解
2019/03/21 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python中reduce()函数的使用方法示例
2017/09/29 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技