Guide pour filtrer efficacement les tableaux d'objets imbriqués basés sur des conditions complexes en JavaScript

Ce tutoriel plongera dans la façon d'utiliser Filter (), certaines () et toutes les méthodes () en JavaScript pour filtrer efficacement un autre tableau contenant des options d'objets imbriquées basées sur un ensemble complexe de tableaux conditionnels. Nous utiliserons un vrai cas pour analyser en détail comment créer une logique pour réaliser un filtrage précis des données, garantissant que seuls les éléments qui correspondent toutes les conditions spécifiées sont conservées.

introduction

Dans le développement Web moderne, le traitement et le filtrage des structures de données complexes sont une tâche courante. Surtout lorsque les données existent sous la forme de réseaux d'objets imbriqués et de conditions de filtrage sont également complexes, comment écrire du code à la fois efficace et facile à lire devient un défi. Ce didacticiel se concentrera sur un scénario typique: filtrer le tableau de données principal basé sur un tableau d'objets contenant plusieurs sous-conditions, où chaque élément du tableau de données principal contient également un tableau d'options d'options. Nous utiliserons les puissantes fonctions d'ordre supérieur de JavaScript Filter (), certains () et chaque () pour résoudre ce problème gracieusement.

Scénarios de problème et structure de données

Supposons que nous ayons une gamme de produits, chaque objet de produit contient une gamme d'options, qui décrit diverses propriétés du produit (telles que la taille, la couleur). Dans le même temps, nous avons également un tableau de condition qui définit les conditions que nous devons remplir pour les produits que nous voulons filtrer. Chaque condition elle-même est également un tableau contenant plusieurs paires d'attribut / valeur, indiquant qu'un produit doit satisfaire ces attributs en même temps avant qu'il ne puisse être sélectionné.

Exemple de données d'origine:

 Const Products = [
  {
    Options: [
       {id: 1, nom: 'size', valeur: '10'},
       {id: 2, nom: 'couleur', valeur: 'jaune'},
    ],
  },
  {
    Options: [
       {id: 1, nom: 'size', valeur: '20'},
       {id: 2, nom: 'couleur', valeur: 'jaune'},
    ],
  },
  {
    Options: [
      {id: 1, nom: 'size', valeur: '10'},
      {id: 2, nom: 'couleur', valeur: 'rose'},
    ],
  },
  { 
    Options: [
      {id: 1, nom: 'size', valeur: '20'},
      {id: 2, nom: 'couleur', valeur: 'rose'}
    ],
  },
  {
    Options: [
      {id: 1, nom: 'size', valeur: '39'},
      {id: 2, nom: 'couleur', valeur: 'rose'},
    ],
   },
]]

Exemple de critères de filtre:

 Conditions const = [
  [
    {nom: 'size', valeur: '10'},
    {nom: 'couleur', valeur: 'jaune'},
  ],
  [
    {nom: 'size', valeur: '10'},
    {nom: 'Color', valeur: 'rose'},
  ],
]]

Notre objectif est de filtrer tous les produits qui répondent à tout tableau conditionnel. Par exemple, si un produit rencontre à la fois "taille 10 et couleur jaune" ou "taille 10 et couleur rose" en même temps, le produit doit être inclus dans les résultats.

Sortie attendue:

 const OutputProducts = [
  {
    Options: [
      {id: 1, nom: 'size', valeur: '10'},
      {id: 2, nom: 'couleur', valeur: 'jaune'},
    ],
  },
  {
    Options: [
      {id: 1, nom: 'size', valeur: '10'},
      {id: 2: 'couleur', valeur: 'rose'},
    ],
  },
]]

Analyse des malentendus communs

Lorsque vous essayez de résoudre de tels problèmes, une erreur courante pour les débutants est de confondre certains () et tous les scénarios applicables (), ou de ne pas faire correspondre correctement la logique dans les boucles imbriquées. Par exemple, le code provisoire suivant, bien que l'utilisation du filtre, de la recherche et de chaque, n'a pas réussi à obtenir les résultats attendus:

 const FilterProducts = ProductS.Filter ((el) => {
   return el.options.find ((o) => {// Options du produit de traversée Return condition.find ((m) => {// Groupes de conditions de traversée // La logique ici est mauvaise: il essaie de faire une option de produit `o` correspondez à toutes les sous-conditions de l'ensemble du groupe de conditions de condition` M`.
       // En fait, nous devons vérifier si toutes les options «el.options» d'un produit répondent à toutes les sous-conditions du groupe de conditions «M».
       return M.Every (({name, value}) => o.name == name && o.value === valeur);
     });
   });
 });

