JavaScript 배열에서 중첩된 개체를 필터링하고 일치하는 요소만 유지하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-10-28 16:10:08
원래의
834명이 탐색했습니다.

How to Filter Nested Objects in JavaScript Arrays and Keep Only Matching Elements?

중첩 객체를 기반으로 배열 필터링

JavaScript에서는 값을 기반으로 객체 배열을 필터링해야 하는 시나리오가 발생할 수 있습니다. 중첩된 속성의 이를 달성하려면 강력한 필터링 기술을 활용할 수 있습니다.

중첩된 "하위 요소" 배열 내의 특정 성 값을 기반으로 요소 배열을 필터링하는 것이 목표인 질문에 제공된 예를 생각해 보세요. 입력 배열은 다음과 같이 정의됩니다.

<code class="js">let arrayOfElements = [
    {
       "name": "a",
       "subElements": [
          {"surname": 1},
          {"surname": 2}
       ]
    },
    {
       "name": "b",
       "subElements": [
          {"surname": 3},
          {"surname": 1}
       ]
    },
    {
       "name": "c",
       "subElements": [
          {"surname": 2},
          {"surname": 5}
       ]
    }
];</code>
로그인 후 복사

이 배열을 필터링하고 "subElements" 배열에 "surname"이 1로 설정된 개체가 포함된 요소만 검색하려면 " filter" 및 "some" 메서드:

<code class="js">let filteredArray = arrayOfElements.filter((element) => element.subElements.some((subElement) => subElement.surname === 1));</code>
로그인 후 복사

그러나 이 접근 방식의 문제는 필터 기준과 일치하지 않는 항목을 포함하여 모든 "하위 요소"가 포함된 개체를 반환한다는 것입니다. 이 문제를 해결하려면 스프레드 연산자와 함께 "맵" 기능을 사용할 수 있습니다.

<code class="js">filteredArray = arrayOfElements.map((element) => {
  return {...element, subElements: element.subElements.filter((subElement) => subElement.surname === 1)}
})</code>
로그인 후 복사

여기서는 스프레드 연산자(예: "...element")를 사용하여 기반으로 새 객체를 생성합니다. 필터링된 결과로 "subElements" 속성을 재정의하는 동시에 원래 "요소"에 적용합니다. 이 접근 방식을 사용하면 원래 배열의 구조를 유지하면서 원치 않는 "하위 요소"를 필터링할 수 있습니다. 결과 "filteredArray"에는 "성" 기준에 따라 필터링된 "subElements"와 함께 원하는 개체가 포함됩니다.

<code class="js">[
    {
        "name": "a",
        "subElements": [
           {"surname": 1}
        ]
    },
    {
        "name": "b",
        "subElements": [
           {"surname": 1}
        ]
    }
]</code>
로그인 후 복사

위 내용은 JavaScript 배열에서 중첩된 개체를 필터링하고 일치하는 요소만 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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