如何使用 underscore.js 进行 asc 和 desc 排序？

我当前使用 underscorejs 对我的 json 排序进行排序。现在我要求使用 underscore.js 对 ascending和 descending进行排序。我在文件中没有看到任何与此相关的内容。我怎么才能做到呢？

189214 次浏览
小开
最佳答案

你可以使用 .sortBy，它总是返回一个 上升列表:

_.sortBy([2, 3, 1], function(num) {
return num;
}); // [1, 2, 3]

但是你可以用 。反向方法得到 正在下降:

var array = _.sortBy([2, 3, 1], function(num) {
return num;
});


console.log(array); // [1, 2, 3]
console.log(array.reverse()); // [3, 2, 1]

或者在处理数字时，给返回值加上一个负号，从而使列表下降:

_.sortBy([-3, -2, 2, 3, 1, 0, -1], function(num) {
return -num;
}); // [3, 2, 1, 0, -1, -2, -3]

在引擎盖下，.sortBy使用的是 .sort([handler])内置的:

// Default is alphanumeric ascending:
[2, 3, 1].sort(); // [1, 2, 3]


// But can be descending if you provide a sort handler:
[2, 3, 1].sort(function(a, b) {
// a = current item in array
// b = next item in array
return b - a;
});
小开

使用下划线的降序可以通过将返回值乘以 -1来完成。

//Ascending Order:
_.sortBy([2, 3, 1], function(num){
return num;
}); // [1, 2, 3]




//Descending Order:
_.sortBy([2, 3, 1], function(num){
return num * -1;
}); // [3, 2, 1]

如果按字符串而不是数字排序，可以使用 charCodeAt ()方法获取 unicode 值。

//Descending Order Strings:
_.sortBy(['a', 'b', 'c'], function(s){
return s.charCodeAt() * -1;
});
小开

数组原型的反向方法修改数组并返回对它的引用，这意味着您可以这样做:

var sortedAsc = _.sortBy(collection, 'propertyName');
var sortedDesc = _.sortBy(collection, 'propertyName').reverse();

此外，下划线文档如下:

此外，数组原型的方法是通过链式下划线对象进行代理的，因此您可以将 reverse或 push放入链式下划线中，并继续修改数组。

这意味着你也可以在链接时使用 .reverse():

var sortedDescAndFiltered = _.chain(collection)
.sortBy('propertyName')
.reverse()
.filter(_.property('isGood'))
.value();
小开

与 Underscore 库类似，还有另一个名为‘ loash’的库，它有一个方法“ orderBy”，该方法接受参数以确定对其排序的顺序。你可以把它当成

_.orderBy('collection', 'propertyName', 'desc')

由于某些原因，网站文档中没有记录。

小开

下划线混音

扩展@emil _ lundberg 的回答，如果你使用 Underscore 来创建一个自定义的排序函数，你也可以写一个“混合”，如果这是一种排序，你可以在应用程序的某个地方重复。

例如，可能您有一个控制器或视图排序结果的排序顺序为“ ASC”或“ DESC”，并且您希望在这种排序之间切换，您可以这样做:

Mixin.js

_.mixin({
sortByOrder: function(stooges, prop, order) {
if (String(order) === "desc") {
return _.sortBy(stooges, prop).reverse();
} else if (String(order) === "asc") {
return _.sortBy(stooges, prop);
} else {
return stooges;
}
}
})

使用示例

var sort_order = "asc";
var stooges = [
{name: 'moe', age: 40},
{name: 'larry', age: 50},
{name: 'curly', age: 60},
{name: 'July', age: 35},
{name: 'mel', age: 38}
];


_.mixin({
sortByOrder: function(stooges, prop, order) {
if (String(order) === "desc") {
return _.sortBy(stooges, prop).reverse();
} else if (String(order) === "asc") {
return _.sortBy(stooges, prop);
} else {
return stooges;
}
}
})




// find elements
var banner = $("#banner-message");
var sort_name_btn = $("button.sort-name");
var sort_age_btn = $("button.sort-age");


function showSortedResults(results, sort_order, prop) {
banner.empty();
banner.append("<p>Sorting: " + prop + ', ' + sort_order + "</p><hr>")
_.each(results, function(r) {
banner.append('<li>' + r.name + ' is '+ r.age + ' years old.</li>');
})
}


// handle click and add class
sort_name_btn.on("click", function() {
sort_order = (sort_order === "asc") ? "desc" : "asc";
var sortedResults = _.sortByOrder(stooges, 'name', sort_order);
showSortedResults(sortedResults, sort_order, 'name');
})


sort_age_btn.on('click', function() {
sort_order = (sort_order === "asc") ? "desc" : "asc";
var sortedResults = _.sortByOrder(stooges, 'age', sort_order);
showSortedResults(sortedResults, sort_order, 'age');
})

下面的 JSFiddle 演示了这一点: 排序的 JSFiddle

小开

您可以在第一次迭代中使用相反的顺序:

_.sortBy([2, 3, 1], num => -num )

提交答案