web-dev-qa-db-ja.com

underscore.jsを使ってascとdescをソートするにはどうすればいいですか？

私は現在私のJSONソートのソートにアンダースコアを使用しています。今度はunderscore.jsを使ってascendingとdescendingのソートをするように依頼しました。私はドキュメンテーションの中で同じことに関して何も見ません。どうすればこれを達成できますか？

javascriptunderscore.js
160
Rahul

あなたは .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 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;
});
348
andlrc

アンダースコアを使用して降順にするには、戻り値に-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;
});
55
jEremyB

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();
47
Emil Lundberg

Underscoreライブラリと同様に、 'lodash'と呼ばれるもう1つのライブラリがあります。これは1つのメソッド "orderBy"を持っています。あなたはそれを好きに使うことができます

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

何らかの理由で、それはウェブサイトの文書には文書化されていません。

9
Minkesh Jain

アンダースコアミックスイン

@ 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があります。 SortBy MixinのJSFiddle

0
RoboBear