Affichage des articles dont le libellé est spread. Afficher tous les articles
Affichage des articles dont le libellé est spread. Afficher tous les articles

DOM : ...

Il est facile de transformer une liste de nœud en tableau (voir array.from)

// select input
const eltsInput = document.querySelectorAll("input");

// utilisation de spread pour créer un array
const nodesArray = [...eltsInput];

itérations sur les nodeList

let elements = document.querySelectorAll("div"),
    callback = (el) => { console.log(el.name); };

// Spread operator
[...elements].forEach(callback);

// Array.from()
Array.from(elements).forEach(callback);

// for...of statement
for (let div of elements) callback(div);

fichier code

JS Bin on jsbin.com

//itérator
elements[Symbol.iterator]();
elements.forEach(callback)

console.log("-----");
elements[Symbol.iterator] = function* () {
    yield "un nd";
    yield 2;
    yield "fin";
};

console.log([...elements]);

... en action


Voici un élégant moyen de remplacer concat.

const T1 = ["Dupont", "Whells", "toto"];

const T2 = ["Dupond", "Whells", "titi"];

console.log(T1);
console.log(...T1);
console.log( [...T1 , ...T2] );



const promos = [
  { promo: "L3miage", etudiants: ["Dupont", "Whells", "Toto"]},
  { promo: "L2miage", etudiants: ["Dupond", "Pathé"]},
  { promo: "M1miage", etudiants: ["Audu", "Baby"]},
]

const tousEtudiants = promos.reduce(function(prev, curr) {
  return [...prev, ...curr.etudiants];
},[]);

console.log(tousEtudiants.sort());

opérateur ...

Oublions un instant ES5

console.log(['j','s','b','i','n'].sort());

var sortRestArgs  = function(){
  return [].slice.call(arguments).sort();
};
console.log(sortRestArgs('j','s','b','i','n'));

l'opérateur  ...

let sortRestArgs = (...theArgs) => theArgs.sort();

console.log(sortRestArgs('j','s','b','i','n'));

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