JavaScript 배열 정렬 방법에 대한 5가지 유용한 팁

만약 네가 내가 쓴 것을 좋아한다면, 너는 아마 원할 것이다.언제든지 토론을 진행하는 것을 환영합니다.
JavaScriptarrays는 모든 유형의 데이터를 저장할 수 있는 질서정연한 집합입니다.수조는 네모난 괄호 [...] 로 만든 것이다요소를 반복할 수 있습니다.JavaScript에서는 sort() 라는 기본 방법을 사용하여 배열의 요소를 정렬할 수 있습니다.
본고에서 우리는 5가지 중요한 제시(또는 정보)를 통해 sort() 방법을 이해할 것이다.도움이 됐으면 좋겠어요.

나의 뉴스 원고를 구독하다 1. 기본 배열.sort () 문자열 형식에 사용

sort() 방법은 그룹 요소를 정렬하고 정렬된 그룹을 되돌려줍니다.
let artists = [
    'John White Abbott', 
    'Leonardo da Vinci', 
    'Charles Aubry', 
    'Anna Atkins', 
    'Barent Avercamp'
];

let sorted = artists.sort();

console.log('Sort the artist names', sorted);
출력
Sort the artist names
[
"Anna Atkins", 
"Barent Avercamp", 
"Charles Aubry", 
"John White Abbott", 
"Leonardo da Vinci"
]
sort() 방법은 실제적으로 원시 수조를 변이시켰고 원시 수조와 정렬 수조는 모두 같은 인용이다.
console.log(artists === sorted); // returns true
자, 여기서 주의해야 할 것은,

With the sort() method, the default sort order is ascending, and elements are converted into strings. Hence the default sort() method is not enough to sort arrays with different data type elements.


내림차순 정렬은 어떻습니까?


기본값sort() 방법은 오름차순으로 정렬됩니다.우리는 어떻게 내림차순으로 정렬합니까?어서 오세요.compare function 도움말 요소는 반환 값에 따라 순서대로 정렬됩니다.한 가지 예로 살펴보자.
// A compare function
function (a, b) {
    if (a > b) {
      return -1;
    }
    if (a < b) {
      return 1;
    }
    // a must be equal to b
    return 0;
 }
위의 비교 함수는 수조의 모든 요소를 비교하여 내림차순으로 정렬하는 데 도움이 된다.물론 같은 함수는 더 간단한 방식으로 작성할 수 있지만,
function (a,b) {
   return a === b ? 0 : a > b ? -1 : 1;
}
이제 내림차순 compare function 수조에 따라 정렬합시다.
artists.sort(function (a, b) {
   return a === b ? 0 : a > b ? -1 : 1;
});

console.log('Sort the artist names(Descending)', artists);
출력
Sort the artist names(Descending)
[
"Leonardo da Vinci", 
"John White Abbott", 
"Charles Aubry", 
"Barent Avercamp", 
"Anna Atkins"
]

숫자를 정렬하는 것이 어떻습니까?


같은 이념도 적용된다.기본 artists 기능이 올바르게 실행되지 않습니다.이거 봐,
let ages = [2, 1000, 10, 3, 23, 12, 30, 21];

ages.sort();
console.log(ages);
출력
[10, 1000, 12, 2, 21, 23, 3, 30]
이상하죠?예. 기본적으로 sort() 요소가 문자열로 변환되고 UTF-16 코드 단위 순서대로 비교되기 때문입니다.따라서 변환된 12는 변환된 후 2 앞에 있습니다.
우리는 다시 구조하기 위해 sort() 한 대가 필요하다.오름차순 정렬은 다음과 같습니다.
ages.sort(function(a,b) {return a-b});
console.log(ages);
compare function 방법에 전달되는 비교 함수에 주의하십시오.비교 함수가 b에서 a를 빼면 결과는 정수, 음수 또는 0이 될 것이다.
인코딩 스타일을 사용하는 경우 sort() 함수를 사용하여 다음과 같이 작성할 수 있습니다.
ages.sort((a,b) => a-b);
출력
[2, 3, 10, 12, 21, 23, 30, 1000]
강수 정렬은 비교 함수에서 되돌아오는 것이 아니라 간단한 변경이다.
ages.sort(function(a,b) {return b-a})
console.log(ages);
출력
[1000, 30, 23, 21, 12, 10, 3, 2]

2. 어레이.reverse () 는 정렬에 적합한 힘이다

ES6는 또 다른 유용한 수조 방법으로 원소를 상반된 방식으로 정렬하는 데 쓰인다.
let arr = ['bob', 'anna', 'elsa', 'marlon'];
console.log(arr.reverse());
출력
["marlon", "elsa", "anna", "bob"]
보시다시피 그룹 요소의 현재 순서는 상반됩니다.이것은 매우 좋지만, 우리는 자주 arrow 방법으로 정렬을 한다.
let arr = ['bob', 'anna', 'elsa', 'marlon'];
let sorted = arr.sort(); // Ascending
let reversed = sorted.reverse(); // Descending

console.log(reversed);
출력
["marlon", "elsa", "bob", "anna"]
그것은 작동할 수 있지만, 의외의 결과를 초래할 수 있다. 왜냐하면 a-b 는 주문 정렬에 사용되지 않고, 단지 반전에 사용되기 때문이다.정렬에 따라 적절한 비교 기능을 사용하십시오.

3, 비 ASCII 문자 정렬 단순화


응용 프로그램에서 ASCII가 아닌 문자로 표시된 비영어 문자열을 만날 수 있습니다.비교 함수에서stringb-a 방법을 사용하여 그것들을 정렬합니다.
let items = ['communiqué', 'zèbre', 'adieu', 'éclair'];

