排序javascript数组，使空白值总是在底部

Sort javascript array so that blank values are always at bottom

本文关键字：底部 空白 javascript 数组 排序      更新时间：2023-09-26

所以我有一个数组的数组，其中只包含字符串。数组的数组将显示为一个表，可能有超过1000行，每行有20个或更多的值。

, 

var arr = [
    ["bob","12","yes"],
    ["joe","","no"],
    ["tim","19","no"],
    ["dan","","yes"],
    ["tim","",""],
    ["dan","0",""]
]

字符串可以包含任何可以表示为字符串的内容，包括:" ", "", "0"或"00-00-00"等。任意列都可以用来排序。

我正在排序数组升序和降序，但我排序的一些值是空白字符串:""。我怎么能得到空白字符串(仅)总是在所有现代浏览器的新数组的末尾?

当前升序时在末尾，降序时在开始。

我像下面这样排序(是的，我确信我也可以做得更短):

if (direction == "asc") {
    SortedArr = arr.sort(function (a, b) {
        if (a[colToSortBy] == '') {
            return -1;
        }
        if (a[colToSortBy].toUpperCase() < b[colToSortBy].toUpperCase()) {
            return -1;
        }
        if (a[colToSortBy].toUpperCase() > b[colToSortBy].toUpperCase()) {
            return 1;
        }
        return 0;
    });
} else {
    SortedArr = arr.sort(function (a, b) {
        if (a[colToSortBy] == '') {
            return -1;
        }
        if (b[colToSortBy].toUpperCase() < a[colToSortBy].toUpperCase()) {
            return -1;
        }
        if (b[colToSortBy].toUpperCase() > a[colToSortBy].toUpperCase()) {
            return 1;
        }
        return 0;
    });
}

末尾为空字符串

在JSFiddle上的工作示例，无论顺序是升序还是降序，总是在末尾放置空字符串。这可能是一个可用性问题，但这是解决方案:

if (direction == "asc") {
    SortedArr = arr.sort(function (a, b) {
        return (a[col] || "|||").toUpperCase().localeCompare((b[col] || "|||").toUpperCase())
    });
} else {
    SortedArr = arr.sort(function (a, b) {
        return (b[col] || "!!!").toUpperCase().localeCompare((a[col] || "!!!").toUpperCase())
    });
}

我认为你的问题来自于你正在检查a[colToSortBy]是否为空字符串，但你不为b[colToSortBy]做这件事。

我正在编写一个必须在IE, FF, Safari, Chrome, Opera, Desktop, Tablet(包括iPad)上工作的应用程序&手机(包括iPhone)。这意味着我要在不同浏览器间进行测试。因此，我发现下面的排序过程在FF中不能正常工作，直到我添加了代码的"new section"部分。原因是当没有提供数值(破折号，-)时，我没有考虑排序。FF在负(-)值下也不能正常工作。这段代码现在可以完美地跨越:

if (SortByID == 0) {                //string values (Bank Name)
    myValues.sort( function (a,b) {
        var nameA = a[SortByID].toUpperCase(), nameB = b[SortByID].toUpperCase();
        if (SortOrderID == 1) {         //sort string ascending
            if (nameA < nameB) { return -1; } else { if (nameA > nameB) { return 1; } }
        } else {                        //sort string descending
            if (nameA < nameB) { return 1; } else { if (nameA > nameB) { return -1; } }
        }
        return 0                    //default return value (no sorting)
    })
} else {                            //numeric values (Items)
    myValues.sort(function (a, b) {
        if (isNumber(a[SortByID]) && isNumber(b[SortByID])) { //
            if (SortOrderID == 1) { //sort number ascending
                return parseFloat(a[SortByID]) - parseFloat(b[SortByID]);
            } else {                //sort string descending
                return parseFloat(b[SortByID]) - parseFloat(a[SortByID]);
            }
        } else { //one of the values is not numeric
            //new section
            if (!isNumber(a[SortByID])) {
                if (SortOrderID == 1) { //sort number ascending
                    return -1;
                } else {                //sort number descending
                    return 1;
                }
            } else {
                if (!isNumber(b[SortByID])) {
                    if (SortOrderID == 1) { //sort number ascending
                        return 1;
                    } else {                //sort number descending
                        return -1;
                    }
                }
            }//New section
            return 0;
        }
    })
}

我知道它很长，但它很简单，我能理解。我希望它也能解决由Chris J。*isNumber是一个简单的函数测试如果值!

我在我的应用程序中使用了这种方法…

你可以调整它以获得有利的结果。我们还有数字。MAX_SAFE_INTEGER 

var arr = [10, "", 8, "", 89, 72]
var min = Number.MIN_SAFE_INTEGER
var sorted = arr.sort(function (a,b) {
  return (a || min) - (b || min)
})
var cons = document.getElementById("console")
cons.innerText = "Ascending " + JSON.stringify(sorted) + "'n" + "Descending " +  JSON.stringify(sorted.reverse())
<html>
  <head></head>
  <body>
    <p id="console"></p>
  </body>
</html>

相关文章：