underscore.js를 사용하여 asc 및 desc 정렬을 수행하려면 어떻게해야합니까?


166

현재 json 정렬을 위해 underscorejs를 사용하고 있습니다. 지금은 할 물었다 ascendingdescending정렬을 사용하여 underscore.js합니다. 설명서에서 이와 관련된 내용이 없습니다. 어떻게하면 되나요?


1
정렬 대상 및 방법에 대한 예를 추가하십시오.
Jon

당신은 무엇을 정렬하고 있습니까? 번호? 줄? 데이트? 다른 것?
mu는

@muistooshort 객체 배열을 정렬하고 있습니다. 따라서 sortBy 메소드는 오름차순 정렬에 대한 내 기준에 완벽하게 부합하지만 다른 방법으로는 그렇지 않습니다.
Rahul

숫자로 정렬하면 sortBy함수가 될 수 return -n있지만 문자열에서는 작동하지 않습니다. 따라서 어떤 종류의 물건을 정렬하고 있는지에 대한 질문.
mu는 너무 짧다

2
Lodash하면 같은 속기를 사용할 수 있습니다 _.sortBy([1,4,3,2]).reverse()또는 _.chain([1,4,3,2]).sortBy().reverse().value()당신이 사용하지 않는 경우 reverse()배열의 프로토 타입을.
GFoley83

답변:


363

를 사용할 수 있으며 .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;
});

9
마지막 해결책, 즉 음수 부호를 반환 된 숫자에 추가하는 것이 완벽합니다.
vinesh

왜 버블 정렬이라고 생각하니? 후드 .sortBy()호출 내장 Array.sort()알고리즘은 브라우저 공급 업체에 달려 있지만 버블 정렬은 선택하지 않을 것입니다.
Rene Saarsoo

이것이 시간 복잡성을 증가시키지 않습니까? 목록이 두 번 정렬됩니다.
user1477388

@ user1477388 두 번 정렬에 대해 무슨 뜻인지 잘 모르겠습니다.
andlrc

@andlrc 따라서 호출 할 때 _.sortBy(arr, function)각 항목을 반복하고 정렬 된 배열을 반환하는 논리를 실행한다고 가정합니다. 그런 다음 호출 Array.prototype.reverse()할 때 아마도 각 항목을 다시 반복하고 논리를 실행하여 역 배열을 반환합니다. 따라서 배열을 두 번 반복합니다.
user1477388

57

밑줄을 사용한 내림차순은 리턴 값에 -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 () 메서드를 사용하여 유니 코드 값을 얻을 수 있습니다.

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

3
알파벳순으로 정렬하려고합니다--1을 곱하는 것은 유효한 작업이 아닙니다. :)
rythos42

유스 케이스 동안 가치가 있지만 질문에 명시되어 있지 않습니다. 그러나 문자열에 -1을 곱하면 유효한 연산입니다. 유효한 결과 인 NaN을 반환합니다.
jEremyB

1
배열을 다시 할당해야합니다! SOME_ARR = _.sortBy (SOME_ARR, 함수 (num) {SOME_FUNC ...});
aqm

4
이 문자열의 문자 정렬 기준으로 사용할 수 있도록 charCodeAt "는 문자열의 지정된 인덱스에있는 문자의 유니 코드를 반환"하지만 그것은하지 같이 하지 "종류의 문자열"는 문자열에서 문자가 정렬
Anthony

2
첫 문자 만 정렬하며 대소 문자를 구분합니다.
aidan

50

배열 프로토 타입의 역 방법의 수정이 작업을 수행 할 수 있음을 의미 배열 반환에 대한 참조 :

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

또한 밑줄 설명서는 다음과 같습니다.

또한 배열 프로토 타입의 메서드 는 연결된 Underscore 객체를 통해 프록시되므로 a reverse또는 a push를 체인에 넣고 배열을 계속 수정할 수 있습니다.

.reverse()체인 연결 중에도 사용할 수 있습니다 .

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

가장 간단한 사용 사례에서 역 / 내림차순 정렬을위한 가장 간단한 방법입니다.
Dan Atkinson

2
대소 문자를 구분하지 않는 알파벳순 정렬을 수행하려면_.sortBy(collection, item => item. propertyName.toLowerCase());
XåpplI'-I0llwlg'I-

배열에 음수가 있으면 작동하지 않습니다.
Shruti Kapoor

@ShrutiKapoor 그렇습니다. 왜 그렇지 않습니까?
Emil Lundberg

5
성능 측면에서는 먼저 필터를 적용한 다음 (나머지) 값을 정렬하는 것이 좋습니다.
Saran

12

Underscore 라이브러리와 유사하게 정렬 순서를 결정하기 위해 매개 변수를 취하는 하나의 메소드 "orderBy"가있는 'lodash'라고하는 또 다른 라이브러리가 있습니다. 당신은 그것을 사용할 수 있습니다

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

어떤 이유로 웹 사이트 문서에는 문서화되어 있지 않습니다.


나는 당신 이 lodash밑줄 을 혼동했다고 생각합니다 . 후자 만 언급 된 orderBy 함수가 있습니다.
Thomas Marti

그래, 내 나쁜 답변을 업데이트합니다. 수정 해 주셔서 감사합니다 :)
Minkesh Jain

orderBy매우 유용합니다! 내가 찾고있는 안정적인 정렬 속성을 유지하기 때문에 reverse를 사용하는 것보다 훨씬 낫습니다.
Flimm

어떤 이유로 upadte : 나를 위해 작동하지 않습니다 : 그것의 lodash (
aleXela

0

밑줄 믹스 인

@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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.