dupontL2: octobre 2023

🥷DM: Closest value

const table = new Map([

    [0,'yellowgreen'],

    [150, 'green'],

    [600, 'olive'],

    [750, 'red'],

    [800, 'black'],

]);

🪛Trouvez un algorithme pour trouver la valeur 

de la table la plus proche d'une valeur.

 600 est la plus proche de la valeur 610.

 600 est la plus proche de la valeur 500.

🆘 Pensez à évaluer [...table.keys()]

Plus d'infos »

🥷🥇 Fan club reduce

Voici un code donné à titre d'information 🥇.

🥷Objectif : Faire l'équivalent de l'aggregation dans les BD.

Code

https://glitch.com/edit/#!/carnation-south-servant

Résultats

https://carnation-south-servant.glitch.me

👻Réduce

reduce 1

reduce 2
reduce 3
reduce 4
reduce 5

reduce 6

Vacances : achats

Découvrez les méthodes filter, map et reduce en action !

Vous disposez de 80€ de budget.

Vous indiquez dans votre panier vos achats

Type:Prix:Quantité

Cliquez pour calculer l'estimation d'achat et l'aide à la vente.

Vacances : Réservez votre place !

Selectionnez vos places et Confimez la réservation.

Délégation : 🆘DS

See the Pen Calendrier event by dupont (@dupontcodepen) on CodePen.

Préparation au DS

See the Pen Calendrier selection Periode by dupont (@dupontcodepen) on CodePen.

Structuration

Lecture

🆘 calendrier

cours

Objectifs du cours

🥷Passez au niveau Sup

Avant

Après

const pizzasWithCheese = [];

for (let i = 0; i < pizzas.length; i++) {

if (pizzas[i].ingredients.includes("🧀")) {

pizzasWithCheese.push(pizzas[i]);

}

console.log(pizzasWithCheese);

const pizzaWithTomato = [];

for (let i = 0; i < pizzas.length; i++) {

if (pizzas[i].ingredients.includes("🍅")) {

pizzaWithTomato.push(pizzas[i]);

}

console.log(pizzaWithTomato);

const pizzaWithCactus = [];

for (let i = 0; i < pizzas.length; i++) {

if (pizzas[i].ingredients.includes("🌵")) {

pizzaWithCactus.push(pizzas[i]);

}

console.log(pizzaWithCactus);

const hasIng = (ing) => (pizza)

=> pizza.ingredients.includes(ing);

const chees = pizzas.filter(hasIng("🧀")),

tomato = pizzas.filter(hasIng("🍅")),

cactus = pizzas.filter(hasIng("🌵"));

Code BD

const findToppins = { toppings: { $in: ["cheese", "pepper"] } };

try {

const cursor = await collection.find(findToppins).sort({ name: 1 });

await cursor.forEach((pizza) => {

console.log(`${pizza.name} has "cheese" or "pepper" toppings \n`);

});

} catch (err) {

console.error(

`Something went wrong trying to find the documents: ${err}\n`

);

}

code

Pour tester le code, vous devez mettre en place une vaiable d'environnement

du type :

mongodb+srv://moz:<password>@cluster0.kkmmj.mongodb.net/?retryWrites=true&w=majority

🍕Base des données

const pizzas = [

{ name:"queen", ingredients: ["🐷","🍄","🍅","🧀"] },

{ name: "cheese", ingredients: ["🧀", "🍅"]},

{ name: "oriental", ingredients: ["🍅","🐑","🍄","🌶"]},

{ name: "royal", ingredients: ["🍅","🌵"]},

];

🪛 Questions

Trouvez les pizzas avec du 🧀

Trouvez les pizzas avec du 🍅

Trouvez les pizzas avec un ingrédient quelconque (soit du "🍅" ou du "🧀" ou du "🐑" ...)

Trouvez les pizzas avec au moins un ingrédient parmi une liste d'ingrédients

Trouvez les pizzas avec tous les ingrédients d'une liste

Trouvez les pizzas avec viande

Ajoutez pour chaque pizza le type (🐮ou ☘️)

Trouvez l'ensemble des ingrédients "🐷","🍄","🍅","🧀","🐑","🌶","🌵"

Trouvez pour chaque ingrédient le nombre de pizzas l'utilisant ,"🧀":2 …

Trouvez pour chaque ingrédient la liste des pizzas l'utilisant

Ajoutez le prix de chaque pizza

prices = new Map([ ["🍅", 1], ["🐷", 2], ["🌶",2], ["🍄", 5], ["🧀", 5], ["🐑", 2], ["🌵", 10]]);

Plus d'infos »

🖋️Devoir sur table : 5 min

const joueurs = [
  { nom: "Benzema", pays: "France", but: 7 },
  { nom: "Mbappe", pays: "FRANCE", but: 8 },
];

🪛Donner sous forme de dessin le résultat de :

const noms = joueurs.map(({ nom }) => nom);

const formatCountry = joueurs.map(function (joueur) {
  joueur.pays = joueur.pays.toLowerCase();
  return joueur;
});

😈Notez que ce code ne correspondrait en rien à une demande de normalisation du pays d'origine.

🪛Completer le code (lien) pour obtenir

🪛Afficher le résultat du code

const formatCountry = joueurs.map( function(play){
  const newPlayer = Object.assign({WorldCup: "US 26"}, play);
  newPlayer.pays = newPlayer.pays.toLowerCase();
  return newPlayer
})

DM : CB et map

QCM maison

Ecrire sa bibliothèque de fonctions sur les tableaux !

😈Testez vous !

Voici le résultat en mémoire !

🪛Comparer ces différentes écritures :

const filles_callBackArrow = pers.filter(p => p.sex === "f");

const filles_callBackDest = pers.filter(function( {sex}){

return (sex === "f");
});

const filles_callBackArrowDestruc = pers.filter( ( {sex} ) => sex === "f" );

Ces écritures sont toutes équivalentes !

🪛Pour chaque transformation donner le résultat sous forme graphique :

Par exemple pour le code suivant

const filles= pers.filter(function(p){

return (p.sex === "f");

});

const dates = filles.map(function annee( p, index ) {

return {

num : index,

annee : p.born

};

});

Vous dessinez le résultat en mémoire suivant :

Voici les fonctions de CallBack !

Déssinez le résultat pour :

🪛filles.map(function annee( p, index ) {
return [p.nom,p.born]
});

🪛filles.map(ajout);

🪛filles.map(ajout_2);

🪛filles.map(p=>p);

🪛filles.map(p=>p["new"]="hallo");

🪛filles.map(ageObj);

🪛filles.map(ageVal);

🪛filles.map(function({ born : annee }) {return { annee }});

🪛filles.map(function({ born :annee, nom }) {return { nom,annee }});

🪛filles.map(function ({ nom, ville }) {
return {
info: `${nom} habite à ${ville}`
}
});

🆘 https://goo.gl/G6u1Cz

🆘Kit de survie

Le dom de base !

Cours : les méthodes des tableaux

Cours sur les méthodes d'un tableau !

Some, every

rappel : destructuration

🥇map

🥷reduce

🥇filter

🖋️Devoir sur table : 5 min

function isOdd(number) { return number % 2 != 0; }

function isEven(number) { return number % 2 == 0; } function filter(numbers, fn) { // Complete code }

const numbers = [1, 2, 4, 7, 3, 5, 6],

odd = filter(numbers, isOdd), even = filter(numbers, isEven);

🆘 for of

Voici pour les étudiants en difficultés quelques remarque sur l'opérateur for of

let tabPers =

[

{

nom: "Dupont",

sex : "f"},

{

nom: "Brusel",

sex : "h"},

{

nom: "Dupont",

sex : "f"},

];

Cas des pointeurs

for (let pers of tabPers){

console.log(pers);

}

Code ⇽

Cas de la destructuration

for (let { nom } of tabPers){

console.log(nom);

}

A chaque itération, nous aurons :

{

let [ FORMAL_PARAMETERS ] = [ ACTUAL_PARAMETERS ];

{

CODE

}

ainsi

{

let [ { nom } ] = [ { nom: "Dupont",sex:"f" } ];

{

console.log( nom );

}

sera équivalent à

{

let [ { nom:nom } ] = [ { nom: "Dupont",sex:"f" } ];

{

console.log( nom );

}

{

let [ { nom } ] = [ { nom: "Dupont",sex:"f" } ];

{

console.log( nom );

}

code ↨

TD : DOM

DOM : https://docs.google.com/document/d/1BBlwGeiae7l5-FDtUistGctSZEXrofi6e6EDvxAP3qs/edit?usp=sharing

Objectif : créer cette application

See the Pen Event button data-containing by dupont (@dupontcodepen) on CodePen.

🪛DM

/**

*

 * @param {String} start The first letter

 * @param {String} end The last letter

 * @param {Number} step The step between letter

 * @returns {Array} Return a new array of charCode between start and end

*/

function codeRange(start, end, step = 1) {

  return new Array(Math.ceil((end.charCodeAt(0) - start.charCodeAt(0)) / step))

    .fill(start.charCodeAt(0))

    .map((x, i) => i * step + start.charCodeAt(0));

}

/**

 * A specialized version of `_.map` for arrays without support for callback

 * shorthands and `this` binding.

*

 * @private

 * @param {Array} array The array to iterate over.

 * @param {Function} iteratee The function invoked per iteration.

 * @returns {Array} Returns the new mapped array.

*/

function arrayMap(array, iteratee) {

  var index = -1,

    length = array.length,

    result = Array(length);

  while (++index < length) {

    result[index] = iteratee(array[index], index, array);

}

  return result;

}

const codes = codeRange("A", "H", 2);

// find the iteratee code to map string from charCode

const Letters = arrayMap(codes, --?--);

console.table(Letters);

┌─────────┬────────┐ │ (index) │ Values │ ├─────────┼────────┤ │ 0 │ 'A' │ │ 1 │ 'C' │ │ 2 │ 'E' │ │ 3 │ 'G' │ └─────────┴────────┘

Bravo !

Vous avez ecrit en TD, une fonction incroyable, vous pouvez être fier de vous

/**
 * 
 * @param {Array} array The array to iterate over
 * @param {Function} transform The function invoked per iteration
 * @returns {Array} Returns The new mapped array.
 */
function map(array, transform) {
  const mapped = [];
  for (let i = 0; i < array.length; i++)
    mapped.push(transform(array[i]));
  return mapped;
}

🥷Voici une bibliothèque qui implémente map https://lodash.com/docs#map

Le code de la fonction est un peu plus compliqué, mais le principe est là !

https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L6864

🥇On peut découvrir que la fonction peut dans le cas d'un tableau appeler la fonction arrayMap. cette fonction ressemble à notre fonction.

: https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L1531

dupontL2

Pages

🥷DM: Closest value

🥷🥇 Fan club reduce

👻Réduce

Vacances : achats

Vacances : Réservez votre place !

🆘Aide au DS

Délégation : 🆘DS

Préparation au DS

Structuration

Lecture

cours

Objectifs du cours

Code BD

DOM

🍕Préparation au DS !

🍕Base des données

🪛 Questions

🖋️Devoir sur table : 5 min

DM : CB et map

😈Testez vous !

Voici les fonctions de CallBack !

🆘Kit de survie

Cours : les méthodes des tableaux

Some, every

🥇map

🥷reduce

🥇filter

🖋️Devoir sur table : 5 min

🆘 for of

Cas des pointeurs

Cas de la destructuration

TD : DOM

🪛DM

Bravo !