按键值对 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、title、summary、status、project、area 和 hours 属性。这些错误中的每一个都将显示在我的 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 resolvedBugs = []？如果是这样，那么我的问题将是知道有哪些可能的选择。在创建这些新数组之前，我是否应该首先遍历整个 bugs 数组以查看所需组类别存在哪些可能的选项？

在不求助于其他 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";
});