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 相关文章推荐
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
详谈js模块化规范
Jul 07 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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 压缩文件夹的类代码
2009/11/05 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python 简单的调用有道翻译
2020/11/25 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
英国计算机商店:Technextday
2019/12/28 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
javascript canvas实现雨滴效果
2021/06/09 Javascript
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技