> 웹 프론트엔드 > JS 튜토리얼 > 특정 속성 값(예: 가격)을 기준으로 JavaScript 개체 배열을 정렬하는 방법은 무엇입니까?

특정 속성 값(예: 가격)을 기준으로 JavaScript 개체 배열을 정렬하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-12-24 00:32:09
원래의
396명이 탐색했습니다.

How to Sort an Array of JavaScript Objects by a Specific Property Value (e.g., Price)?

JavaScript에서 속성 값을 기준으로 개체 정렬

객체 배열을 처리할 때 특정 속성 값을 기준으로 정렬하는 것은 관리 및 시각화에 필수적일 수 있습니다. 데이터. JavaScript를 사용하여 이러한 정렬 기능을 구현하는 방법을 살펴보겠습니다.

질문:

홈 데이터를 나타내는 개체 배열이 주어지면 이를 정렬하는 함수를 어떻게 생성합니까? "가격" 속성이 오름차순인가요, 아니면 내림차순인가요?

객체 배열:

다음 주택 배열을 고려하세요.

var homes = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500"
    }, {
        "h_id": "4",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250"
    }, {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500"
    }
];
로그인 후 복사

정렬 기능:

주택 배열을 정렬하려면 다음을 활용할 수 있습니다. 내장된 sort() 메소드. 이 메소드는 인수로 비교 함수를 기대합니다. 비교 함수는 두 요소를 입력으로 사용하고 첫 번째 요소가 두 번째 요소 앞에 와야 하는 경우 음수를 반환하고, 두 번째 요소가 첫 번째 요소 앞에 와야 하는 경우 양수를 반환하며, 요소가 동일한 것으로 간주되면 0을 반환합니다.

오름차순:

주택을 가격에 따라 오름차순으로 정렬하기 위해 주택 가격에서 첫 번째 요소의 가격을 빼는 비교 함수를 정의합니다. 두 번째 요소를 비교하고 차이점을 비교합니다. 차이가 음수인 경우 첫 번째 요소의 가격이 두 번째 가격보다 적고 첫 번째 요소가 두 번째 요소 앞에 와야 함을 의미합니다.

homes.sort(function(a, b) {
    return parseFloat(a.price) - parseFloat(b.price);
});
로그인 후 복사

또는 ES6 구문에서는 다음과 같습니다.

homes.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
로그인 후 복사

내림차순:

내림차순의 경우 비교 기능을 다음과 같이 바꿀 수 있습니다. 첫 번째 요소의 가격에서 두 번째 요소의 가격을 뺍니다.

homes.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));
로그인 후 복사

결과:

정렬 후 주택 배열은 다음을 기준으로 정렬됩니다. 지정된 순서. 수정된 배열을 인쇄하여 정렬을 확인할 수 있습니다.

위 내용은 특정 속성 값(예: 가격)을 기준으로 JavaScript 개체 배열을 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