前面写了好几个安卓系统下一些手机中的兼容性问题。这次我们来一个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，就是一个个意料之外。
时间： 2024-09-17 04:14:55