具有空值的 localeCompare 数组答案

【问题标题】：localeCompare array with null values具有空值的 localeCompare 数组
【发布时间】：2015-10-05 10:51:09
【问题描述】：

当我对数组进行排序时，控制台中出现以下错误：

Uncaught TypeError: Cannot read property 'localeCompare' of null

到目前为止我已经尝试过：

HTML：

<table class="table table table-striped table-bordered table-hover" id="userLastSyncTable">
<thead>
    <tr>
        <th class="sortable sortDevicePlatform orderDevicePlatformByASC">Device Platform</th>
    </tr>
</thead>
<tbody></tbody>

JavaScript/JQuery：

var TestArray = ["iOS 7", null, "iOS 8.4", null, null, null, "iOS 9"];

ShowUserSyncTable();

function ShowUserSyncTable() {
    var tableRecord = '';

    // Loop through all the returned records and add them to select box
    for (var i = 0; i < TestArray.length; i++) {
        tableRecord += "<tr id=" + "" + "><td>" + TestArray[i] + "</td></tr>";

    }

    $('#userLastSyncTable').find('tbody').html(tableRecord);
}

$(".sortDevicePlatform").click(function () {

    var clickedDevicePlatformSorting = $(this).hasClass('orderDevicePlatformByASC') ? 'orderDevicePlatformByDESC' : 'orderDevicePlatformByASC';

                $('.sortDevicePlatform').removeClass('orderDevicePlatformByASC').removeClass('orderDevicePlatformByDESC');
            $('.sortDevicePlatform').addClass(clickedDevicePlatformSorting);
    // Sort the sync list based on device platform
    TestArray.sort(function (a, b) {

        if (!a) {
            // Change this values if you want to put `null` values at the end of the array
            return -1;
        }
        if (!b) {
            // Change this values if you want to put `null` values at the end of the array
            return +1;
        }

        if (clickedDevicePlatformSorting == 'orderDevicePlatformByASC' && a) return a && b ? a.localeCompare(b) : -1;
        else if (b) return a && b ? b.localeCompare(a) : 1;
    });

    ShowUserSyncTable();
});

如何使用空值对数组进行排序？

更新 Fiddle 进行测试：

FIDDLE

预期结果：

一键播放：

iOS 7、iOS 8.4、iOS 9、空、空、空、空

再次点击展示：

iOS 9、iOS 8.4、iOS 7、空、空、空、空

【问题讨论】：

你希望你的null 值去哪里？上榜还是下榜？
为什么你甚至想要空值？要删除它们吗？
@Chris Beckett。排序后的输出期望是什么。
@SheraliTurdiyev 检查我新更新的小提琴，它给你更多的想法

标签： javascript jquery arrays

【解决方案1】：

试试这个：Demo。

从可点击的<th ...> 中删除orderDevicePlatformByASC 类名。因为，它的初始外观没有排序。使用它进行排序。

TestArray.sort(function (a, b) {
     if (clickedDevicePlatformSorting == 'orderDevicePlatformByASC' && a)            
        return  b ? a.localeCompare(b) : -1;
     else if (b) 
        return a ? b.localeCompare(a) : 1;
});

【讨论】：

是的，这就是我想要的 :)，用那个新的 JSFiddle 更新你的答案
请检查我的回答。删除 orderDevicePlatformByASC 首次出现

【解决方案2】：

您不能在null 上调用函数。您的数组中有一些 null 值。因此，当您尝试 sort 这些值时，它会崩溃。

您可以保护您的代码以避免这种情况。

TestArray.sort(function(a, b) {
    if (!a) {
       // Change this values if you want to put `null` values at the end of the array
       return -1;
    }

    if (!b) {
       // Change this values if you want to put `null` values at the end of the array
       return +1;
    }

    if (sorted)
        return a.localeCompare(b);
    else
        return b.localeCompare(a);
});

但在我看来，你应该去掉数组中的这个null 值。您可以过滤它们：

TestArray = TestArray.filter(function(val) {
    return val != null;
});

【讨论】：

如何先显示 iOS 版本而不是 null 值？然后再次单击时首先显示空值然后显示 iOS 版本？
阅读我的代码中的 cmets。如果要将 null 放在数组的末尾，请反转 -1 和 +1。
!a 和 !b 也适用于空字符串 ""、零 0、undefined 和 NaN。
@VisioN 为真。但我不认为这是一件坏事
如果有var sorted = false;应该是什么结果

【解决方案3】：

http://jsfiddle.net/0w5ejd5q/2/

TestArray.sort(function(a, b) 
{
    if (sorted && a!=null)
        return a.localeCompare(b);
    else if(b!=null)
        return b.localeCompare(a);
});

【讨论】：

我认为应该再增加一个 else 块，如果升序返回 -1，如果降序返回 1，否则您的代码对我来说看起来不错

【解决方案4】：

试试三元运算符：

var TestArray = ["iOS 7", null, "iOS 8.4", null, null, null, "iOS 9"];
var sorted = true;
var fn = function(a, b) {
  if (sorted)
    return a ? a.localeCompare(b) : 1;
  return b ? b.localeCompare(a) : -1;
};

document.write("<pre>");
TestArray.sort(fn);
document.write(JSON.stringify(TestArray));

document.write("<br/>");
sorted = !sorted;
TestArray.sort(fn);
document.write(JSON.stringify(TestArray));

document.write("</pre>");

【讨论】：