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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
数组Array的排序sort方法
Feb 17 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
原生JS实现记忆翻牌游戏
Jul 31 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输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
浅谈php冒泡排序
2014/12/30 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
vue添加class样式实例讲解
2019/02/12 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python多线程获取返回值代码实例
2020/02/17 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
邓小平理论心得体会
2014/09/09 职场文书
明确岗位职责
2015/02/14 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
PHP RabbitMQ消息列队
2022/05/11 PHP
Linux安装Docker详细教程
2022/07/07 Servers