Leitfaden zur effizienten Filterung verschachtelter Objektarrays basierend auf komplexen Bedingungen in JavaScript

In diesem Tutorial wird die Verwendung von Filter (), einigen () und allen () -Methoden in JavaScript verwendet, um ein anderes Array, das verschachtelte Objektoptionen enthält, effizient zu filtern, die auf einer komplexen Reihe von bedingten Arrays basieren. Wir werden einen realen Fall verwenden, um detailliert zu analysieren, wie die Logik erstellt wird, um eine genaue Datenfilterung zu erzielen, um sicherzustellen, dass nur Elemente, die alle angegebenen Bedingungen entsprechen, erhalten bleiben.

Einführung

In der modernen Webentwicklung ist die Verarbeitung und Filterung komplexer Datenstrukturen eine häufige Aufgabe. Insbesondere wenn Daten in Form von verschachtelten Objektarrays und Filterbedingungen gleichermaßen komplex sind, wird das Schreiben von Code, das sowohl effizient als auch einfach zu lesen ist, zur Herausforderung. Dieses Tutorial konzentriert sich auf ein typisches Szenario: Filtern des Primärdatenarrays basierend auf einem Array von Objekten, die mehrere Unterabstände enthalten, wobei jedes Element des Primärdatenarrays auch ein Array von Optionsobjekten enthält. Wir werden JavaScripts leistungsstarke Funktionen höherer Ordnung filter (), einige () und alle () verwenden, um dieses Problem anmutig zu lösen.

Problemszenarien und Datenstruktur

Angenommen, wir haben eine Reihe von Produkten, jedes Produktobjekt enthält eine Reihe von Optionen, die verschiedene Eigenschaften des Produkts (z. B. Größe, Farbe) beschreiben. Gleichzeitig haben wir auch ein Bedingungsarray, das die Bedingungen definiert, die wir für die Produkte treffen müssen, die wir herausfiltern möchten. Jede Bedingung selbst ist auch ein Array, das mehrere Attribut-/Wertpaare enthält, die angibt, dass ein Produkt diese Attribute gleichzeitig erfüllen muss, bevor es ausgewählt werden kann.

Beispiel für Originaldaten:

 Const Products = [
  {
    Optionen: [
       {ID: 1, Name: 'Größe', Wert: '10'},
       {ID: 2, Name: 'Farbe', Wert: 'gelb'},
    ],
  },
  {
    Optionen: [
       {ID: 1, Name: 'Größe', Wert: '20'},
       {ID: 2, Name: 'Farbe', Wert: 'gelb'},
    ],
  },
  {
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '10'},
      {id: 2, name: 'color', value: 'pink'},
    ],
  },
  { 
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '20'},
      {ID: 2, Name: 'Farbe', Wert: 'Pink'}
    ],
  },
  {
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '39'},
      {id: 2, name: 'color', value: 'pink'},
    ],
   },
];

Beispiel für Filterkriterien:

 constbedingungen = [
  [
    {Name: 'Größe', Wert: '10'},
    {Name: 'Farbe', Wert: 'gelb'},
  ],
  [
    {Name: 'Größe', Wert: '10'},
    {Name: 'Farbe', Wert: 'Pink'},
  ],
];

Unser Ziel ist es, alle Produkte herauszufiltern, die ein bestimmtes Array erfüllen. Wenn beispielsweise ein Produkt sowohl "Größe 10 als auch Color Yellow" oder "Größe 10 und Color Pink" gleichzeitig erfüllt, sollte das Produkt in die Ergebnisse einbezogen werden.

Erwartete Ausgabe:

 const outputproducts = [
  {
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '10'},
      {ID: 2, Name: 'Farbe', Wert: 'gelb'},
    ],
  },
  {
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '10'},
      {id: 2: 'color', value: 'pink'},
    ],
  },
];

Analyse häufiger Missverständnisse

Bei dem Versuch, solche Probleme zu lösen, besteht ein häufiger Fehler für Anfänger darin, einige () und jede () anwendbare Szenarien zu verwechseln oder die Logik in verschachtelten Schleifen nicht richtig zu entsprechen. Zum Beispiel konnte der folgende vorläufige Code, obwohl Filter, Find und Jedes, die erwarteten Ergebnisse nicht erzielt:

 const filterproducts = products.filter ((el) => {
   return el.options.find ((o) => {// traversale Produktoptionen Rückgabebedingungen
       // Tatsächlich sollten wir überprüfen, ob alle Optionen "El.Options" eines Produkts alle Unterkonditionen in der Bedingungsgruppe `m` erfüllen.
       return m.Every (({name, value}) => o.name == name && o.value === value);
     });
   });
 });

Der Fehler des obigen Code ist, dass das interne von M.Every (...) erwartete, ob jede Unterkondition im M -Array mit O (Einzelproduktoption) erfüllt ist. Eine Produktoption O repräsentiert jedoch normalerweise nur ein Attribut (z. B. Größe oder Farbe), und es ist unmöglich, alle Unterausgänge in der Bedingungsgruppe M gleichzeitig zu erfüllen (z. B. kann O nicht sowohl die Größe: "10" und "Farbe": "Gelb" sein). Die richtige Logik sollte sein, dass wir für jede Unterkondition in einer Bedingungsgruppe M prüfen müssen, ob im Optionsarray des aktuellen Produkts eine Übereinstimmungsoption vorhanden ist.

Lösung: Verwenden Sie filter (), einige (), jede () Kombination

Der Schlüssel zur Lösung dieses Problems besteht darin, den filter (), einige () und jede () korrekte logische Strömungen zu nisten.

1. filter () : Die äußerste Schicht, mit der das Produktarray durchquert und einzelne Produkte herausgefiltert wird, die den Kriterien erfüllen.
2. Einige () (interne erste Schicht) : durchquert das Bedingungen Array. Für jedes Produkt müssen wir prüfen, ob sie eine Konditionsgruppe in den Bedingungen Array erfüllt. Solange eine Zustandsgruppe erfüllt ist, sollte das Produkt beibehalten werden.
3. jede () (interne zweite Ebene) : Iteriert über die aktuell ausgewählte Bedingung (eine Bedingungsgruppe, z. Für jede Unterkondition in dieser Bedingungsgruppe (z. B. {Name: 'Größe', Wert: '10'}) muss das Produkt es erfüllen.
4. Einige () (interne dritte Schicht) : Iteriert über das Optionsarray des aktuellen Produkts. Für jede Unterkondition in jedem () müssen wir überprüfen, ob in den Produktoptionen mindestens eine Option vorhanden ist.

Komplette Lösungscode:

 Const Products = [
  {
    Optionen: [
       {ID: 1, Name: 'Größe', Wert: '10'},
       {ID: 2, Name: 'Farbe', Wert: 'gelb'},
    ],
  },
  {
    Optionen: [
       {ID: 1, Name: 'Größe', Wert: '20'},
       {ID: 2, Name: 'Farbe', Wert: 'gelb'},
    ],
  },
  {
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '10'},
      {id: 2, name: 'color', value: 'pink'},
    ],
  },
  { 
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '20'},
      {ID: 2, Name: 'Farbe', Wert: 'Pink'}
    ],
  },
  {
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '39'},
      {id: 2, name: 'color', value: 'pink'},
    ],
   },
];

constbedingungen = [
  [
    {Name: 'Größe', Wert: '10'},
    {Name: 'Farbe', Wert: 'gelb'},
  ],
  [
    {Name: 'Größe', Wert: '10'},
    {Name: 'Farbe', Wert: 'Pink'},
  ],
];

const filterproducts = products.filter (product =>
  // 1. Für jedes Produkt prüfen Sie, ob sie eine Bedingungsgruppe in den Array -Bedingungen "Bedingungen" erfüllt.
    // 2. Für die aktuelle Bedingungsgruppe 'Bedingung' prüfen Sie, ob alle Unterkonditionen mit der Produktbedingung erfüllt sind. Jeder ({Name, Wert}) =>
      // 3. für jede Unterkondition in 'Zustand' (wie {Name: 'Größe', Wert: '10'}),
      // Überprüfen Sie, ob im "Options -Array" des aktuellen Produktprodukts eine Übereinstimmungsoption vorhanden ist.
    )
  )
);

console.log (filterproducts);
/*
Ausgangsergebnis:
[
  {
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '10'},
      {ID: 2, Name: 'Farbe', Wert: 'gelb'}
    ]
  },
  {
    Optionen: [
      {ID: 1, Name: 'Größe', Wert: '10'},
      {ID: 2, Name: 'Farbe', Wert: 'Pink'}
    ]
  }
]
*/

Code analysieren

• products.filter (product => ...) : Dies ist der Ausgangspunkt des gesamten Filterbetriebs. Es iteriert jedes Produktobjekt im Produktarray. Wenn die interne anonyme Funktion true zurückgibt, wird das Produkt in das Filterprodukter -Ergebnis -Array aufgenommen.
• Conditions.Some (Bedingung => ...) : Für das aktuelle Produkt überprüfen wir das Bedingungen Array. Die Methode für einige () wird in den Bedingungen (d. H. Eine Zustandsgruppe) über jede Bedingung iteriert. Solange eine interne Rückruffunktion einer Bedingungsgruppe true zurückgibt, wird einige () sofort zurückgegeben, was darauf hinweist, dass das aktuelle Produkt mindestens einer Bedingungsgruppe trifft und vom Filter beibehalten wird.
• Condition.Every (({Name, Wert}) => ...) : Wenn einige () in eine Bedingungsgruppe überquert, überprüft die Methode jeder () alle Unterkonditionen in dieser Bedingungsgruppe (Name und Wert erhalten Sie durch Dekonstruktion der Zuordnung). Jeder () kehrt nur dann wahr, wenn alle Kinderbedingungen in der Bedingungsgruppe erfüllt sind. Dies stellt sicher, dass die Produkte, die wir herausfiltern, alle Attribute innerhalb einer Bedingungsgruppe gleichzeitig erfüllen müssen.
• product.options.some (option => option.name === name && option.value === Wert) : Dies ist die innerste passende Logik. Für jede untergeordnete Bedingung, die die Methode jeder () überprüft (z. B. (Name: 'Größe', Wert: '10'}), iterieren wir das Optionsarray des aktuellen Produkts. Die Methode einige () prüft, ob mindestens eine Option in Produktoptionen vorhanden ist, deren Name und Wert genau mit der untergeordneten Bedingung übereinstimmen. Wenn er gefunden wird, wird True zurückgegeben, was darauf hinweist, dass die Unterkondition erfüllt ist.

Diese verschachtelte Struktur implementiert genau die Logik, dass "das Produkt jede Bedingungsgruppe im Zustandsarray erfüllt, und alle Unterkonditionen in jeder Bedingungsgruppe werden mit einer beliebigen Option des Produkts selbst übereinstimmen."

Notizen und Best Practices

1. Logische Klarheit : Obwohl diese mehrschichtige Funktion höherer Ordnung leistungsstark ist, kann der Code schwierig zu verstehen und zu behalten, wenn er missbraucht wird oder die Logik nicht klar ist. Stellen Sie sicher, dass die Verantwortlichkeiten jedes Filters, einige und alle klar sind.
2. Leistungsüberlegungen : Bei sehr großen Datensätzen können solche verschachtelten Schleifen in mehreren Schichten Leistungsaufwand aufweisen. Wenn die Leistung zu einem Engpass wird, können andere Optimierungsstrategien berücksichtigt werden, z. B. die Vorverarbeitungsdaten, die MAP für schnelle Lookups oder in einigen Fällen mit herkömmlichen Schleifen für feinere Kontrolle verwenden. Für die meisten Webanwendungsszenarien ist dieser Ansatz jedoch akzeptabel und hat eine bessere Code -Lesbarkeit.
3. Leere Array -Verarbeitung : Betrachten Sie das Verhalten, wenn Produkte oder Bedingungen leere Arrays sind. Bei der Verarbeitung leerer Arrays, Filter, einige, jeder usw. Methode geben die erwarteten Ergebnisse normalerweise zurück (zum Beispiel gibt einige bei leeren Arrays falsche zurück, und alles kehrt wahr), aber sie müssen trotzdem gemäß der spezifischen Geschäftslogik getestet werden.
4. Strenge Gleichheit : Verwenden Sie bei Vergleich von Namen und Wert === (streng Gleichheit) anstelle von ==, um potenzielle Konvertierungsprobleme zu vermeiden.

Zusammenfassen

Durch geschicktes Kombinieren von Filter (), einigen () und allen () Methoden von JavaScript -Arrays können wir das Problem der Filterung verschachtelter Objektarrays effizient und anmutig lösen, basierend auf komplexen Bedingungen. Dieses Muster bietet nicht nur starke Funktionen für Datenüberprüfungen, sondern verbessert auch die Lesbarkeit und Deklarativität des Codes. Das Verständnis des Verhaltens dieser Funktionen höherer Ordnung und deren Anwendbarkeit in verschiedenen Szenarien ist ein wichtiger Schritt, um ein hervorragender JavaScript-Entwickler zu werden. Priorisieren Sie diese Lösung für die funktionale Programmierung, wenn Sie mit ähnlichen Datenverarbeitungsherausforderungen konfrontiert sind.

Das obige ist der detaillierte Inhalt vonLeitfaden zur effizienten Filterung verschachtelter Objektarrays basierend auf komplexen Bedingungen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!