Optimiser les fonctions JavaScript avec la mémoïsation

JavaScriptJavaScriptBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, nous allons explorer le concept de la mémoïsation en JavaScript. La mémoïsation est une technique utilisée pour optimiser les performances des fonctions en mettant en cache les résultats d'appels de fonctions coûteux et en renvoyant le résultat mis en cache lorsqu'on a à nouveau les mêmes entrées. Grâce à ce laboratoire, nous allons apprendre à implémenter la mémoïsation en JavaScript en utilisant l'objet Map.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/closures("Closures") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") subgraph Lab Skills javascript/variables -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} javascript/data_types -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} javascript/arith_ops -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} javascript/comp_ops -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} javascript/functions -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} javascript/obj_manip -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} javascript/closures -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} javascript/higher_funcs -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} javascript/debugging -.-> lab-28494{{"Optimiser les fonctions JavaScript avec la mémoïsation"}} end

Mémoïsation d'une fonction

Pour commencer à coder, ouvrez le Terminal/SSH et tapez node. Cette fonction renvoie la fonction mémoïsée (mise en cache). Voici les étapes pour utiliser cette fonction :

  1. Instanciez un nouvel objet Map pour créer un cache vide.
  2. Retournez une fonction qui prend un seul argument qui sera fourni à la fonction mémoïsée. Avant d'exécuter la fonction, vérifiez si la sortie pour cette valeur d'entrée spécifique est déjà mise en cache. Si c'est le cas, renvoyez la sortie mise en cache ; sinon, stockez-la et renvoyez-la.
  3. Utilisez le mot clé function pour permettre à la fonction mémoïsée d'avoir son contexte this modifié si nécessaire.
  4. Définissez le cache comme propriété sur la fonction renvoyée pour permettre d'y accéder.

Voici le code qui implémente la fonction de mémoïsation :

const memoize = (fn) => {
  const cache = new Map();
  const cached = function (val) {
    return cache.has(val)
      ? cache.get(val)
      : cache.set(val, fn.call(this, val)) && cache.get(val);
  };
  cached.cache = cache;
  return cached;
};

Pour voir comment cette fonction fonctionne, vous pouvez l'utiliser avec la fonction anagrams. Voici un exemple :

const anagramsCached = memoize(anagrams);
anagramsCached("javascript"); // prend beaucoup de temps
anagramsCached("javascript"); // renvoie pratiquement instantanément car c'est mis en cache
console.log(anagramsCached.cache); // La carte d'anagrammes mise en cache

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur la mémoïsation d'une fonction. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.