Pages

🆘 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.

🪛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


Bilan sur les fonctions avec des tableaux


Rappels sur les Tableaux.


🥷Simulez les méthodes


🪛Exemples de code

const pers = [
  {
    nom: "Dupont",
    ville: "Evry",
    sex: "f",
  },
  {
    nom: "Brusel",
    ville: "Belfort",
    sex: "h",
  },

  {
    nom: "Dupont",
    ville: "PARIS",
    sex: "f",
  },
  {
    nom: "Durant",
    ville: "Paris",
    sex: "h",
  },
];

// have fun with for of
function affiche(tab, callback) {
  for (let [i, ele] of Object.entries(tab)) {
    console.log(callback ? callback(ele, i) : `${i}->${ele.nom}`);
  }
}

affiche(pers);
affiche(pers, ({ nom: name, ville: town }) => `${name} lives in ${town}`);

function afficheVille({ ville }, i) {
  return `${i} : ${ville}`;
}

affiche(pers, afficheVille);

// transforme
function transf(array, fx) {
  let passed = [];

  for (let v of array) passed.push(fx(v));

  return passed;
}

//
function civilite({ nom, sex }) {
  return sex == "h" ? `Monsieur ${nom}` : `Madame ${nom}`;
}

const newT = transf(pers, civilite);
console.log(newT);

//
function normalise(pers) {
  return (pers.ville = pers.ville.toUpperCase());
}
transf(pers, normalise);
console.table(pers);

Objectif milieu de programme

 



DOM express


See the Pen arbre généalogique 1 by dupont (@dupontcodepen) on CodePen.

Inscription à : Articles (Atom)