按键值对 JavaScript 数组中的对象进行排序

Question

我可能想出了一个令人难以置信的粗略方法来完成这类事情，但我想我应该询问在场的许多专家。基本上，我有一个如下所示的数组：

var bugs = [
    {
        id: "197526",
        title: "Updating Lighthouse",
        summary: "Enhancing the UI of Lighthouse",
        status: "Active",
        project: "Lighthouse",
        area: "Internal Web Applications",
        hours: 19
    },
    {
        id: "190328",
        title: "Adding Login Authentication to Lighthouse",
        summary: "Create a login authentication process for Lighthouse",
        status: "Active",
        project: "Lighthouse",
        area: "Administration",
        hours: 12
    },
    ...
    {
        id: "187562",
        title: "Create a Maintenance Page",
        summary: "Create a maintenance page to be displayed with the company site is down",
        status: "Resolved",
        project: "Other",
        area: "Internal Web Projects",
        hours: 4
    },
];

基本上，该数组包含几个“错误”，每个错误都有 id、标题、摘要、状态、项目、区域和小时属性。这些错误中的每一个都将显示在我的 Web 应用程序上，但我允许用户选择它们的分组方式；按状态、项目或区域。根据他们从上面的选择框中选择的三个错误中的哪一个，我希望能够对所有错误进行排序，并按他们选择的类别对它们进行分组。然后，在显示它们时，为该类别的每个当前选项设置一个简单的标题。例如，如果他们要按状态排序，则类似于：

Group By: Status

Active
------
Bug with status: "active"
Bug with status: "active"
Bug with status: "active"

Resolved
--------
Bug with status: "resolved"
Bug with status: "resolved"

我是否应该迭代整个错误数组，并根据要排序的类别，只需为该类别的每个可能选项创建一个新数组并添加给他们适当的错误？那么在上面的例子中，创建新数组 var activeBugs = [] 和 var returnedBugs = [] 吗？如果是这样，我的问题就是知道有哪些可能的选择。然后，在创建这些新数组之前，我是否应该首先迭代整个错误数组，以查看所需组类别存在哪些可能的选项？

不诉诸其他 jQuery 插件的最佳方法是什么？

Answer 1

为了详细说明我质疑是否需要排序/过滤的评论，您可以在显示逻辑中做一些（非常粗略的）类似的事情吗？

$('#SortOrder').live('change', function() {
  var groupby = $(this).val();

  $('#Bugs').empty();

  for (var i = 0; i < bugs.length; i++) {
    if (!document.getElementById(bugs[i][groupby])) {
        $('<h3>', { text: bugs[i][groupby] }).appendTo('#Bugs');

        $('<ul>', {
            id: bugs[i][groupby]
        }).appendTo('#Bugs');
    }

    var $li = $('<li>', {
        text: bugs[i].title
    });

    $('#Bugs').find('#' + bugs[i][groupby]).append($li);
  }
});

工作演示： http://jsfiddle.net/TTApQ/1/

这样就没有排序或过滤根本不需要，而且您只需要对数组进行一次传递即可。

Answer 2

用户会得到所有错误的副本吗？或者您只发送前 100 个？

• 如果您发送前 100 个，我建议您在服务器上创建 3 个数组，其中保存指向对象的指针，并且每个新错误都会根据其位置插入。然后只需从请求的列表中发送即可。这应该很快，因为你只是提取信息。并且排序是在插入时进行的。 （所有“排序”都是在添加错误时完成的 - 这假设您查看信息的频率比编辑信息的频率更高！）
• 如果客户端拥有所有数据的副本，则只需使用 javascript 在客户端上对其重新排序即可。不应该花太多时间。这可以节省您的带宽，并且假设您没有那么多错误，因此您可以一次显示所有错误。

Answer 3

使用 array.sort 按状态对数组进行排序。迭代数组，记住上一次迭代的 .status 属性是什么。当它发生变化时，创建一个新的视觉表示。

bugs.sort(mySortFunc);

var lastStatus = '';
for (var i=0, b; b = bugs[i]; i++) {
  if (b.status != lastStatus) {
    //output a header for the new status b.status
    document.write(b.status + '<br>----<br>');
    lastStatus = b.status;
  }
  // output the bug
  document.write(b.title + '<br>');
}

警告：最终您会希望让数据库完成所有排序/分组/分页等操作。

Answer 4

这是一个使用 .filter() 的示例，正​​如我在评论中所述：

var active_bugs = bugs.filter(function(bug) {
    return bug.status === "active";
});