[英]How can I do an asc and desc sort using underscore.js?
我目前正在使用 underscorejs 對我的 json 進行排序。 現在我要求使用 underscore.js 進行ascending
和descending
排序。 我在文檔中沒有看到任何與此相關的內容。 我怎樣才能做到這一點?
您可以使用.sortBy
,它總是會返回一個升序列表:
_.sortBy([2, 3, 1], function(num) {
return num;
}); // [1, 2, 3]
但是你可以使用.reverse方法讓它降序:
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;
});
Array 原型的 reverse 方法修改數組並返回對它的引用,這意味着您可以這樣做:
var sortedAsc = _.sortBy(collection, 'propertyName');
var sortedDesc = _.sortBy(collection, 'propertyName').reverse();
此外,下划線文檔如下:
此外, Array 原型的方法通過鏈接的 Underscore 對象進行代理,因此您可以將
reverse
或push
滑入鏈中,並繼續修改數組。
這意味着您還可以在鏈接時使用.reverse()
:
var sortedDescAndFiltered = _.chain(collection)
.sortBy('propertyName')
.reverse()
.filter(_.property('isGood'))
.value();
與 Underscore 庫類似,還有另一個名為 'lodash' 的庫,它有一個方法“orderBy”,它接受參數來確定排序的順序。 你可以像這樣使用它
_.orderBy('collection', 'propertyName', 'desc')
出於某種原因,它沒有記錄在網站文檔中。
下划線混合
擴展@emil_lundberg 的回答,如果您使用 Underscore 制作自定義排序函數,如果它是一種您可能會在某個應用程序中重復的排序,您還可以編寫“mixin”。
例如,也許您有一個控制器或查看排序結果的排序順序為“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 for SortBy Mixin
您可以在第一次迭代中使用相反的順序:
_.sortBy([2, 3, 1], num => -num )
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.