Pages

filtre, map ...

Le chaînage des filtres élémentaires

const population = [

    { nom: "Dupont", ville: "evry", sex: "f", born: 1970 },
    { nom: "Dupont", ville: "Paris", sex: "f", born: 1980 },
    { nom: "Brusel", ville: "belfort", sex: "h", born: 1969 },
    { nom: "SuperDupont", ville: "Evry", sex: "f", born: 1971 },
    { nom: "Leroy", ville: "Paris", sex: "f", born: 1984 },
    { nom: "Tony", ville: "belfort", sex: "h", born: 2000 },

];

//definitions pour filtre

const setAge = (pers) => {
    let age = new Date().getFullYear() - pers.born;
    return Object.assign(pers, { age });
}
const people = population.map(setAge),
femme = {
     genre: "f"
},
     homme = {
        genre: "h"
     },
     cinquante = {
        age: 50,
    },
    quarante = {
        age: 40,
    },
    Évryens = {
        ville: "evry",
    },

    genre = function ({ sex }) {
        return sex == this.genre;
    },

    trancheAge = function ({ age }) {
        return age > this.age;
    },

    habitant = function ({ ville }) {
        return ville.toLowerCase() == this.ville.toLowerCase();
    },


// on peut filtrer maintenant sans effort
    
    f50 = people.filter(genre, femme)
         .filter(trancheAge, cinquante),

    h50 = people.filter(genre, homme)
         .filter(trancheAge, quarante),

evryC19 = people.filter(habitant, Évryens)
        .filter(trancheAge, cinquante)
         .filter(genre, homme);

 lien


Les filtres dans un tableaux !

Il est intéressant de mettre des fonctions dans des tableaux :
  1. const pipeline = [
  2.   function A,
  3.   function B, ...
  4. ];
  5. for( let action of pipeline) {
  6.    objet = action( objet );
  7. }
L'intérêt du code est en lig. 6 : Chaque actions renvoie l'objet pour l'action suivante.

👿Cette technique est à la base des filtres de Photoshop.

Voici un exemple de chainage d'actions sur un point. Code

Appliquons ce principe sur nos filtres avec la géniale utilisation de la méthode every en lig.2.
  1. const customFilter = (array, ...queries) => {
  2.    return array.filter( pers => queries.every( query => query(pers) ));
  3. },
  4.         
  5. resultQuery = customFilter(population,
  6.             ( { nom } ) => nom == "SuperDupont",
  7.             ( { born } ) => new Date().getFullYear() - born > 40,
  8.             ( { sex  } ) => sex == "f",
  9.             ( { ville} ) => ville == "evry"
  10.         );



👍 Améliorations

  1. const customFilter = (array, ...tests) => {
  2.     return array.filter(pers => tests.every(t => t(pers)));
  3. }

  5. const filtre = (query) =>
  6. customFilter(population,
  7.      ( {nom} )    => query.nom ? nom.toLowerCase() == query.nom : true,
  8.      ( { born } ) => query.born ? new Date().getFullYear() - born > query.born : true,
  9.      ( { sex }  ) => query.sex ? sex == query.sex : true,
  10.      ( { ville }) => query.ville ? ville.toLowerCase() == query.ville : true
  11. );

  13. const firstQuery = {
  14.    nom:"dupont",
  15.    born:40,
  16.    sex:"f",
  17.    ville:"paris",
  18. }

  20. console.log(filtre (firstQuery))

  22. const Evryens = {
  23.    ville:"evry",
  24. }

  26. console.log(filtre (Evryens))

                                                  💪A step futher, 

                                                  Pour ceux qui n'auraient pas lu " avoid using bind "

                                                  notez lig.7 la présence de bind.


                                                  1. nom =   function ( {nom} )  { return nom.toLowerCase() == this.nom },
                                                  2. age =   function ( { born } ) { return new Date().getFullYear() - born > this.born},
                                                  3. genre = function ( { sex }  ) { return sex == this.sex},
                                                  4. habite =function ( { ville }) { return ville.toLowerCase() == this.ville},

                                                  6. customFilter = (array, query, ...tests) => {
                                                  7.     return array.filter(pers => tests.every(t => t.bind(query)(pers)));
                                                  8. }

                                                  10. const myQuery = {
                                                  11.    nom:"dupont",
                                                  12.    born:40,
                                                  13.    sex:"f",
                                                  14.    ville:"paris",  
                                                  15. }
                                                  16. const query1 = customFilter(population, myQuery, nom,age,genre,habite);
                                                  17. console.log(query1);

                                                  19. const query2 = customFilter(population, myQuery, habite);
                                                  20. console.log(query2)

                                                  Libellés : , ,