L'erreur du code ci-dessus est que ce qui est attendu en interne par M.Every (...) est de vérifier si chaque sous-condition dans le tableau M est satisfaite par O (option de produit unique). Cependant, une option de produit O ne représente généralement qu'un seul attribut (tel que la taille ou la couleur), et il est impossible de satisfaire toutes les sous-conditions dans le groupe de condition M en même temps (par exemple, O ne peut pas être à la fois la taille: «10» et la couleur: «jaune»). La logique correcte doit être que pour chaque sous-condition d'un groupe de conditions M, nous devons vérifier s'il existe une option de correspondance dans le tableau d'options du produit actuel.

Solution: Utilisez Filter (), certains (), chaque combinaison ()

La clé pour résoudre ce problème est de nidiquer correctement Filter (), certains () et chaque () pour créer des flux logiques précis.

1. Filter () : la couche la plus externe, utilisée pour traverser le tableau des produits et filtrer les produits individuels qui répondent aux critères.
2. certains () (première couche interne) : traverse le tableau des conditions. Pour chaque produit, nous devons vérifier s'il satisfait un groupe de conditions dans le tableau des conditions. Tant qu'un groupe d'états est rempli, le produit doit être conservé.
3. chaque () (deuxième couche interne) : itéère sur la condition actuellement sélectionnée (un groupe de conditions, par exemple [{nom: 'size', valeur: '10'}, {name: 'couleur', valeur: 'jaune'}]). Pour chaque sous-condition de ce groupe de conditions (par exemple {nom: 'taille', valeur: '10'}), le produit doit le satisfaire.
4. un peu () (troisième couche interne) : itère sur le tableau des options du produit actuel. Pour chaque sous-condition dans chaque (), nous devons vérifier s'il y a au moins une option dans les options de produit qui la correspondent.

Code de solution complet:

 Const Products = [
  {
    Options: [
       {id: 1, nom: 'size', valeur: '10'},
       {id: 2, nom: 'couleur', valeur: 'jaune'},
    ],
  },
  {
    Options: [
       {id: 1, nom: 'size', valeur: '20'},
       {id: 2, nom: 'couleur', valeur: 'jaune'},
    ],
  },
  {
    Options: [
      {id: 1, nom: 'size', valeur: '10'},
      {id: 2, nom: 'couleur', valeur: 'rose'},
    ],
  },
  { 
    Options: [
      {id: 1, nom: 'size', valeur: '20'},
      {id: 2, nom: 'couleur', valeur: 'rose'}
    ],
  },
  {
    Options: [
      {id: 1, nom: 'size', valeur: '39'},
      {id: 2, nom: 'couleur', valeur: 'rose'},
    ],
   },
]]

Conditions const = [
  [
    {nom: 'size', valeur: '10'},
    {nom: 'couleur', valeur: 'jaune'},
  ],
  [
    {nom: 'size', valeur: '10'},
    {nom: 'Color', valeur: 'rose'},
  ],
]]

const FilterProducts = ProductS.filter (produit =>
  // 1. Pour chaque produit, vérifiez s'il satisfait un groupe de conditions dans les conditions de tableau des «conditions».
    // 2. Pour la «condition» du groupe des conditions actuelles, vérifiez si toutes ses sous-conditions sont satisfaites par la condition du produit.
      // 3. Pour chaque sous-condition en 'condition' (comme {name: 'size', valeur: '10'}),
      // Vérifiez s'il existe une option de correspondance dans le tableau 'Options' du produit actuel produit.options.some (option => option.name === name && option.value === valeur)
    )
  )
));

console.log (filterProducts);
/ *
Résultat de sortie:
[
  {
    Options: [
      {id: 1, nom: 'size', valeur: '10'},
      {id: 2, nom: 'couleur', valeur: 'jaune'}
    ]]
  },
  {
    Options: [
      {id: 1, nom: 'size', valeur: '10'},
      {id: 2, nom: 'couleur', valeur: 'rose'}
    ]]
  }
]]
* /

