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 相关文章推荐
密码强度检测效果实现原理与代码
Jan 04 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
如何制作自己的原生JavaScript路由
May 05 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下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python 自由定制表格的实现示例
2020/03/20 Python
scrapy头部修改的方法详解
2020/12/06 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
班级口号大全
2014/06/09 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
感谢信格式范文
2015/01/22 职场文书
观后感开头
2015/06/19 职场文书
入团申请书格式
2019/06/20 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python