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 ↭
L'exemple suivant montre une utilisation possible du map équivalent à un foreach ( voir remarque suivante)
fichier ↝
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);
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");