Sort () 메소드와 함께 javaScript의 객체 배열을 정렬합니다.

javaScript aviL

메소드는 객체 배열을 쉽게 정렬 할 수도 있습니다! 이 기사는 메소드를 사용하여 문자열, 숫자 및 날짜를 ​​포함하는 객체 배열을 정렬하는 방법을 보여주고 케이스 감도, 배열 복사 및 공통 라이브러리를 처리하기위한 실용적인 팁을 제공합니다.

Array.sort 코어 포인트 Array.sort

javaScript의 네이티브 메소드는 비교 함수를 사용하여 문자열, 숫자, 날짜 및 기타 속성에 대한 정렬 로직을 정의하는 객체 배열을 정렬하는 데 사용할 수 있습니다. JavaScript의 비교 함수는 정렬 순서를 결정하기 위해 숫자를 반환합니다. 정수가 0보다 작 으면 첫 번째 요소가 0보다 크면 첫 번째 요소가 나타납니다.

는 문자열 또는 숫자 값을 사용하여 객체 배열을 정렬 할 수있는 동적 분류 함수를 생성 할 수 있습니다. 이 함수는 지정된 키에 따라 오름차순 또는 내림차순으로 정렬 할 수 있습니다.

메소드는 정렬 된 원본 배열을 수정합니다. 이를 피하기 위해 Array.sort 메소드 또는 확장 연산자를 사용하여 새 배열 인스턴스를 생성하고 정렬 할 수 있습니다.
기본 배열 정렬 (그리고 작동하지 않는 이유)
• 기본적으로 JavaScript
메소드는 배열에서 각 요소를 문자열로 정렬 해야하는 각 요소를 변환하여 유니 코드 코드 포인트 순서로 비교합니다.
• Array.sort 왜 32가 5 세 이전에 왜 궁금 할 것입니까? 불합리한 것 같습니다. 실제로는 그렇지 않습니다. 배열의 각 요소가 먼저 문자열로 변환되고 "32"는 유니 코드 순서의 "5"이전이기 때문입니다. Array.slice

를 사용하려면 객체 배열을 정렬하는 데만 효율적으로 정렬 할 수 없습니다. 다행히 메소드는 객체 배열을 정렬하는 데 사용할 수있는 옵션

매개 변수를 허용합니다. javaScript로 객체 배열을 정렬하는 방법

객체 배열을 정렬하려면 비교 함수와 함께 Array.sort 메소드를 사용하십시오. 비교 함수는 규칙을 적용하고 사용자 정의 논리에 따라 배열을 정렬합니다. 그들은 우리가 문자열, 정수, 날짜 또는 기타 사용자 정의 속성으로 객체 배열을 정렬 할 수있게합니다. 이 기사의 뒷부분에서 비교 기능이 어떻게 작동하는지 설명 할 것입니다.

이 데모에서, 우리는 가수 배열을 사용하여 밴드 이름으로 알파벳순으로 분류 할 것입니다 :

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

다음 비교 함수는 각 밴드의 (캡슐) 이름을 비교합니다.

정렬 순서를 뒤집으려면 비교 함수의 반환 값을 반전시킬 수 있습니다.

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

비교 기능은 어떻게 작동합니까 <🎜 🎜> 비교 함수는 두 입력 (a 및 b)을 비교하여 정렬 순서를 결정하는 데 사용되는 숫자를 반환합니다. 간단히 말해서, 정수가 0보다 작 으면 B 앞에 A가 나타납니다. 그러나이 숫자를 결정하는 방법은 귀하에게 달려 있습니다.

간단한 숫자 배열을 봅시다 :

A에서 B를 빼면 값을 반환하기 때문에 우리는 그것에 대해 약간의 리팩토링을 할 수 있습니다. 이 비교 함수는 숫자 배열을 작은 것에서 큰 것까지 정렬합니다.

다른 곳에서 비교 함수를 정의하지 않고 화살표 함수로 표시 될 수도 있습니다.

화살표 함수에 익숙하지 않은 경우 여기에서 자세한 내용을 읽을 수 있습니다. JavaScript의 화살표 기능.

알 수 있듯이 비교 함수는 여러 가지 방법으로 작성 될 수 있으며

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

메소드는 지시대로 실행됩니다.

동적 분류 함수를 만듭니다 더 역동적으로 만들기 위해 이전 예제를 완료합시다. 값이 문자열 또는 숫자 인 객체 배열을 정렬하는 데 사용할 수있는 정렬 함수를 만들어 봅시다. 이 기능에는 두 가지 매개 변수가 있습니다. 정렬하려는 키와 결과 순서 (예 : 오름차순 또는 내림차순) : <🎜 🎜>

사용 방법은 다음과 같습니다

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

