如何按多个字段对对象数组进行排序？

Question

如何按多个字段对对象数组进行排序？

374

从这个原始问题中，我该如何对多个字段进行排序？

使用这个稍微调整过的结构，我该如何对城市（升序）和价格（降序）进行排序？

var homes = [
    {"h_id":"3",
     "city":"Dallas",
     "state":"TX",
     "zip":"75201",
     "price":"162500"},
    {"h_id":"4",
     "city":"Bevery Hills",
     "state":"CA",
     "zip":"90210",
     "price":"319250"},
    {"h_id":"6",
     "city":"Dallas",
     "state":"TX",
     "zip":"75000",
     "price":"556699"},
    {"h_id":"5",
     "city":"New York",
     "state":"NY",
     "zip":"00010",
     "price":"962500"}
    ];

我喜欢这个答案提供了一个通用的方法。在我计划使用这段代码的地方，我需要对日期以及其他事物进行排序。如果不考虑有些繁琐，预处理对象的能力似乎很方便。

我尝试将这个答案构建成一个好的通用示例，但是我没有太多的成功。

- Mike

你想搜索还是排序？ - Felix Kling

你使用你链接的第二个答案时遇到了什么问题？ - canon

它不够通用。我似乎在添加大量代码，而我只想说sort(["first-field", "ASC"], ["second-field", "DSC"]);。当我尝试添加第一个答案的“primer”逻辑以处理日期、大小写不敏感等时，这变得更加复杂。 - Mike

4

如果你愿意使用lodash，可以查看https://lodash.com/docs/4.17.11#orderBy。 - Deepanshu Arora

按属性排序的模式是 homes.sort((a, b) =>…)，其中 a.prop 和 b.prop。 a.prop - b.prop 数值排序，a.prop.localeCompare(b.prop) 字典序排序，(b.prop < a.prop) - (a.prop < b.prop) 通用排序。要按降序排序而不是升序，请取反返回值（例如，使用 b.prop - a.prop 而不是 a.prop - b.prop）。 - Sebastian Simon

42个回答

329

想要解决你特定问题的非通用、简单解决方案：

homes.sort(
   function(a, b) {          
      if (a.city === b.city) {
         // Price is only important when cities are the same
         return b.price - a.price;
      }
      return a.city > b.city ? 1 : -1;
   });

- Snowburnt

8

我认为这个演示是原帖作者想要的内容 => http://jsfiddle.net/zJ6UA/533/ - Amin Jafari

4

这个想法是正确的，但逻辑全部错了。你不能从另一个字符串中减去非数字字符串，并且if语句没有意义。 - JLRishe

7

在最后一行可以使用a.localeCompare(b)进行字符串比较... 查看文档 - Michael P

2

第一个城市的比较不应该检查不相等吗？换句话说，这一行不应该是 if (a.city === b.city) 吗？也就是说，如果两个城市相同，则比较价格，否则比较城市。 - Steven Rands

2

非常优雅。如果JavaScript有像LINQ一样的sortBy和后续的thenSortBy就太好了。 - howardlo

显示剩余5条评论

92

一个基于这个回答的多维度排序方法：

更新：这里提供了一个“优化”的版本。它进行了更多的预处理，并为每个排序选项预先创建了一个比较函数。它可能需要更多的内存（因为它为每个排序选项存储了一个函数），但它应该表现得更好，因为它不必在比较期间确定正确的设置。我没有做任何性能分析。

var sort_by;

(function() {
    // utility functions
    var default_cmp = function(a, b) {
            if (a == b) return 0;
            return a < b ? -1 : 1;
        },
        getCmpFunc = function(primer, reverse) {
            var dfc = default_cmp, // closer in scope
                cmp = default_cmp;
            if (primer) {
                cmp = function(a, b) {
                    return dfc(primer(a), primer(b));
                };
            }
            if (reverse) {
                return function(a, b) {
                    return -1 * cmp(a, b);
                };
            }
            return cmp;
        };

    // actual implementation
    sort_by = function() {
        var fields = [],
            n_fields = arguments.length,
            field, name, reverse, cmp;

        // preprocess sorting options
        for (var i = 0; i < n_fields; i++) {
            field = arguments[i];
            if (typeof field === 'string') {
                name = field;
                cmp = default_cmp;
            }
            else {
                name = field.name;
                cmp = getCmpFunc(field.primer, field.reverse);
            }
            fields.push({
                name: name,
                cmp: cmp
            });
        }

        // final comparison function
        return function(A, B) {
            var a, b, name, result;
            for (var i = 0; i < n_fields; i++) {
                result = 0;
                field = fields[i];
                name = field.name;

                result = field.cmp(A[name], B[name]);
                if (result !== 0) break;
            }
            return result;
        }
    }
}());

例子用法：

homes.sort(sort_by('city', {name:'price', primer: parseInt, reverse: true}));

演示

原始函数：

var sort_by = function() {
   var fields = [].slice.call(arguments),
       n_fields = fields.length;

   return function(A,B) {
       var a, b, field, key, primer, reverse, result, i;

       for(i = 0; i < n_fields; i++) {
           result = 0;
           field = fields[i];

           key = typeof field === 'string' ? field : field.name;

           a = A[key];
           b = B[key];

           if (typeof field.primer  !== 'undefined'){
               a = field.primer(a);
               b = field.primer(b);
           }

           reverse = (field.reverse) ? -1 : 1;

           if (a<b) result = reverse * -1;
           if (a>b) result = reverse * 1;
           if(result !== 0) break;
       }
       return result;
   }
};

演示

- Felix Kling

3

记录一下，这个函数仍然可以通过预处理参数列表并创建一个统一的“排序选项数组”来改进。这留给读者作为练习;) - Felix Kling

@Mike：好的...终于完成了；）你看，现在它更复杂了，因为选项被预处理了，但是最终的比较函数（见注释）却更简单了，这（希望）会导致更好的性能。你拥有的排序选项越多，你就越能从这种方法中获得优势。 - Felix Kling

91

以下是一个简单的通用功能方法。使用数组指定排序顺序。在指定降序时，在前面加上负号。

var homes = [
    {"h_id":"3", "city":"Dallas", "state":"TX","zip":"75201","price":"162500"},
    {"h_id":"4","city":"Bevery Hills", "state":"CA", "zip":"90210", "price":"319250"},
    {"h_id":"6", "city":"Dallas", "state":"TX", "zip":"75000", "price":"556699"},
    {"h_id":"5", "city":"New York", "state":"NY", "zip":"00010", "price":"962500"}
    ];

homes.sort(fieldSorter(['city', '-price']));
// homes.sort(fieldSorter(['zip', '-state', 'price'])); // alternative

function fieldSorter(fields) {
    return function (a, b) {
        return fields
            .map(function (o) {
                var dir = 1;
                if (o[0] === '-') {
                   dir = -1;
                   o=o.substring(1);
                }
                if (a[o] > b[o]) return dir;
                if (a[o] < b[o]) return -(dir);
                return 0;
            })
            .reduce(function firstNonZeroValue (p,n) {
                return p ? p : n;
            }, 0);
    };
}

编辑：在ES6中，它甚至更简短!

"use strict";
const fieldSorter = (fields) => (a, b) => fields.map(o => {
    let dir = 1;
    if (o[0] === '-') { dir = -1; o=o.substring(1); }
    return a[o] > b[o] ? dir : a[o] < b[o] ? -(dir) : 0;
}).reduce((p, n) => p ? p : n, 0);

const homes = [{"h_id":"3", "city":"Dallas", "state":"TX","zip":"75201","price":162500},     {"h_id":"4","city":"Bevery Hills", "state":"CA", "zip":"90210", "price":319250},{"h_id":"6", "city":"Dallas", "state":"TX", "zip":"75000", "price":556699},{"h_id":"5", "city":"New York", "state":"NY", "zip":"00010", "price":962500}];
const sortedHomes = homes.sort(fieldSorter(['state', '-price']));

document.write('<pre>' + JSON.stringify(sortedHomes, null, '\t') + '</pre>')

- chriskelly

9

我发现这个函数很不错，所以我进行了一些小的性能改进，取决于解析器，可以提高达90%。我创建了一个gist和test suite。 - php_nub_qq

根据样本数据，数字似乎按预期排序，但是当我尝试实现时，数字的排序更像字符串... [10,100,11,9]。我错过了什么吗？ - Mark Carpenter Jr

@MarkCarpenterJr。不确定您的意思。我的示例可以正确排序数字类型。您能否将您的实现作为问题分享，并在评论中提及我，以便我看到它？然后我可以检查一下。 - chriskelly

@MarkCarpenterJr。刚刚发现了。我已经在评论中添加了解释。 - chriskelly

我创建了一个受此启发的函数，使用localeCompare模式来支持正确的数字排序，我在这里发布了答案：https://stackoverflow.com/a/77205726/3799617 - undefined

35

今天我制作了一个相当通用的多功能排序器。您可以在此处查看thenBy.js: https://github.com/Teun/thenBy.js

它允许您使用标准的Array.sort，但采用firstBy().thenBy().thenBy()样式。它比上面发布的解决方案的代码和复杂性要少得多。