Analyse de code

• ProductS.filter (produit => ...) : Il s'agit du point de départ de l'ensemble de l'opération de filtrage. Il itère sur chaque objet de produit de la matrice de produits. Si la fonction anonyme interne renvoie true, le produit sera inclus dans le tableau des résultats des producteurs de filtre.
• Conditions.Some (condition => ...) : Pour le produit actuel, nous vérifions le tableau des conditions. La méthode Some () itérera sur chaque condition dans les conditions (c'est-à-dire un groupe de conditions). Tant qu'une fonction de rappel interne d'un groupe de conditions renvoie vrai, certains () seront immédiatement renvoyés vrai, indiquant que le produit actuel répond au moins un groupe de conditions et est conservé par filtre.
• Condition.Every (({nom, valeur}) => ...) : Lorsque certains () se transforment en groupe de conditions, la méthode chaque () vérifie toutes les sous-conditions de ce groupe de conditions (obtenir le nom et la valeur en déconstruire l'attribution). Chaque () ne revient que lorsque toutes les conditions des enfants du groupe de conditions sont satisfaites. Cela garantit que les produits que nous filtrons doivent répondre à tous les attributs au sein d'un groupe de conditions en même temps.
• product.options.some (option => option.name === name && option.value === valeur) : il s'agit de la logique de correspondance la plus intérieure. Pour chaque condition infantile que la méthode chaque () vérifie (par exemple {nom: 'Size', valeur: '10'}), nous itraquons via le tableau des options du produit actuel. La méthode Some () vérifie s'il y a au moins une option dans Product.options, dont le nom et la valeur correspondent exactement à la condition infantile. Si elle est trouvée, Vrai est retourné, indiquant que la sous-condition est satisfaite.

Cette structure imbriquée implémente avec précision la logique que "le produit satisfait à tout groupe de conditions dans le tableau des conditions, et toutes les sous-conditions de chaque groupe de conditions sont appariées par n'importe quelle option du produit lui-même."

Notes et meilleures pratiques

1. Clarité logique : bien que cette fonction d'ordre supérieur multicoule soit puissante, elle peut rendre le code difficile à comprendre et à maintenir s'il est abusé ou si la logique n'est pas claire. Assurez-vous que les responsabilités de chaque filtre, certains et chacun sont claires.
2. Considérations de performances : pour les ensembles de données très importants, ces boucles imbriquées multicouches peuvent avoir des frais généraux de performance. Si les performances deviennent un goulot d'étranglement, d'autres stratégies d'optimisation peuvent être prises en compte, telles que les données de prétraitement, en utilisant la carte pour des recherches rapides, ou dans certains cas en utilisant des boucles traditionnelles pour un contrôle plus fin. Cependant, pour la plupart des scénarios d'application Web, cette approche est acceptable et a une meilleure lisibilité au code.
3. Traitement vide du tableau : considérez le comportement lorsque les produits ou conditions sont des tableaux vides. Lors du traitement des tableaux vides, du filtre, certaines, chaque, etc. Les méthodes renvoient généralement les résultats attendus (par exemple, certains rendements faux sur les tableaux vides, et tout revient vrai), mais ils doivent toujours être testés en fonction de la logique métier spécifique.
4. Égalité stricte : lors de la comparaison du nom et de la valeur, utilisez === (strictement égalité) au lieu de == pour éviter les problèmes de conversion de type potentiel.

Résumer

En combinant intelligemment Filter (), certaines () et toutes les méthodes () des tableaux JavaScript, nous pouvons résoudre efficacement et gracieusement le problème du filtrage des tableaux d'objets imbriqués basés sur des conditions complexes. Ce modèle offre non seulement de solides capacités de dépistage des données, mais améliore également la lisibilité et la déclarativité du code. Comprendre le comportement de ces fonctions d'ordre supérieur et leur applicabilité dans différents scénarios est une étape clé pour devenir un excellent développeur JavaScript. Face à des défis similaires de traitement des données, priorisez cette solution à la programmation fonctionnelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!