Pages

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




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

et 
{
    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.

Inscription à : Articles (Atom)