Oublions l’opérateur + de concaténation !
let fname = "jsbin";
console.log(`like ${fname}`);
Attention : Avez vous bien vu les : ` litéraux de gabarits `
alt gr 7
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'));
Map recurcive !
Définition :
let map = ( fn, list) => !list.length ? []:[fn( list[0])].concat(map(fn, list.slice(1)));
Utilisation :
map( x=> x+1, [ 1,2,3,4))lire la suite !
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
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
fonction fléchée
Réécriture de :
const arrA = [];
for (var i=0; i < 3; i++) {
arrA.push(function(){
return i;
});
}
console.log(arrA.map(function(f){
return f();})
); // [0,1,2]
avec la syntaxe des fonctions fléchées, le code s'écrit :
const arr = [];
for (let i=0; i < 3; i++) {
arr.push(() => i);
}
console.log(arr.map(f => f())); // [0,1,2]
const arrA = [];
for (var i=0; i < 3; i++) {
arrA.push(function(){
return i;
});
}
console.log(arrA.map(function(f){
return f();})
); // [0,1,2]
avec la syntaxe des fonctions fléchées, le code s'écrit :
const arr = [];
for (let i=0; i < 3; i++) {
arr.push(() => i);
}
console.log(arr.map(f => f())); // [0,1,2]
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");
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 (var valeur of tab) {
if (valeur === 4) {break;}
console.log(valeur);
}
Remarque sur mozilla, on peut utiliser for-of sur les nodeList.
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.
if (valeur === 4) {break;}
console.log(valeur);
}
Remarque sur mozilla, on peut utiliser for-of sur les nodeList.
Hoisting ?
D'une certaine façon
L’apparition de Let pour déclarer les variables a mis en avant le terme de Hoisting.
Hoisting en action !
let fonctionne comme var, la seule différence dans cette analogie est que let fonctionne avec les portées de bloc et var avec les portées des fonctions.L’apparition de Let pour déclarer les variables a mis en avant le terme de Hoisting.
Hoisting en action !
var et let en action
Cas des boucles :
Voici une illustration simple comparant les codes
for ( var i=0 ; i < 3 ; i++ ) {
toto ( i ) // Chaque i pointe sur le même valeur
}for ( let i=0 ; i < 3 ; i++ ) {
toto ( i ) // Chaque i a une valeur différente
}JS Bin on jsbin.com
Exemple
Voici un premier exemple montrant l'impact de l'utilisation de let !
L'utilisation de var dans la boucle, nous oblige à mettre en place une "seconde" closure
JS Bin on jsbin.com
Article pour aller plus loin
Autre exemple
cas du let !
var arrayAffichage = [];
for (let i = 0; i< 3; i++) {
arrayAffichage[i] = function toto() {
console.log(i);
};
}
arrayAffichage[0]();
cas du var !
/*Une "closure" permet de référencer une variable qui existe dans la fonction parent. Ici, elle ne fournit pas la valeur de la variable au moment de sa création, mais fourni la dernière des valeurs dans la fonction parent.
*/
var arrayAffichage = [];
for (var i = 0; i< 3; i++) {
arrayAffichage[i] = affiche;}
function affiche() {
console.log(i);
}
arrayAffichage[0]();
Tester ce code ! /* solution une closure bis : Création d'une référence non partagée'*/
var arrayClosureAffichage = [];
for (var i = 0; i< 3; i++) {
arrayClosureAffichage[i] = afficheClosure(i);
}
function afficheClosure(i) {
return function(){
console.log(i);
};
}
arrayClosureAffichage[0]();
/* Autre soution : itérateur forEach */
var arrayAffichages = [afficheForEach,afficheForEach,afficheForEach];
arrayAffichages.forEach(function(f,i){
f(i);
});
function afficheForEach(i) {
console.log(i);
}
JS Bin on jsbin.com
Autre exemple montrant l'importance de l'utilisation de let versus var !
rempcar var/let dans le code
Inscription à :
Articles (Atom)