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 相关文章推荐
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
python 模拟登陆github的示例
2020/12/04 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
GWT都有什么特性
2016/12/02 面试题
生产车间班组长岗位职责
2014/01/06 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers