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();
},
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);
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))
💪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)
