Comment puis-je faire un tri asc et desc en utilisant underscore.js?

J'utilise actuellement des underscorejs pour trier mon tri json. Maintenant, j'ai demandé à faire un tri ascendinget à l' descendingaide de underscore.js. Je ne vois rien de semblable dans la documentation. Comment puis-je atteindre cet objectif?

Vous pouvez utiliser .sortBy, il renverra toujours une liste ascendante :

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

Mais vous pouvez utiliser la méthode .reverse pour le faire descendre :

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

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

Ou lorsque vous traitez avec des nombres, ajoutez un signe négatif au retour pour descendre la liste:

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

Sous le capot .sortByutilise le intégré .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;
});

L'ordre décroissant utilisant le trait de soulignement peut être effectué en multipliant la valeur de retour par -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]

Si vous triez par chaînes et non par nombres, vous pouvez utiliser la méthode charCodeAt () pour obtenir la valeur unicode.

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

La méthode inverse du prototype Array modifie le tableau et lui renvoie une référence, ce qui signifie que vous pouvez le faire:

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

En outre, la documentation de soulignement se lit comme suit:

De plus, les méthodes du prototype Array sont envoyées par proxy via l'objet Underscore chaîné, vous pouvez donc insérer un reverseou un pushdans votre chaîne et continuer à modifier le tableau.

ce qui signifie que vous pouvez également utiliser .reverse()lors du chaînage:

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

Semblable à la bibliothèque Underscore, il existe une autre bibliothèque appelée «lodash» qui a une méthode «orderBy» qui prend le paramètre pour déterminer dans quel ordre le trier. Vous pouvez l'utiliser comme

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

Pour une raison quelconque, il n'est pas documenté sur les documents du site Web.

Souligner les mixins

En prolongeant la réponse de @ emil_lundberg, vous pouvez également écrire un "mixin" si vous utilisez Underscore pour créer une fonction personnalisée pour le tri s'il s'agit d'une sorte de tri que vous pourriez répéter dans une application quelque part.

Par exemple, vous avez peut-être un contrôleur ou affichez les résultats de tri avec l'ordre de tri "ASC" ou "DESC", et que vous souhaitez basculer entre ces types, vous pouvez faire quelque chose comme ceci:

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

Exemple d'utilisation

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

Voici un JSFiddle démontrant ceci: JSFiddle pour SortBy Mixin