前端常见兼容问题系列4:sort方法在浏览器中执行效果的差异

    xiaoxiao2026-05-11  6

    前面写了好几个安卓系统下一些手机中的兼容性问题。这次我们来一个iOS系统下的。

    有这么一个HTML片段:

    <body> <p id="container"></p> <div> <script> var str = '' var arr = [ {name: "3", value: "50"}, {name: "2", value: "60"}, {name: "1", value: "70"}, { name: "4",value: "40"}, {name: "5", value: "30"} ]; arr.sort(function (a, b) { return +b.value > +a.value; }); arr.forEach(function (item) { str += item.name + ': ' + item.value + '<br/>'; }) document.querySelector('#container').innerHTML = str; </script> </div> </body>

    我们期望通过它来将数组以每一项value值做倒序排列。在Chrome浏览器中,如你所愿,输出了如图1所示的结果:

    (图1)

    但是,在Safari这个还算比较让人放心的浏览器中,展示的结果则如图2所示——顺序完全出乎意料:

    (图2)

    看起来它好像什么事情也没做,只是把数组原样输出了。这是为什么呢?

    Google一下,原来是因为sort后面跟着的排序函数,需要返回正数、负数或者0才是标准的影响排序的函数。而如上例所示的采用返回布尔值的函数作为排序函数是一种误用。

    所以,正确的方法应该是:

    arr.sort(function (a, b) { return +b.value > +a.value ? 1: +b.value < +a.value ? -1 : 0; });

    经过修正,我们上面的例子无论在Chrome还是Safari中都可以获得正确的排序结果了(如图3)。

    顺便提一下,在这个比较中,如果忘记对于比较的内容做类型转换,也是很容易出现问题的。

    (图3)

    从这个问题得出的教训是:

    1、Safari浏览器中的兼容性其实也不可以掉以轻心

    2、一个基本知识点的理解错误,可能会造成非常严重的bug(比如这里的排序,往往是非常关键的功能),所以基础非常重要。

    3、多测试总能发现意想不到的问题。某种程度上讲,所谓bug,就是一个个意料之外。

    最新回复(0)