DOM

 

🍕Préparation au DS !

   ...

🍕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]]);

🖋️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 !

const pers = [
    { nom: "Dupont", ville: "evry", sex: "f", born: 1903 },
    { nom: "Dupont", ville: "Paris", sex: "f", born: 2004 },
    { nom: "Brusel", ville: "belfort", sex: "h", born: 1930 }
];

const filles_callBack = pers.filter(function(p){
    return (p.sex === "f");
});

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 !

    function ageObj({ born }) {return { born }}
    function ageVal({ born }) {return born}
    function ajout(p) {p["new"] = "hallo";}
    function ajout_2(p) {return p["new"] = "hallo";}
    function ageObjDestruct({ born :annee }) {return { annee }};

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);