JavaScript에서 객체 배열을 정렬하는 방법
이 기사에서는 번거로움 없이 JavaScript에서 객체 배열을 정렬하는 방법을 보여 드리겠습니다.
특정 순서로 정렬해야 하는 객체 배열이 있는 경우 JavaScript 라이브러리에 도달하고 싶은 유혹이 있을 수 있습니다. 그러나 그렇게 하기 전에 기본 Array.sort 함수를 사용하여 꽤 깔끔한 정렬을 수행할 수 있음을 기억하십시오.
이 기사를 따라가려면 변수 선언, 함수 작성, 조건문과 같은 기본 JavaScript 개념에 대한 지식이 필요합니다. 또한 ES6 구문을 사용할 것입니다.
기본 배열 정렬
기본적으로 JavaScript |_+_| 함수는 정렬할 배열의 각 요소를 문자열로 변환하고 비교합니다. 유니코드 코드 포인트 주문하다.
Array.sort왜 30이 4보다 먼저 오는지 궁금할 것입니다. 논리적이지 않습니까? 사실 그렇습니다. 이것은 배열의 각 요소가 먼저 문자열로 변환되고 |_+_| |_+_| 유니코드 순서로.
다른 많은 JavaScript 배열 함수와 달리 |_+_| 실제로 변경하거나 정렬하는 배열을 변경합니다.
const foo = [8, 3, 5, 'whistle', 'fish']; foo.sort(); // returns [3, 5, 8, 'fish', 'whistle'] const bar = [4, 19, 30, function(){}, {key: 'value'}]; bar.sort(); // returns [ 19, 30, 4, { key: 'value' }, [Function] ] 이를 방지하려면 정렬할 배열의 새 인스턴스를 만들고 대신 수정할 수 있습니다.
'30'|_+_| 연산자를 사용하여 |_+_|의 새 인스턴스를 만듭니다. 당신은 그것에 대해 더 읽을 수 있습니다 여기 .
Visual Studio 코드에서 Python 디버그
사용해보기
사용 |_+_| 단독으로는 객체 배열을 정렬하는 데 그다지 유용하지 않습니다. 고맙게도 이 함수는 |_+_| 비교 함수의 반환 값에 따라 배열 요소가 정렬되도록 하는 매개변수입니다.
비교 함수를 사용하여 정렬하기
말해보자 |_+_| 그리고 |_+_| 비교 기능에 의해 비교되는 두 요소입니다. 비교 함수의 반환 값이 다음과 같은 경우:
- 0 미만 — |_+_| |_+_|
- 0보다 큼 — |__+_| |_+_|
- 0과 같음 — |_+_| 그리고 |_+_| 서로에 대해 변경되지 않은 상태로 남아 있습니다.
숫자 배열이 있는 간단한 예를 살펴보겠습니다.
'4'이것은 |_+_|를 빼서 반환 값을 얻기 위해 다소 리팩토링할 수 있습니다. |_+_|에서:
Array.sort이것은 이제 화살표 함수에 대한 좋은 후보입니다.
const baz = ['hello world', 31, 5, 9, 12]; baz.sort(); // baz array is modified console.log(baz); // shows [12, 31, 5, 9, 'hello world'] 화살표 기능에 익숙하지 않다면 여기에서 자세히 읽을 수 있습니다. ES6 화살표 함수: JavaScript의 뚱뚱하고 간결한 구문 .
Angular js 라디오 버튼
JavaScript에서 객체 배열 정렬
이제 객체 배열을 정렬하는 방법을 살펴보겠습니다. 밴드 객체의 배열을 살펴보겠습니다.
const baz = ['hello world', 31, 5, 9, 12]; const newBaz = [...baz].sort(); // new instance of baz array is created and sorted console.log(baz); // 'hello world', 31, 5, 9, 12] console.log(newBaz); // [12, 31, 5, 9, 'hello world'] 다음을 사용할 수 있습니다 |_+_| 장르에 따라 이 객체 배열을 정렬하는 함수:
spread정렬 순서를 반대로 하려면 |_+_| 기능:
Shopify 데이터 과학자 인터뷰
baz사용해보기
동적 정렬 함수 만들기
더 역동적으로 만들어 마무리하겠습니다. 값이 문자열이나 숫자인 객체 배열을 정렬하는 데 사용할 수 있는 정렬 함수를 만들어 보겠습니다. 이 함수에는 두 개의 매개변수가 있습니다. 정렬할 키와 결과의 순서(예: 오름차순 또는 내림차순)입니다.
Array.sort그리고 이것이 당신이 그것을 사용하는 방법입니다:
compareFunction사용해보기
위의 코드에서, hasOwnProperty 메서드 지정된 속성이 각 개체에 정의되어 있고 정의되지 않았는지 확인하는 데 사용됩니다. 프로토타입 체인을 통해 상속됨 . 객체에 정의되지 않은 경우 함수는 |_+_|를 반환하여 정렬 순서가 그대로 유지되도록 합니다(즉, 객체가 서로에 대해 변경되지 않은 상태로 유지됨).
NS typeof 연산자 속성 값의 데이터 유형을 확인하는 데에도 사용됩니다. 이를 통해 함수는 배열을 정렬하는 적절한 방법을 결정할 수 있습니다. 예를 들어, 지정된 속성의 값이 |_+_|이면 |_+_| 메서드는 모든 문자를 대문자로 변환하는 데 사용되므로 정렬할 때 문자 대/소문자가 무시됩니다.
위의 기능을 조정하여 다른 데이터 유형과 스크립트에 필요한 기타 특성을 수용할 수 있습니다.
eslint @typescript가 더 예쁘다
String.prototype.localeCompare()
위의 예에서 우리는 값이 문자열이나 숫자인 객체의 배열을 정렬할 수 있기를 원합니다. 그러나 값이 문자열인 객체만 다룰 것이라는 것을 안다면 JavaScript의 |_+_|를 사용하여 코드를 약간 정리할 수 있습니다. 방법.
이 메서드는 문자열이 정렬 순서에서 지정된 문자열의 앞, 뒤에 또는 같은지 여부를 나타내는 숫자를 반환합니다. 대소문자를 구분하지 않는 배열을 활성화합니다.
a우리의 |_+_| 즉, 다음과 같이 작성할 수 있습니다.
b당신은에 대해 더 읽을 수 있습니다 로케일 MDN에서 비교 .
결론
여기까지 왔습니다. 객체 배열 정렬에 대한 간략한 소개입니다. 많은 JavaScript 라이브러리가 이러한 종류의 동적 정렬 기능을 제공하지만(예: 밑줄.js , 로다쉬 그리고 설탕 ), 설명된 대로 이러한 종류의 기능을 직접 구현하는 것은 그리 어렵지 않습니다.
질문이나 의견이 있으면 언제든지 대화를 시작하십시오.
원래 Olayinka Omole이 발행한 사이트포인트닷컴
#자바스크립트