web-dev-qa-db-fra.com

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 ascending et descending en utilisant underscore.js. Je ne vois rien de la même chose dans la documentation. Comment puis-je atteindre cet objectif?

javascriptunderscore.js
161
Rahul

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

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

Mais vous pouvez utiliser la méthode . Reverse pour l'obtenir décroissant :

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

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

Ou, lorsqu’il s’agit de 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 .sortBy utilise le construit .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;
});
_
353
andlrc

L'ordre décroissant utilisant le trait de soulignement peut être obtenu en multipliant la valeur renvoyée 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;
});
56
jEremyB

La méthode inverse du prototype de matrice modifie la matrice et renvoie une référence à celle-ci, ce qui signifie que vous pouvez le faire:

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

La documentation de soulignement se lit également comme suit:

De plus, les méthodes du prototype de tablea sont mandatés par l'objet Underscore chaîné pour que vous puissiez glisser un reverse ou un Push dans votre chaîne et continuer à modifier le tableau.

ce qui signifie que vous pouvez également utiliser .reverse() tout en chaînant:

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

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 l'ordre dans lequel le trier. Vous pouvez l'utiliser comme

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

Pour une raison quelconque, cela n’est pas documenté dans la documentation du site Web.

9
Minkesh Jain

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 permettant de trier si c'est 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 un affichage des résultats de tri avec un ordre de tri "ASC" ou "DESC", et vous souhaitez basculer entre ce tri, 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 exemple de JSFiddle: JSFiddle pour SortBy Mixin

0
RoboBear