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 ajax属性async(同步异步)示例
Nov 05 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
javascript 封装Date日期类实例详解
2017/05/28 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python super的使用方法及实例详解
2019/09/25 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
乌克兰在线药房:Аптека24
2019/10/30 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
会员活动策划方案
2014/08/19 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Python Matplotlib库实现画局部图
2021/11/17 Python