Internet Explorer 11 javascript 数组排序无效结果

Question

我正在开发 javascript 经销商搜索功能： http://www.example.com/kw_haendlersuche_bug

尝试在“地址”字段中输入“74564”，然后按回车键。结果将按距离对经销商列表进行排序。

在 IE11 上的结果将与在其他浏览器上不同。

dealersearch_de_bug.js的关键部分（第166行）：

var c_sort = function(a, b) {
    return a.dist - b.dist;
};
markers.sort(c_sort);

但是当我对它进行两次排序时 - http://www.example.com/kw_haendlersuche

dealersearch_de.js 第 166 行：

var c_sort = function(a, b) {
    return a.dist - b.dist;
};
markers.sort(c_sort);
markers.sort(c_sort);

结果与其他浏览器的结果不同且接近。

这是怎么回事？

Answer 1

您的 markers 数组中的一个元素具有 dist 属性的 NaN 值。（在您当前的测试用例中是 markers[482]。）这会影响 IE 的 sort() 功能 - 在其他浏览器中也是如此。

如果您在排序前从数组中删除任何此类标记，则它会正确排序。您可以通过创建 var current 并将其推送到 markers 数组的 if( ! isNaN(distance) ) 测试来做到这一点。

我也同意 Curtis 关于修改库的评论 Array.prototype - 这可能很危险，因为两个库可能会相互影响。但这不是这个特定问题的原因 - 如果您在没有库的普通测试页中对 markers 数组进行排序，则会发生相同的错误。这是一个简单的例子：

<!doctype html>
<html>
<head>
    <title>Sort Test</title>
</head>
<body>
    <script>
        function log( array, text ) {
            document.write(
                '[ ' + array.join(', ') + ' ] ' + text + '<br>'
            );
        }

        var array = [ 3, 9, NaN, 5, 4 ];
        log( array, 'original' );
        array.sort( function( a, b ) { return a - b; } );
        log( array, 'sorted' );
    </script>
</body>
</html>

当我在 IE11 中加载此页面时，它显示：

[ 3, 9, NaN, 5, 4 ] original
[ 3, 4, 9, NaN, 5 ] sorted

它也无法在 Chrome 中正确排序：

[ 3, 9, NaN, 5, 4 ] original
[ 3, 9, NaN, 4, 5 ] sorted

和 Firefox：

[ 3, 9, NaN, 5, 4 ] original
[ 4, 5, NaN, 3, 9 ] sorted

我怀疑您的页面在其他浏览器中也没有正确排序，而只是 "close enough" - 除非出于某种原因 NaN 值没有出现在这些浏览器中。

为什么 NaN 值会把排序搞得这么糟？那么，排序取决于能够比较数组的任意两个值并获得一致的结果：小于、大于或等于。

但是 NaN 不像普通号码那样工作。您可以将任何值与 NaN 进行比较，结果始终是 false，无论比较的是什么 - 即使您与相同的 [=16= 进行比较] 价值：

console.log( NaN == NaN );  // false!

类似地，如果您在表达式中添加或减去 NaN，结果总是会得到 NaN。所有这些都会对排序函数造成严重破坏，无论它使用比较还是减法。

Internet Explorer 11 javascript 数组排序无效结果

Internet explorer 11 javascript array sort invalid results

javascript

arrays

sorting

internet-explorer-11