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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
JavaScript修改css样式style
Apr 15 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
Javascript 构造函数详解
Oct 22 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
Preload基础使用方法详解
Feb 03 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 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
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
vue中的ref和$refs的使用
2018/11/22 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
详解python3中的真值测试
2018/08/13 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
通过实例解析python and和or使用方法
2020/11/14 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
UNIX特点都有哪些
2016/04/05 面试题
个人安全承诺书
2014/05/22 职场文书
诚信承诺书模板
2014/05/26 职场文书
社区党员公开承诺书
2014/08/30 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2015年暑假工作总结
2015/07/13 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
python运算符之与用户交互
2022/04/13 Python