Filtrer les tableaux d'objets en fonction des attributs en JavaScript

1. Fonction de rappel générale pour filtrer un tableau d’objets en fonction d’attributs en JavaScript
2. Utiliser la fonction de flèche pour filtrer un tableau d’objets en fonction des attributs en JavaScript

La méthode filter() est le moyen le plus simple de saisir un résultat de préférence.

En dehors de cela, vous pouvez parcourir l’intégralité du tableau d’objets et déclarer explicitement les conditions. Techniquement, la technique de moindre code et d’accès facile se fait par la méthode du filter.

Ici, nous allons nous concentrer sur deux manières d’utiliser un filtre sur un tableau d’objets. Nous dirigerons une fonction de rappel vers une variable ou un objet pour stocker le résultat filtré.

Cette fonction de rappel aura la structure générale d’une fonction. Plus tard, nous essaierons également de résoudre le cas avec une fonction fléchée et vérifierons si le résultat est similaire.

Fonction de rappel générale pour filtrer un tableau d’objets en fonction d’attributs en JavaScript

Cette démonstration va initialiser un tableau avec plusieurs attributs, c’est-à-dire des paires key-value. La stratégie consiste à accéder d’abord à l’objet, puis à accéder au tableau.

Ensuite, nous allons saisir un attribut et lui appliquer une condition. Lorsque nous utilisons la méthode filter, la correspondance exacte sur les conditions sera filtrée.

Passons aux lignes de code.

Extrait de code:

var feature = {
  'models': [
    {
      'name': 'Raven',
      'age': '22',
      'height': '176',
      'gender': 'Female',
      'hair': 'Brown',
    },
    {
      'name': 'Alex',
      'age': '23',
      'height': '185',
      'gender': 'Male',
      'hair': 'Black',
    },
    {
      'name': 'Eden',
      'age': '25',
      'height': '169',
      'gender': 'Female',
      'hair': 'Black',
    }
  ]
} var extract = feature.models.filter(function(el) {
  return el.age < 25 && el.height >= 170;
});
console.log(extract);

Production :

Ici, le feature.models.filter accède à l’objet et au tableau en conséquence. De plus, la méthode filter est déclenchée pour mettre les contraintes à l’intérieur.

Comme nous pouvons le voir, le age<25 && height>170 extrait les détails des modèles correspondants possibles.

Utiliser la fonction de flèche pour filtrer un tableau d’objets en fonction des attributs en JavaScript

Une fonction fléchée est un raccourci des conventions de structure de fonction normales. Nous verrons si nous pouvons utiliser une fonction fléchée pour filtrer un tableau d’objets.

Extrait de code:

var feature = {
  'models': [
    {
      'name': 'Raven',
      'age': '22',
      'height': '176',
      'gender': 'Female',
      'hair': 'Brown',
    },
    {
      'name': 'Alex',
      'age': '23',
      'height': '185',
      'gender': 'Male',
      'hair': 'Black',
    },
    {
      'name': 'Eden',
      'age': '25',
      'height': '169',
      'gender': 'Female',
      'hair': 'Black',
    }
  ]
} var extract = feature.models.filter(x => x.age < 25 && x.hair == 'Black');
console.log(extract);

Production :

Selon le code ci-dessus, filtrer le résultat nécessaire avec une méthode filter de la fonction fléchée est plus clair.

Cette procédure ne nécessite qu’une variable (ici x) pour pointer les attributs. De plus, ce style de codage est utilisé pour raccourcir les codes et émis par la dernière convention ES6.