TD: mai 2021

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 :

const pipeline = [
function A,
function B, ...
];
for( let action of pipeline) {
objet = action( objet );
}

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.

const customFilter = (array, ...queries) => {
   return array.filter( pers => queries.every( query => query(pers) ));
},
        
resultQuery = customFilter(population,
            ( { nom  } ) => nom == "SuperDupont",
            ( { born } ) => new Date().getFullYear() - born > 40,
            ( { sex  } ) => sex == "f",
            ( { ville} ) => ville == "evry"
        );

👍 Améliorations

const customFilter = (array, ...tests) => {
return array.filter(pers => tests.every(t => t(pers)));
}
const filtre = (query) =>
customFilter(population,
( {nom} ) => query.nom ? nom.toLowerCase() == query.nom : true,
( { born } ) => query.born ? new Date().getFullYear() - born > query.born : true,
( { sex } ) => query.sex ? sex == query.sex : true,
( { ville }) => query.ville ? ville.toLowerCase() == query.ville : true
);
const firstQuery = {
nom:"dupont",
born:40,
sex:"f",
ville:"paris",
}
console.log(filtre (firstQuery))
const Evryens = {
ville:"evry",
}
console.log(filtre (Evryens))

code

💪A step futher,

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

notez lig.7 la présence de bind.

nom = function ( {nom} ) { return nom.toLowerCase() == this.nom },
age = function ( { born } ) { return new Date().getFullYear() - born > this.born},
genre = function ( { sex } ) { return sex == this.sex},
habite =function ( { ville }) { return ville.toLowerCase() == this.ville},
customFilter = (array, query, ...tests) => {
return array.filter(pers => tests.every(t => t.bind(query)(pers)));
}
const myQuery = {
nom:"dupont",
born:40,
sex:"f",
ville:"paris",
}
const query1 = customFilter(population, myQuery, nom,age,genre,habite);
console.log(query1);
const query2 = customFilter(population, myQuery, habite);
console.log(query2)

lien

TD

Pages

filtre, map ...

Le chaînage des filtres élémentaires

Les filtres dans un tableaux !

👍 Améliorations

💪A step futher,