Javascript对象数组排序返回明显随机的结果答案

【问题标题】：Javascript object array sort returns apparantly random resultsJavascript对象数组排序返回明显随机的结果
【发布时间】：2013-07-18 16:14:37
【问题描述】：

我正在尝试对对象数组进行简单排序，但它似乎返回完全随机的结果。请看一下这个 plunk：（在 FF 或 Chrome 中）

http://plnkr.co/edit/TqoyUJV4nzvC4hAkVRkz?p=preview

    var data;
    var asc;

    function init(){
        data = [{username:"leonhaas"},{username:"0johnson"},{username:"leonlang"},{username:"0lechner"},{username:"0koller"},{username:"leonwinkler"},{username:"0schmidt"},{username:"0mueller"},{username:"0schmid"},{username:"lillyfuchs"},{username:"alexandragruber"},{username:"alexanderlechner"},{username:"alexanderpichler"},{username:"alexandraeder"},{username:"lillyreiter"},{username:"alibauer"},{username:"alexandrahall"},{username:"alexandrajohnson"},{username:"alexandrataylor"},{username:"alexandrawilliams"},{username:"lilywinkler"},{username:"alinabauer"},{username:"aliceegger"},{username:"alicesteiner"},{username:"alicewallner"},{username:"aliegger"},{username:"alifuchs"},{username:"linajohnson"},{username:"amarwhite"},{username:"alinaleitner"},{username:"alinaschmidt"},{username:"alinawood"},{username:"alischneider"}];
        outputData(data);
        asc = true;
    }

    function sortIt()
    {
        a = data.username;
        b = data.username;
        if(asc){
            data.sort(function(a,b)
            {
                return 1;
            });
        } else {
            data.sort(function(a,b)
            {
                return -1;
            });
        }

        outputData(data);
    }

    function outputData(data){
        var output = "";
        data.forEach(function (item){
            output += item.username +"<br>";
        });

        var x=document.getElementById("demo");
        x.innerHTML=output;
    }

【问题讨论】：

标签： javascript sorting

【解决方案1】：

在您的排序功能中，您必须比较数据对象的用户名：

function sortIt()
{
    if(asc){
        data.sort(function(a,b)
        {
            return a.username.localeCompare(b.username);
        });
    } else {
        data.sort(function(a,b)
        {
            return b.username.localeCompare(a.username);
        });
    }

    outputData(data);
}

【讨论】：

谢谢！与此同时，我还找到了另一种方法： data.sort(function(a,b) { var x = a['username'], y = b['username']; return (x == y ? 0 : ( x > y ? 1 : -1)); });

【解决方案2】：

有几件事，您没有对数组进行排序，如果值相同，则需要返回 0，然后根据升序/降序排序返回 -1（或 1）。
除此之外，您在sortIt 函数中分配了var a 和var b，这是真的，但这些不是您将在sort 回调中使用的值。因为回调的参数是同名的，所以它们掩盖了更高范围的a和b变量。

综合考虑，排序回调应如下所示：

data.sort(function(a,b)
{
    return a.username === b.username ? 0 : a.username >b.username ? 1 : -1;
});

考虑到所有因素，您的代码可以做更多工作：您在所有地方都使用全局变量，您的 sortIt 函数将在每次调用时重新声明排序回调，您在 HTML 中绑定事件处理程序（总是最好在 JS 中管理 JS 侦听器，类似于单一责任原则），调用可以从实际相关调用上下文中受益的函数等......首先look into IIFE's to create closures，并为 MDN 添加书签

【讨论】：

【解决方案3】：

您应该根据条件从排序函数返回值，而不仅仅是 1 或 -1。像这样……

// Inside your script.js. Line #14
if(asc){
    data.sort(function(a,b)
    {
        return a>b ? 1 : -1;
    });
} else {
    data.sort(function(a,b)
    {
        return a>b ?-1 : 1;
    });
}

【讨论】：

【解决方案4】：

function sortIt()
    {
        a = data.username;
        b = data.username;
        if(asc){
            data.sort(function(a,b)
            {
                if(a.username.localeCompare(b.username) > 0)
                return 1;
                else
                return -1;
            });
        } else {
            data.sort(function(a,b)
            {
                if(b.username.localeCompare(a.username) > 0)
                return 1;
                else
                return -1;
            });
        }

        outputData(data);
    }

【讨论】：

不需要if/else，只需return a.username.localeCompare(b.username)

【解决方案5】：

        data = [{username: "leonhaas"},...];

        var asc = true;

        data.sort(function(a, b) {
            if (asc)
                return a.username > b.username ? 1 : -1;
            else
                return a.username > b.username ? -1 : 1;
        });

        for (var i = 0; i < data.length; i++) {
            console.log(data[i].username);
        }

【讨论】：