Ceci est une ancienne révision du document !
JavaScript
Memo
Traitement des chaînes de caractères
Remplacement des caractères spéciaux
function removeAccents (text) {
return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}
Traitement des tableaux
Tri multicritères
people.sort((a, b) => a.firstname.localeCompare(b.firstname) || a.lastname.localeCompare(b.lastname) || a.age - b.age)
Variante
people.sort((a, b) => {
const compFirstname = a.firstname.localeCompare(b.firstname)
const compLastname = a.lastname.localeCompare(b.lastname)
const compAge = a.age - b.age
return compFirstname || compLastname || compAge
})
Traitement des objets
Tri des clés
Object.keys(this.toDetail).sort().reduce(
(obj, key) => {
obj[key] = this.toDetail[key]
return obj
}, {}
)
Gestion des appels successifs
Debounce
Appeler qu'une seule fois une fonction au début ou à la fin d'une succession de déclenchements d'un événement.
function debounce (delay, callback) {
var timeout = null
return function () {
if (timeout) {
clearTimeout(timeout)
}
var args = arguments
timeout = setTimeout(function () {
callback.apply(null, args)
timeout = null
}, delay)
}
}
window.onresize = debounce(250, function () {
console.log('e')
})
throttle
Exécuter une fonction de manière périodique durant la séquence de déclenchements.
function throttle(delay, callback) {
var previousCall = new Date().getTime()
return function () {
var time = new Date().getTime()
if ((time - previousCall) >= delay) {
previousCall = time
callback.apply(null, arguments)
}
}
}
window.onresize = throttle(250, function () {
console.log('e')
})
Manipulation du DOM
Attendre la présence d'un élément
function waitForElement (selector, callback) {
const wait = setInterval(function () {
const element = document.querySelector(selector);
if (element !== null) {
callback(element);
clearInterval(wait);
}
}, 100);
}