reduce

const posts = [
  {id: "moi", upVotes: 20},
  {id: "toi", upVotes: 89},
  {id: "lui", upVotes: 1},
  {id: "eux", upVotes: 123},];


let [premier,second] = posts.reduce((acc, cur) => [cur, ...acc].sort((a,b) => b.upVotes - a.upVotes).slice(0,2),[]);

console.log(`Au second tour sont présents : ${premier.id} et ${second.id}`);

Générateur

class Matrix {
  constructor(width, height, element = (x, y) => undefined) {
    this.width = width;
    this.height = height;
    this.content = [];

    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        this.content[y * width + x] = element(x, y);
      }
    }
  }

  get(x, y) {
    return this.content[y * this.width + x];
  }
  set(x, y, value) {
    this.content[y * this.width + x] = value;
  }

 *[Symbol.iterator]() {
          let i=0;
   
          while (i < this.height*this.width) {
              yield {
                x : i%this.width,
                y : Math.floor(i/this.width),
                value : this.content[i]
              }
              i++;
          }
  }
 
}


const width = 3;
let matrix = new Matrix(width, width, (x, y) => `[${x},${y}]= ${y * width + x}`);
for (let {value,x,y} of matrix) {
  console.log(x,y,value);
}

https://es6console.com/jppky2fw/

0 0 [0,0]= 0
1 0 [1,0]= 1
2 0 [2,0]= 2
0 1 [0,1]= 3
1 1 [1,1]= 4
2 1 [2,1]= 5
0 2 [0,2]= 6
1 2 [1,2]= 7
2 2 [2,2]= 8 

Autre exemple : lien

Game !

Destructuring !

const user = {nom: 'me', age: 54, code: 'secret'};

const old = (function ( para ) {
    return function( {nom} ) {
  return {nom}
}})();

console.log(old(user))

const userSecure = ( ({nom, age}) => ({nom, age}) )(user);

Date

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

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

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

exemple

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

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

});

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

   return { 

        num : index,

        annee : p.born 

     };

});

en Action

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

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

td

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}
];

Ecrire un code pour afficher :

td

let pers =  [
{nom: "Dupont",ville: "evry",sex: "f"},
{nom: "Brusel",ville: "belfort",sex: "h"}
];

console.log(pers);

for ( let v of pers){
  if ( v.sex == "h" )
    console.log(`Monsieur ${v.nom}`);
  else
    console.log(`Madame ${v.nom}`);
}

for ( let v of pers){
  if ( v.sex == "h" )
    console.log(`Cher ${v.nom}`);
  else
    console.log(`Chere ${v.nom}`);
}

for ( let v of pers){
    console.log(`${v.nom} habite à ${v.ville}`);
}

function affiche_0(tab, callback) {
    for (let ele of tab){
         console.log(callback(ele))
    }
}

function civilite_0(pers){
  return (pers.sex =='h' ? `Monsieur ${pers.nom}` : `Madame ${pers.nom}`);
}

affiche_0(pers,civilite_0);

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

function affiche(tab, callback) {

for (let ele of tab){
console.log(callback ? callback(ele) : `${ele.nom} habite à ${ele.ville}`);
} 

};

affiche(pers,civilite);

proxy : en action

proxy : en action

 Exemple

getter setter

code en action

let personnes = {

  groupBy(objectArray, property) {
       return objectArray.reduce(function (acc, obj) {
          let key = obj[property];
          if (!acc[key]) {
            acc[key] = [];
          }
          acc[key].push(obj);
          return acc;
  }, {})
  },

  list:  [
    {
      nom: "Dupont",
      ville: "evry",
      sex: "f"
    },
    {
      nom: "Brusel",
      ville: "belfort",
      sex: "h"
    },
    {
      nom: "Dupont",
      ville: "paris",
      sex: "f"
    },
    {
    nom: "Durant",
    ville : "paris",
    sex : "h"}
  ],

  get latest() {
    if (this.list.length == 0) {
      return undefined;
    }
    return this.list[this.list.length - 1];
  },
   get length() {
    return this.list.length;
  },
  get groupeParVilles() {
    return this.groupBy(this.list, "ville");
  },
  get groupeParNom() {
    return this.groupBy(this.list, "nom");
  },
  get groupeParSex() {
    return this.groupBy(this.list, "sex");
  },
  get villes(){
     let groupeVilles = this.groupBy(this.list, "ville");     
      return Object.keys(groupeVilles);   
  },
  get noms(){
     let groupeNoms = this.groupBy(this.list, "nom");     
      return Object.keys(groupeNoms );   
  },
  get sex(){
     let groupeSex = this.groupBy(this.list, "sex");     
      return Object.keys(groupeSex);   
  },
   
}

 console.log(personnes.villes);
// console.log(personnes.noms);
// console.log(personnes.sex);
 console.log(personnes.groupeParVilles);
//console.log(personnes.latest);
//console.log(personnes.length);

en action

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"}

];

//for of

function Affiche(tab, callback) {

let i=0;

for (let ele of tab){

console.log(callback ? callback(ele,i) : `${i}->${ele.nom}`);

i++;

}

};

