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];
Affichage des articles dont le libellé est spread. Afficher tous les articles
Affichage des articles dont le libellé est spread. Afficher tous les articles
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]);
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'));
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 ↭
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");
Inscription à :
Articles (Atom)