boucle let/var

const arr = [];
for (var i=0; i < 3; i++) {
    arr.push(() => i);
}

console.log(arr.map(f => f()));

const arrL = [];
for (let i=0; i < 3; i++) {
    arrL.push(() => i);
}

console.log(arrL.map(f => f()));
JS Bin on jsbin.com

Travailler sur des nodeList (arraylike)

Array.from (arrayLike [ , mapfn [ , thisArg ] ] ); 

L'exemple suivant, montre avec quelle facilité, on crée un tableau contenant le texte et la position de chaque élément H1.
let headings = Array.from(document.querySelectorAll('article h1'), function(el) {
  return {
    "pos": el.getBoundingClientRect().top,
    "text": el.textContent
  }
});

headings = [
{
  pos: 19.90625,
  text: "aray from"
}, {
  pos: 671.71875,
  text: "MapReduce"
}, {
  pos: 1278.53125,
  text: "map"
}, {
  pos: 1849.34375,
  text: "modéle"
}
]

Dans l'exemple suivant, on utilise un événement (pensez à utiliser le scrool).

fichier test ↭

JS Bin on jsbin.com

L'exemple suivant montre une utilisation possible du map équivalent à un foreach ( voir remarque suivante)

fichier ↝
JS Bin on jsbin.com

Note : la fonction map renvoie un tableau qui n'est pas exploité dans l'exemple précédent !

exemple :
window.addEventListener("resize",
                                                     function(){
                                                                  Array.from(document.querySelectorAll('p'),
                                                                                      el =>  el.innerHTML = el.offsetWidth);
                                                      },true);

fichier test (modifier la largeur de la fenêtre ) 

Array.from(obj, mapFn, thisArg) correspond exactement à 
Array.from(obj).map(mapFn, thisArg), 
sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les tableaux typés (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié). [ref mozilla]

Autre idées : spread

let elements = document.querySelectorAll("div:nth-child(2n)"),
    color = el =>  el.classList.add("blue");


[...elements].forEach(color);

JS Bin on jsbin.com

Parcours récursif + action 

findText = (node,text) =>

//action

(node.nodeType == document.TEXT_NODE && node.data.indexOf(text) > -1)

? node.parentElement.classList.add("red")

//Parcours sur enfant

    :Array.from(node.childNodes, enfant =>  findText(enfant,text));

findText(document.body,"text_à_trouver");

Histoire de la boucle

Il y a longtemps, on écrivait : 

for (var index = 0; index < tab.length; index++) {
  console.log(tab[index]);
}

Amélioration

tab.forEach(function (_,index) {
  if (index == 1) return;
  console.log(index);
});

A utiliser sur des propriétés

tab.color ="blue";
for (var index in tab) {
  var nb = 1+index;
  console.log(nb + " "+ tab[index]);
}

for-of

A utiliser sur des données.

for (var valeur of tab) {
    if (valeur === 4) {break;}
    console.log(valeur);
}
Remarque sur mozilla, on peut utiliser for-of sur les nodeList.