Heim >Web-Frontend >js-Tutorial >Wie filtere ich verschachtelte Objekte in JavaScript-Arrays und behalte nur passende Elemente bei?

Wie filtere ich verschachtelte Objekte in JavaScript-Arrays und behalte nur passende Elemente bei?

Barbara Streisand
Barbara StreisandOriginal
2024-10-28 16:10:08845Durchsuche

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

Arrays basierend auf verschachtelten Objekten filtern

In JavaScript kann es vorkommen, dass Sie ein Array von Objekten basierend auf den Werten filtern müssen von verschachtelten Eigenschaften. Um dies zu erreichen, können Sie leistungsstarke Filtertechniken nutzen.

Betrachten Sie das in Ihrer Frage bereitgestellte Beispiel, bei dem das Ziel darin besteht, ein Array von Elementen basierend auf einem bestimmten Nachnamenswert innerhalb ihres verschachtelten „subElements“-Arrays zu filtern. Das Eingabearray ist wie folgt definiert:

<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>

Um dieses Array zu filtern und nur die Elemente abzurufen, deren Array „subElements“ ein Objekt enthält, dessen „Nachname“ auf 1 gesetzt ist, können Sie eine Kombination aus „ filter“ und „einige“ Methoden:

<code class="js">let filteredArray = arrayOfElements.filter((element) => element.subElements.some((subElement) => subElement.surname === 1));</code>

Das Problem bei diesem Ansatz besteht jedoch darin, dass er Objekte mit allen ihren „Unterelementen“ zurückgibt, einschließlich derjenigen, die nicht den Filterkriterien entsprechen. Um dieses Problem zu lösen, können Sie die Funktion „map“ zusammen mit dem Spread-Operator verwenden:

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

Hier wird der Spread-Operator (d. h. „...element“) verwendet, um ein neues Objekt zu erstellen auf das ursprüngliche „Element“, während dessen „subElements“-Eigenschaft mit dem gefilterten Ergebnis überschrieben wird. Mit diesem Ansatz können Sie unerwünschte „subElements“ herausfiltern und gleichzeitig die Struktur des ursprünglichen Arrays beibehalten. Das resultierende „filteredArray“ enthält die gewünschten Objekte mit ihren „subElements“, gefiltert nach dem Kriterium „Nachname“:

<code class="js">[
    {
        "name": "a",
        "subElements": [
           {"surname": 1}
        ]
    },
    {
        "name": "b",
        "subElements": [
           {"surname": 1}
        ]
    }
]</code>

Das obige ist der detaillierte Inhalt vonWie filtere ich verschachtelte Objekte in JavaScript-Arrays und behalte nur passende Elemente bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn