Fonctions JavaScript essentielles que tout développeur devrait connaître

JavaScript est un langage polyvalent qui alimente aujourd'hui une grande partie du Web. Parmi ses nombreuses fonctionnalités, certaines fonctions se démarquent par leur utilité et leur optimisation des performances. Dans ce blog, nous explorerons six fonctions JavaScript essentielles qui peuvent améliorer votre boîte à outils de codage : Debounce, Throttle, Currying, Memoization, Deep Clone et une fonction bonus pour faire bonne mesure.

1. Fonction anti-rebond

La fonction anti-rebond est un outil puissant pour limiter la vitesse à laquelle une fonction peut se déclencher. Ceci est particulièrement utile pour optimiser les performances dans des scénarios tels que le redimensionnement de la fenêtre, le défilement ou les événements de frappe. En garantissant qu'une fonction ne s'exécute qu'après un délai spécifié depuis le dernier appel, cela permet d'éviter les goulots d'étranglement des performances.

function debounce(fn, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn.apply(this, args), delay);
    };
}

// Usage
const logResize = debounce(() => console.log('Resized!'), 2000);
window.addEventListener('resize', logResize);

2. Fonction d'accélérateur

La fonction d'accélérateur garantit qu'une fonction est exécutée au plus une fois dans un laps de temps spécifié. Ceci est particulièrement bénéfique pour les événements qui peuvent se déclencher rapidement, tels que le défilement ou le redimensionnement.

function throttle(fn, limit) {
    let lastFunc;
    let lastRan;
    return function(...args) {
        if (!lastRan) {
            fn.apply(this, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(() => {
                if ((Date.now() - lastRan) >= limit) {
                    fn.apply(this, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

// Usage
const logScroll = throttle(() => console.log('Scrolled!'), 2000);
window.addEventListener('scroll', logScroll);

3. Fonction curry

Le

Currying est une technique de programmation fonctionnelle qui transforme une fonction avec plusieurs arguments en une séquence de fonctions, chacune prenant un seul argument. Cela permet une plus grande flexibilité et une plus grande réutilisabilité des fonctions.

function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        }
        return function(...args2) {
            return curried.apply(this, [...args, ...args2]);
        };
    };
}

// Usage
function add(a, b, c) {
    return a + b + c;
}
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // Output: 6

4. Fonction de mémorisation

La

Mémoisation est une technique d'optimisation qui stocke les résultats d'appels de fonctions coûteux et renvoie le résultat mis en cache lorsque les mêmes entrées se reproduisent. Cela peut améliorer considérablement les performances des fonctions nécessitant des calculs coûteux.

function memoize(fn) {
    const cache = {};
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache[key]) {
            return cache[key];
        }
        const result = fn.apply(this, args);
        cache[key] = result;
        return result;
    };
}

// Usage
const fibonacci = memoize(n => (n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2)));
console.log(fibonacci(40)); // Output: 102334155

5. Fonction de clonage profond

Une fonction de clonage profond crée un nouvel objet qui est une copie complète de l'objet d'origine. Cela garantit que les objets imbriqués sont également copiés plutôt que référencés.

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

// Usage
const originalObject = { x: 1, y: { z: 2 } };
const clonedObject = deepClone(originalObject);
clonedObject.y.z = 3;
console.log(originalObject.y.z); // Output: 2

6. Fonction d'aplatissement du tableau

En bonus, nous introduisons la fonction d'aplatissement de tableau, qui transforme un tableau imbriqué en un tableau unidimensionnel. Ceci est utile pour simplifier les structures de données.

function flattenArray(arr) {
    return arr.reduce((accumulator, currentValue) => 
        accumulator.concat(Array.isArray(currentValue) ? flattenArray(currentValue) : currentValue), []);
}

// Usage
const nestedArray = [1, [2, [3, 4], 5], 6];
const flatArray = flattenArray(nestedArray);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Conclusion

Ces six fonctions JavaScript (Debounce, Throttle, Currying, Memoization, Deep Clone et Flatten Array) sont des outils essentiels dans la boîte à outils de tout développeur. Ils améliorent non seulement les performances, mais favorisent également un code plus propre et plus maintenable. En intégrant ces fonctions dans vos projets, vous pouvez optimiser vos applications et améliorer considérablement l'expérience utilisateur. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!