TD

filtre and co 2

function date(min,max){
  return function( {date} ){
    if (new Date(min) <= new Date(date) && new Date(date) <= new Date(max)) {return true}
    else {return false}
  }
}

const myagg = function(acc, cur)  {
  if (!acc[cur.item]) acc[cur.item] = 0;
  acc[cur.item]+=cur.price*cur.quantity;
  return acc
}

const filtre = products.filter(date('2014-01-01','2015-01-01'))
                       .reduce( myagg,{})
console.log(filtre)

code

filtre & co 1

const products = [

  {
    "_id": 1,
    "item": "abc",
    "price": 10,
    "quantity": 2,
    "date": "2014-03-01T08:00:00.000Z"
  },
  {
    "_id": 2,
    "item": "jkl",
    "price": 20,
    "quantity": 1,
    "date": "2014-03-01T09:00:00.000Z"
  },
  {
    "_id": 3,
    "item": "xyz",
    "price": 5,
    "quantity": 10,
    "date": "2014-03-15T09:00:00.000Z"
  },
  {
    "_id": 4,
    "item": "xyz",
    "price": 5,
    "quantity": 20,
    "date": "2014-04-04T11:21:39.736Z"
  },
  {
    "_id": 5,
    "item": "abc",
    "price": 10,
    "quantity": 10,
    "date": "2014-04-04T21:23:13.331Z"
  },
  {
    "_id": 6,
    "item": "def",
    "price": 7.5,
    "quantity": 5,
    "date": "2015-06-04T05:08:13.000Z"
  },
  {
    "_id": 7,
    "item": "def",
    "price": 7.5,
    "quantity": 10,
    "date": "2015-09-10T08:43:00.000Z"
  },
  {
    "_id": 8,
    "item": "abc",
    "price": 10,
    "quantity": 5,
    "date": "2016-02-06T20:20:13.000Z"
  }
]

function date(min,max){

  return function( {date} ){
    if (new Date(min) <= new Date(date) && new Date(date) <= new Date(max)) {return true}
    else {return false}
  }


}

const filtre = products.filter(date('2014-04-01','2015-01-01'))

Adetruire

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html {

scroll-behavior: smooth;

}

#partie_definition {

background-color: yellow;

}

</style>

</head>

<body>

<a href="./About/aboutme.html">About me</a>

<a href="https://www.ibisc.univ-evry.fr/~dupont/" target="_blank">Dupont</a>

<a href="#partie_definition">definition</a>

<a href="mailto:denis.dupont@univ.fr">email</a>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quae a earum minus officia. Quam, neque? Ea

nulla nisi dolore laudantium quia tenetur saepe maiores veniam consequuntur vel ab fugit

consectetur, ex quasi distinctio nihil laborum consequuntur animi qui! Fuga repudiandae necessitatibus

reiciendis fugiat eos cumque!</p>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe exercitationem incidunt quam at beatae adipisci

aspernatur error et, odio itaque nam mollitia voluptas veritatis eveniet odit excepturi temporibus accusantiu

aspernatur vel eum cum porro numquam magni. Ipsum harum dolorum nisi deleniti blanditiis fugiat pariatur aut

ipsa nesciunt dolore! Autem cumque dignissimos saepe nihil eveniet sequi soluta pariatur dolor neque?</p>

<p id="partie_definition">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste provident repellendus ipsam.

Eos mollitia

veritatis praesentium temporibus! Velit beatae incidunt voluptatum sunt, culpa laboriosam quia fuga at.</p>

</body>

</html>

Edge (inspector)

lien

Fichier à inspecter :

https://microsoftedge.github.io/DevToolsSamples/inspector/inspector-demo.html

https://microsoftedge.github.io/DevToolsSamples/a11y-testing/page-with-errors.html

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 :

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)