javascript Array.sort() 跨浏览器下需要考虑的问题


Posted in Javascript onDecember 07, 2009

然而在做跨浏览器的测试时在chrome浏览器下发现了一个问题,测试人员发现(见图1),在chrome下依据某列排序时,如果两行的排序数值相同,chrome不是按通常情况保持这两列的顺序不变,而是将他们顺序调换。在google一下问题之后,我们发现原来是当初ECMAscript规范中并未规定具体的sort算法,所以导致各个浏览器都有自己的sort算法,然而由于有些厂商是基于不稳定的排序算法实现的,如chrome和Mozilla/Firefox 3.0以前的排序算法都是不稳定的,不过IE是稳定的排序算法。这种算法实现的差异也导致了图表在不同浏览器下显示的结果不一致。

 javascript Array.sort() 跨浏览器下需要考虑的问题javascript Array.sort() 跨浏览器下需要考虑的问题

                    图1:数组左边的数字表示它初始化时候的顺序

思考了一下,我和组里另外一个成员分别给出了自己的解决方法,他的意见是通过自己实现具体的sort算法来统一控制,鉴于网上的现成的排序算法很多并且排序算法是程序员的基础,这种方式实现起来并不复杂,唯一的工作就是代码的实现。不过我认为其实有更简单的方法,因为我们的数据是基于XSLT从xml中解析出来的,而XSLT是知道每行数据的的序号的(当然如果是由服务器端代码从数据库或webservice读取一样很容易取该值),所以我认为可以在XSLT中给每列添加一个Index属性,e.g.第一行Index=1,第二行Index=2...这样在sort比较大小的时候如果发现两个数值相同,则比较其行号,这样最终只需要在在比较函数中添加两行代码即可实现。下面是实现代码和结果截图:

var array = [ 
{Index:1,val:25}, 
{Index:2,val:25}, 
{Index:3,val:45}, 
{Index:4,val:78}]; 
array.sort(function(a, b) { 
if (a.val === b.val) { 
//此处两值相同,则根据其行号(初始化时的索引值)进行比较。 
return a.Index - b.Index; 
} 
return a.val - b.val; 
}) 
for (var i = 0; i < array.length; i++) { 
document.write("<p>" + array[i].Index + ":" + array[i].val + "</p>"); 
}

更新后结果截图:

javascript Array.sort() 跨浏览器下需要考虑的问题javascript Array.sort() 跨浏览器下需要考虑的问题

当然这只是解决方法之一,我的目的只是尽量减少我们需要维护的代码量,这样可以尽量减少bug。一个思路,希望对你有所帮助。

挫折就像一面墙,这面墙迫使我们向自己证明,我们是多么渴望得到这面墙后面的宝藏
Javascript 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 #Javascript
js event事件的传递与冒泡处理
Dec 06 #Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 #Javascript
js 操作select相关方法函数
Dec 06 #Javascript
JavaScript 对象模型 执行模型
Dec 06 #Javascript
ASP Json Parser修正版
Dec 06 #Javascript
jquery ready函数源代码研究
Dec 06 #Javascript
You might like
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
jQuery 入门讲解1
2009/04/15 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
python简单实现旋转图片的方法
2015/05/30 Python
详解python之配置日志的几种方式
2017/05/22 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python DataFrame 取差集实例
2019/01/30 Python
flask 实现token机制的示例代码
2019/11/07 Python
python实现ftp文件传输功能
2020/03/20 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
python代码实现猜拳小游戏
2020/11/30 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
运动会跳远广播稿
2014/02/04 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
民事调解协议书
2016/03/21 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
深入理解redis中multi与pipeline
2021/06/02 Redis
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js