위 코드에서 <🎜 🎜> 메소드는 지정된 속성이 각 객체에 정의되어 있고 프로토 타입 체인을 통해 상속되지 않은지 확인하는 데 사용됩니다. 두 객체 모두에서 정의되지 않으면 함수는 0을 반환하여 정렬 순서가 변경되지 않은 상태로 유지됩니다 (즉, 객체는 서로에 대해 변경되지 않음). <p> <🎜 🎜> </p> 연산자는 또한 속성 값의 유형을 확인하는 데 사용됩니다. 이를 통해 함수는 배열을 정렬하는 올바른 방법을 결정할 수 있습니다. 예를 들어, 지정된 속성의 값이 문자열 인 경우 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function compare(a, b) { // ... // 通过乘以 -1 反转返回值 return comparison * -1; }</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 메소드는 모든 문자를 대문자로 변환하는 데 사용되므로 정렬 할 때 문자 케이스가 무시됩니다. <p> <the> 다른 데이터 유형에 맞게 위의 기능을 조정할 수 있으며 스크립트에 필요한 다른 요구 사항이 있습니다. </p> <p> <<> 인기있는 배열 분류 라이브러리 <code>sort() <🎜 🎜> 당신은 기본 JavaScript에서 자신의 정렬 기능을 만들 시간이나 인내가 없을 수 있습니다. 시간은 돈이며 코드는 시간이 걸립니다. 다행히 모든 배열 분류 요구 사항을 충족 할 수있는 다양한 라이브러리가 있습니다. 다음은 분류 기능을 포함하는 일부 보조 라이브러리의 짧은 목록입니다 ... 특정 순서 없음;) <🎜 🎜>

배열-조트 <🎜 🎜> <..> aUNDSCORE.js <🎜 🎜> <<> sugarjs <🎜 🎜> <🎜 🎜> lodash <🎜 🎜>

빠른 팁 : 날짜별로 객체 배열을 정렬하십시오 날짜 문자열별로 객체 배열을 정렬하려면 먼저 날짜 문자열을 구문 분석하고 서로를 빼는 비교 함수 만 제공하면됩니다.

<🎜 🎜> <<> 빠른 팁 : 배열을 수정하지 않고 정렬 <🎜

다른 많은 javaScript 배열 함수와 달리

는 새 배열을 반환하는 대신 종류의 배열을 변경 (수정) 할 방법 중 하나입니다. 이를 피하기 위해 배열의 새 인스턴스를 만들고 수정할 수 있습니다. 배열 메소드 또는 확장자 구문을 사용하여 배열 사본을 작성하는 데 사용할 수 있습니다. Array.sort

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // 返回 [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // 返回 [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

: <🎜 🎜>를 사용하여 배열 사본을 만듭니다

<,> 또는 확장 연산자를 사용하여 동일한 효과를 얻을 수 있습니다. Array.slice 두 경우 모두 출력은 동일하며 객체 배열을 정렬하기 전에 사용할 수 있습니다.

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

<🎜 🎜> <<> 빠른 팁 : insensitive 방식 <🎜 🎜> <🎜 🎜>의 경우 문자열 별 배열 분류 이전 예에서는 문자열이나 숫자 인 값을 가진 객체 배열을 정렬하고 싶었습니다. 그러나 값이 문자열 인 객체 만 처리한다는 것을 알고 있다면 JavaScript의 <🎜

메소드를 사용하여 코드를 구성 할 수 있습니다.

이 메소드는 문자열이 정렬 순서의 주어진 문자열과 전, 후 또는 동일한 지 여부를 나타내는 숫자를 반환합니다. 사례에 민감하지 않은 배열 정렬을 허용합니다

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* 返回 [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

우리의 <🎜 🎜> 함수 측면에서, 이것은 우리가 이런 식으로 쓸 수 있음을 의미합니다.

당신은 mdn에서

에 대해 자세히 읽을 수 있습니다.

function compare(a, b) {
  // ...
  // 通过乘以 -1 反转返回值
  return comparison * -1;
}

<🎜 🎜> <<> 결론

< -> 그게 IT- 기본 JavaScript를 사용하여 객체를 분류하는 짧은 소개입니다. 많은 라이브러리 가이 동적 분류 기능을 제공하지만 볼 수 있듯이이 기능을 직접 구현하는 것은 어렵지 않습니다. 또한 무대 뒤에서 무슨 일이 일어나고 있는지 아는 것이 도움이됩니다. 기본 JavaScript의 기초에 대한보다 포괄적 인 이해를 구축하려면 초보자부터 닌자에 이르기까지 JavaScript를 권장합니다. ES6을 포함하여 처음부터 자바 스크립트를 배우고 다양한 프로젝트를 통해 새로운 지식을 연습하십시오.

JavaScript에서 객체 배열을 정렬하는 방법에 대한 <🎜 🎜> <<> faq