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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
自己的js工具 Cookie 封装
Aug 21 Javascript
两个Javascript小tip资料
Nov 23 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
浅谈vue.use()方法从源码到使用
May 12 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.MVC的模板标签系统(三)
2006/09/05 PHP
php xml-rpc远程调用
2008/12/19 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
js确定对象类型方法
2012/03/30 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
python中列表元素连接方法join用法实例
2015/04/07 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python中方法链的使用方法
2016/02/23 Python
Python数据结构之翻转链表
2017/02/25 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
django如何连接已存在数据的数据库
2018/08/14 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
python实现打砖块游戏
2020/02/25 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
违反校纪校规检讨书
2014/02/15 职场文书
《燕子》教学反思
2014/02/18 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
入党转正申请书范文
2019/05/20 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL