>>> separe([1, 0, 1, 0, 1, 0, 1, 0])
[0, 0, 0, 0, 1, 1, 1, 1]
filtre and co 3
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 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)
const result = []
for (const [key, value] of Object.entries(filtre)) {
// console.log(`${key}, ${value}`);
result.push(
{
"_id": key,
"totalSaleAmount": value
}
)
}
console.table(result)
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)
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="./Images/47.jpg" download>me</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>
<a href="#">Top</a>
</body>
</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();
},
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)
Inscription à :
Articles (Atom)