Comment filtrer les objets en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Comment filtrer les objets en JavaScript
Moataz Farid 12 octobre 2023
JavaScript JavaScript Filter JavaScript Object
  1. Utiliser reduce pour filtrer un objet en JavaScript
  2. Utiliser la fonction map pour filtrer les objets JavaScript
Comment filtrer les objets en JavaScript

Ce tutoriel présente la manière de filtrer un objet en JavaScript. Nous apprendrons à mettre en œuvre une méthode de filter similaire à celle utilisée pour le type de données du tableau avec Object en JavaScript.

Utiliser reduce pour filtrer un objet en JavaScript

Implémentons maintenant la fonction de filtrage des objets à l’aide de la fonction reduce.

Supposons que nous ayons l’objet suivant :

var grades = {linearAlgebra: 90, chemistry: 95
biology: 90
    languages : 96
}

L’objet ci-dessus représente les notes d’un élève ; nous devons filtrer cet objet et n’obtenir que les matières ayant une note de 95 ou plus.

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter =
    function(mainObject, filterFunction) {
  return Object.keys(mainObject)
      .filter(function(ObjectKey) {
        return filterFunction(mainObject[ObjectKey])
      })
      .reduce(function(result, ObjectKey) {
        result[ObjectKey] = mainObject[ObjectKey];
        return result;
      }, {});
}

    console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, function(grade) {
  return grade >= 95;
});

console.log('Target Subjects are ', targetSubjects);

Production :

"The grades are ", {
  biology: 90,
  chemistry: 95,
  languages: 96,
  linearAlgebra: 90
}
"Target Subjects are ", {
  chemistry: 95,
  languages: 96
}

Nous implémentons la fonction Object.filter comme Object.filter = function(mainObject, filterFunction) dans l’exemple ci-dessus. Nous pouvons simplifier le code de cet exemple comme ci-dessous.

Object.filter = function(mainObject, filterFunction) {
  return Object.keys(mainObject)
      .filter(innerFilterFunction)
      .reduce(reduceFunction, {});
}

Il comporte 3 étapes principales pour implémenter cette fonction Object.filter :

  1. La fonction Object.keys() retourne un tableau de clés à partir des paires clé-valeur de l’objet. Dans notre exemple, il s’agit de linearAlgebra, chemistry, biology, languages.
  2. Le résultat de la fonction Object.keys() est envoyé à la fonction de rappel innerFilterFunction, qui est également un argument de la fonction de filtrage, et la sortie de cette fonction innerFilterFunction sera les clés filtrées. La sortie est chemistry, languages dans notre exemple.
  3. Le résultat du filtre est maintenant passé à notre fonction reduce(), qui ajoute chaque valeur à sa clé, et retourne un nouvel objet contenant toutes ces paires. Le résultat dans notre exemple est {chemistry: 95, languages: 96}.

Si nous voulons recréer l’exemple ci-dessus avec la syntaxe arrow de ES6, nous pourrions le réécrire comme ci-dessous.

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter = (mainObject, filterFunction) =>
    Object.keys(mainObject)
        .filter((ObjectKey) => filterFunction(mainObject[ObjectKey]))
        .reduce(
            (result, ObjectKey) =>
                (result[ObjectKey] = mainObject[ObjectKey], result),
            {});

console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, (grade) => grade >= 95);

console.log('Target Subjects are ', targetSubjects);

Production :

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}

Il utilise l’opérateur comma pour renvoyer l’objet result, et il peut également être remplacé par Object.assign, qui retourne également le résultat. Le code peut donc être réécrit comme suit.

Object.filter = (mainObject, filterFunction) =>
    Object.keys(mainObject)
        .filter((ObjectKey) => filterFunction(mainObject[ObjectKey]))
        .reduce(
            (result, ObjectKey) =>
                Object.assign(result, {[ObjectKey]: mainObject[ObjectKey]}),
            {});

Utiliser la fonction map pour filtrer les objets JavaScript

Comme nous utilisons la fonction reduce dans la solution ci-dessus, nous pouvons également utiliser la fonction map pour filtrer les objets JavaScript.

Object.filter = function(mainObject, filterFunction) {
  return Object.assign(...Object.keys(mainObject)
                           .filter(function(ObjectKey) {
                             return filterFunction(mainObject[ObjectKey])
                           })
                           .map(function(ObjectKey) {
                             return {[ObjectKey]: mainObject[ObjectKey]};
                           }));
}

Nous avons remplacé la fonction reduce par la fonction map comme indiqué ci-dessus, et avons également utilisé le Object.assign et lui avons envoyé en utilisant la syntaxe spread toutes les opérations commençant par Object.keys() jusqu’à .map(), donc l’implémentation complète devrait maintenant être comme suit :

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter =
    function(mainObject, filterFunction) {
  return Object.assign(...Object.keys(mainObject)
                           .filter(function(ObjectKey) {
                             return filterFunction(mainObject[ObjectKey])
                           })
                           .map(function(ObjectKey) {
                             return {[ObjectKey]: mainObject[ObjectKey]};
                           }));
}

    console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, (grade) => grade >= 95);

console.log('Target Subjects are ', targetSubjects);

Production :

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}

Article connexe - JavaScript Filter

Article connexe - JavaScript Object