Wie kann ich mit underscore.js eine Auf- und Abwärtssortierung durchführen?

Ich verwende derzeit Unterstriche zum Sortieren meiner JSON-Sortierung. Jetzt habe ich gebeten , eine zu tun ascendingund das descendingSortieren mit Underscore.js. Ich sehe nichts in der Dokumentation. Wie kann ich das erreichen?

Sie können verwenden .sortBy, es wird immer eine aufsteigende Liste zurückgegeben:

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

Sie können jedoch die .reverse- Methode verwenden, um sie absteigend zu erhalten :

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

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

Oder fügen Sie beim Umgang mit Zahlen der Rückgabe ein negatives Vorzeichen hinzu, um die Liste abzuleiten:

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

Unter der Haube .sortByverwendet die eingebaute .sort([handler]):

// Default is 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;
});

Eine absteigende Reihenfolge mit Unterstrich kann durch Multiplizieren des Rückgabewerts mit -1 erfolgen.

//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]

Wenn Sie nach Zeichenfolgen und nicht nach Zahlen sortieren, können Sie die Methode charCodeAt () verwenden, um den Unicode-Wert abzurufen.

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

Die umgekehrte Methode des Array-Prototyps ändert das Array und gibt einen Verweis darauf zurück. Dies bedeutet, dass Sie Folgendes tun können:

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

Die Unterstreichungsdokumentation lautet außerdem:

Darüber hinaus werden die Methoden des Array-Prototyps über das verkettete Unterstrichobjekt übertragen, sodass Sie ein reverseoder ein pushin Ihre Kette einfügen und das Array weiter ändern können.

was bedeutet, dass Sie auch .reverse()während der Verkettung verwenden können:

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

Ähnlich wie bei der Underscore-Bibliothek gibt es eine andere Bibliothek namens 'lodash' mit einer Methode "orderBy", die den Parameter verwendet, um zu bestimmen, in welcher Reihenfolge sie sortiert werden soll. Sie können es wie verwenden

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

Aus irgendeinem Grund ist es nicht in den Website-Dokumenten dokumentiert.

Unterstreichen Sie Mixins

Wenn Sie die Antwort von @ emil_lundberg erweitern, können Sie auch ein "Mixin" schreiben, wenn Sie Underscore verwenden, um eine benutzerdefinierte Funktion zum Sortieren zu erstellen, wenn es sich um eine Art Sortieren handelt, die Sie möglicherweise irgendwo in einer Anwendung wiederholen.

Wenn Sie beispielsweise einen Controller haben oder Sortierergebnisse mit der Sortierreihenfolge "ASC" oder "DESC" anzeigen und zwischen diesen Sortierungen wechseln möchten, können Sie Folgendes tun:

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;
      }
    }
})

Anwendungsbeispiel

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');
})

Hier ist eine JSFiddle, die dies demonstriert: JSFiddle für SortBy Mixin