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

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

图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>");
}

更新后结果截图：

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

挫折就像一面墙，这面墙迫使我们向自己证明，我们是多么渴望得到这面墙后面的宝藏

赞 (0)

相关推荐

  • JavaScript中数组Array.sort()排序方法详解

    JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编码顺序)对数组中的元素进行排序,如果想按照其他标准进行排序,就需要进行传一个参数且为函数,该函数要比较两个值,并且会返回一个用于说明这两个值的相对顺序的数字. 1.对数字数组进行由小到大的顺序进行排序. 代码: var arr = [22,12,3,43,56,47,4]; arr.sort();

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

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

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

  • JavaScript中的跨浏览器事件操作的基本方法整理

    绑定事件 EU.addHandler = function(element,type,handler){ //DOM2级事件处理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } /

  • javascript Range对象跨浏览器常用操作第1/2页

    开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象 http://www.w3school.com.cn/xmldom/dom_range.asp 在ie中使用TextRange对象 http://www.hbcms.com/main/

  • JavaScript中用sort()方法对数组元素进行排序的操作

    JavaScript数组sort()方法排序数组的元素. 语法 array.sort( compareFunction ); 下面是参数的详细信息: compareFunction : 指定一个函数,定义排序次序.如果省略,数组字典顺序排序. 返回值: 返回一个排序的数组 例子: <html> <head> <title>JavaScript Array sort Method</title> </head> <body> <s

  • myEvent.js javascript跨浏览器事件框架

    event究竟有多么复杂?可见前辈的6年前的努力:最佳的addEvent是怎样诞生的,后起之秀jQuery也付出了一千六百多行血汗代码(v 1.5.1)搞定了6年后出现的各种核的浏览器. 我参考前辈的代码以及自己的理解尝试写了一个事件框架,我的框架完成了一个事件机制的核心,它能提供统一接口实现多事件绑定以及避免内存泄漏等其他一些问题,更重要的是性能还不错. 我的手法: 所有回调函数根据元素.事件类型.回调函数唯一ID缓存在一个_create对象中(其内部具体结构可见下面源码的关于_cache的注

  • 开发跨浏览器的JavaScript方法说明第1/2页

    开发跨浏览器的JavaScript 1. childNodes在ff中和ie的区别. ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的,而ie/op不是这样的. <div id="box1"><span>content</span></div> 在ff下,box1的childNodes为3个,ie下为1个. 2. 设置某个node对象的style class名称. ie中要设置某个nod

  • css与javascript跨浏览器兼容性总结

    本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

  • javascript 跨浏览器的事件系统

    但实质上javascript之父也不能主宰这一切,他支持的网景也没有强大到让竞争对手乖乖地使用它的产品,微软搞了一个JScript,死去的Macromedia 搞了一个ActionScript,还有更多,听说这个分支挺复杂的.但借用浏览器内置的DOM事件模型,第一个后果是,想使用它就必须借助某个DOM对象,window,document或元素节点,第二个后果是由于每个浏览器对DOM的支持不一,不能确保事件模型的一致,第三个是由于基于DOM对象,很容易造成循环引用.微软打赢第一次浏览器战争后,就基

  • javascript 跨浏览器开发经验总结（五） js 事件

    简单事件模型和高级事件模型 简单事件模型和高级事件模型简单事件,就是事件与页面元素直观的绑定在一起的形式,如: 复制代码 代码如下: <div onclick="alert(this.innerHTML);"> element.onclick = function(){alert(this.innerHTML);} 只要不是用了个别浏览器独有的事件,一般的click,mouseover事件等在各浏览器中都可以这么使用. 但是当一个事件需要绑定多个监听,或者需要动态注册/移出

  • JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数.分享给大家供大家参考.具体如下: IE 的事件绑定函数是 attachEvent:而 Firefox, Safari 是 addEventListener:Opera 则两种都支持.使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数. 添加事件绑定 bind() /*********************

随机推荐