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 déstructuration 

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 ↨

la décompostion

décomposition et renomage :

const cours = [
  {
    langue: "fr",
    niveau: {
      lu: 2,
      ecrit: 5,
      parle: 5
    },
    test: 35
  },
  {
    langue: "eng",
    niveau: {
      lu: 4,
      ecrit: 4,
      parle: 4
    },
    test: 100
  }
]

// sans renomage
for (let {langue, niveau: { ecrit} } of cours) {
  console.log(`langue : ${langue}
\t\tniveau de l'écrit = ${ecrit}`)

}

// on peut redéfinir les variables
for (let {langue: l, niveau: { ecrit: e } } of cours) {
  console.log(`langue : ${l}
\t\tniveau de l'écrit = ${e}`)
}

>

• "langue : fr
      niveau de l'écrit = 5"
• "langue : eng
      niveau de l'écrit = 4"

for of

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

for(let v of tabPers) { console.log(`${typeof v}, ${v instanceof Object}`)}

Etude de v

Déboggeur

DOM : for of

Il est facile de faire une boucle sur un ensemble de balises.

// selection des nodes 
const nodes = document.querySelectorAll("selecteurs");

for(let item of nodesInput) {
   // action sur item
}

for_of

const liste = [
{age:10,arg:2,exp:2},
{age:1,arg:1},
{age:100,arg:3},
];

for_of

classique

for (l of liste){
console.log(l.age)
}

destructuring

for ({arg,age} of liste){
console.log(arg*age)
}

Parcours du dom

ES2015

Before ES2015

byTagName = (node, tagName) => {     const found = [];     tagName = tagName.toUpperCase();        _explore = (node) => {       for (let elt of node.childNodes) {                 if (elt.nodeType == document.ELEMENT_NODE)             if (elt.nodeName == tagName)              found.push(elt);             _explore(elt);       }     }     _explore(node);     return found; }

function byTagName(node, tagName) {     var found = [];     tagName = tagName.toUpperCase();     function explore(node) {       for (var i = 0; i < node.childNodes.length; i++) {         var child = node.childNodes[i];         if (child.nodeType == document.ELEMENT_NODE)           if (child.nodeName == tagName)             found.push(child);           explore(child);       }     }     explore(node);     return found;   }

code fichier↯ JS Bin on jsbin.com

Amélioration du code

code fichier⍖ JS Bin on jsbin.com