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 相关文章推荐
JS Date函数整理方便使用
Oct 23 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
微信小程序实现轮播图指示器
Jun 25 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中使用Oracle数据库(5)
2006/10/09 PHP
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
PHP实时显示输出
2008/10/02 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
js date 格式化
2017/02/15 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
pandas分批读取大数据集教程
2020/06/06 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
自我鉴定怎么写
2014/01/12 职场文书
葬礼司仪主持词
2014/03/31 职场文书
元旦晚会活动总结
2014/07/09 职场文书
公司周年庆活动方案
2014/08/25 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书