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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
vue中echarts引入中国地图的案例
Jul 28 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
javascript闭包入门示例
2014/04/30 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
自荐信格式
2013/12/01 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
优秀党支部申报材料
2014/12/24 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL
JS实现九宫格拼图游戏
2022/06/28 Javascript