function afficheVille({ville},i) {

return `${i} : ${ville}`

};

Affiche(pers,afficheVille);

// transforme

function civilite({nom,sex}) {

return (sex=='h' ? `Monsieur ${nom}` : `Madame ${nom}`);

}

function politesse({nom,sex}) {

return (sex=='h' ? `Cher ${nom}` : `Chere ${nom}`);

}

function transf(array, fx) {

let passed = [];

for(let v of array)

passed.push(fx(v));

return passed;

}

console.log(transf(pers,civilite));

console.log(transf(pers,politesse));

//map

function toStringMap(tab,callback) {

let t = tab.map((ele,i) => callback ? callback(ele,i) : `${i} -> ${ele.nom}`);

//console.log(t);

return t.toString();

}

//console.log(toStringMap(pers));

//console.log(toStringMap(pers,afficheVille));

Array : filter

https://es6console.com/jnm1ygrj/

count = (function(){

    let c = 0;
    function getC(){
        //console.log("dans get" + c);
        return c;
    }
    function setC(v){
         c = v;
    }
    function incC(){
         c++;
    }

    return {
        get : getC,
        set : setC,
        inc : incC,
    }
})();

count.set(3);
console.log(count.get());
count.inc();
console.log(count.get());

mongodb

https://www.youtube.com/watch?v=1uFY60CESlM&feature=youtu.be

recursif et pré et post incrémentation

Comparer les deux écrire de la fonction Power en récursif.

function P(b,e){
  console.log(b,e);
  if (e==0) {
    return 1;}
  else {
    return b=b*P(b,--e);
  }
}

et

function P(b,e){
  console.log(b,e);
  if (e==0) {
    return 1;}
  else {
    return b=b*P(b,e--);
  }
}

console.log(P(2,3));

new Function en action

(new Function( 'A='+ 3 +';'))(); console.log(A); // expected output: 3 JS Bin on jsbin.com

regexp

function f2c(x) {
  function convert(str, p1, offset, s) {
    return `${Math.trunc((p1 - 32) * 5/9)}C`;
  }
  let reg = /(-?\d+(?:\.\d*)?)F\b/;
  return x.replace(reg, convert);
}


f2c("la valeur de 100F vaut 100F"); // "la valeur de 37C vaut 100F"

(-?                 # pour une valeur négative (optionnel) : 
  \d+               #  recherche au - 1 chiffre  (obligatoire)
  (?:               #   essai de matcher : 
    \.\d*           #     un . suivi de zéro ou plusieurs chiffres
  )?                #  groupe option sans référence, donc soit 12.3 ou 12)
)                   # groupe avec référence
F\b                 # F est en fin de nombre 12.3F blabla

JS Bin on jsbin.com

regexp : greedy versus lazy !

soit le lien suivant :

let lien = `<a class="show" href="dupontcours">cours</a>`;

On remarque qu'il y a deux chevrons ">" dans l'écriture

`<a class="show" href="dupontcours">cours</a>`;

Cas greedy match

Soit l'expression régulière suivante.

On recherche une chaîne commençant par <a et qui stoppe au dernier chevron > que l'on peut trouver !

result = lien.match(/<a .*>/g);

`<a class="show" href="dupontcours">cours</a>`;

↑En Action

Cas lazy match

La présence du ? permet d'arrêt la recherche de gauche à droite à la première expression possible de fin.

result = lien.match(/<a .* ? >/g);

`<a class="show" href="dupontcours">cours</a>`;

→En Action

package : platformio-ide-terminal

platformio-ide

regexp : ?: et ?=

<p id="demo">bla bli bla bli bla </p>

The ?=n quantifier matches any string that is followed by a specific string n.
On ne prend pas en compte n dans le remplacement
<script>
function myFunction() {

    let patt1 = /bla(?= (bli|bla))/g;
    let t = document.getElementById("demo").innerHTML;

    t = t.replace(patt1,"moi");
    document.getElementById("demo").innerHTML = t;
}
myFunction()
</script>

<p id="demo">bla bli bla bli bla </p>


moi bli moi bli bla

The ?:n quantifier matches any string  that is followed by a specific string n.
On prend en compte n dans le remplacement
<script>
function myFunction() {

    let patt1 = /bla(?: (bli|bla))/g; // et pris dans le remplacement
    let t = document.getElementById("demo").innerHTML;

    t = t.replace(patt1,"moi");
    document.getElementById("demo").innerHTML = t;


}
myFunction()
</script>
<p id="demo">bla bli bla bli bla </p>
moi moi bla

fetch

     let requestObj = `images/${i}.jpg`;

     fetch(requestObj).then(function(response) {
         return response.blob();
     }).then(function(myBlob) {
        
         let {size,type} = myBlob,
             objectURL = URL.createObjectURL(myBlob);

         document.querySelector("#idImage").src = objectURL;
          
      });


en action

ObjectURL : en action

Créer un répertoire de la forme

code

code

https://jsfiddle.net/dupont/29848y1g/2/

dataset

Exemple de donnée conservée sur une balise par dataset.