items.sort();
console.log('Without localeCompare', items);

items.sort((a,b) => a.localeCompare(b));
console.log('With localeCompare', items);
출력
Without localeCompare 
[
"adieu", 
"communiqué", 
"zèbre", 
"éclair"
]
With localeCompare 
[
"adieu", 
"communiqué", 
"éclair", 
"zèbre"
]

4. 객체 배열 정렬 = = 값 유형 정렬


JavaScript에서 array.reverse() 는 여러 값을 복잡한 데이터 구조로 저장하는 데 사용됩니다.
괄호reverse() 및 목록reverse()을 사용하여 객체를 작성합니다.localeCompare()objects 맞습니다. 이 중 {…} 은 문자열이어야 하며, properties 은 모든 유형일 수 있습니다.
대상을 정렬하는 것은 주로 특성 값을 바탕으로 정렬하는 것이다.값이 어떤 유형이든지 예시를 통해 여러 가지 정렬을 알 수 있습니다.property물체,
let users = [
    {'name': 'Joe', 'address': 'Huston', 'dob':'February 9, 1991', 'income': 87654},
    {'name': 'Bob', 'address': 'London', 'dob':'July 1, 1986', 'income': 47974},
    {'name': 'Carl', 'address': 'Bangalore', 'dob':'December 25, 1982', 'income': 97351},
    {'name': 'Amanda', 'address': 'Lagos', 'dob':'March 19, 2001', 'income': 57753},
];

이름별 정렬


비교 함수를 사용하여 패턴의 각 객체의 이름을 비교합니다.
 users.sort(function(a, b) {
    let left = a.name;
    let right = b.name;
    return left === right ? 0 : left > right ? 1 : -1;
  });

 console.table(users);
출력

너는 내림차순 정렬을 어떻게 해야 하는지 알고 있니?네, 비교 함수에 약간의 변화가 있습니다. 앞에서 보셨듯이.

수입에 따라 정렬하다


수입치는 숫자다.우리는 여기서 무엇을 하는지 안다.우리는 대상의 수입 가치를 비교할 것이다.
 users.sort((a,b) => (a.income - b.income));
 console.table(users);
출력

생년월일별 정렬 (dob)


사용자는 문자열로 태어난 날짜 (dob 속성) 를 가지고 있습니다.응, 우리는 문자열처럼 그것들을 정렬할 수 없지, 그렇지?우리는 그것들을 날짜에 따라 분류해야 한다.바꿔보자, 우리가 여기서 순서를 낮추는 것은 젊은이들이 수위에 있을 것이라는 것을 의미한다.
users.sort((a,b) => (new Date(b.dob) - new Date(a.dob)));
console.table(users);
출력

5. 대소문자를 구분하지 않는 정렬이 필요할 수 있습니다.


서로 다른 상황 (대문자와 소문자) 의 그룹 요소를 처리해야 할 수도 있습니다.기본 key-value 기능은 도움이 되지 않을 수 있습니다.이것은 혼합 상황 요소를 포함하는 수조이다.
 let names = ['Bob', 'bakshi', 'adam', 'Maya', 'carl'];
 names.sort();
 console.log(names);
출력
["Bob", "Maya", "adam", "bakshi", "carl"]
상술한 출력은 사실상 정확하다. 왜냐하면 비교는 key 단위 순서에 따라 진행되기 때문이다.단, 아래 순서가 필요할 수도 있습니다.
"adam", "bakshi", "Bob", "carl", "Maya"
compare 함수를 사용하여 원소와 value 대소문자를 구분하지 않는 비교를 합니다.
names.sort(function (a, b) {
    let left = a.toUpperCase();
    let right = b.toUpperCase();

    return (left === right) ? 0 : left > right ? 1 : -1;
  });
console.log(names);
출력
["adam", "bakshi", "Bob", "carl", "Maya"]

어쨌든


어레이user는 사용하기 쉽습니다.대부분의 경우 비교 함수가 필요하다.
본문에서 우리는 다섯 가지 관건을 토론했다.
  • 기본값sort() 방법은 그룹 요소를 문자열로 변환하여 오름차순으로 정렬합니다.
  • 를 사용하여 정렬하지 마십시오.이것은 의외의 결과를 초래할 수 있다.
  • 우리는 방법UTF-16 code을 사용하여 toUpperCase() 문자를 정렬할 수 있다.
  • 각종 sort() 에서 정렬해야 하는 많은 대상 그룹을 정렬합니다.
  • array.sort() 경우에 따라 정렬이 필요할 수 있습니다.
  • 네가 그것이 유용하다고 생각하길 바란다.이 문서에 사용된 모든 소스 코드는 GitHub Repo에 있습니다.내가 코드 예시로 그것들을 끊임없이 업데이트함에 따라, 마음대로 따라오세요.

    / 아타파스


    JavaScript 배열 정렬의 다양한 예제 및 프롬프트입니다.


    js 배열 정렬


    JavaScript 배열 정렬의 다양한 예제 및 프롬프트입니다.
    js-array-sorting
    너도 좋아할 수도 있지만,
  • View on GitHub
  • Explain Me Like I am Five: What are ES6 Symbols?
  • Everything you need to know about JavaScript Set
  • How to use JavaScript Collection with Map
  • 10 lesser-known Web APIs you may want to use
  • 만약 그것이 당신에게 유용하다면, 다른 사람에게도 전달될 수 있도록 좋아하거나 나누세요.
    트위터에서 @me()에 댓글을 달거나 언제든지 팔로우할 수 있다.

    좋은 웹페이지 즐겨찾기