使用记忆化优化JavaScript函数

JavaScriptJavaScriptBeginner
立即练习

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

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索 JavaScript 中的记忆化(memoization)概念。记忆化是一种通过缓存昂贵函数调用的结果,并在再次出现相同输入时返回缓存结果来优化函数性能的技术。通过本实验,我们将学习如何使用 Map 对象在 JavaScript 中实现记忆化。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced 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{{"`使用记忆化优化JavaScript函数`"}} javascript/data_types -.-> lab-28494{{"`使用记忆化优化JavaScript函数`"}} javascript/arith_ops -.-> lab-28494{{"`使用记忆化优化JavaScript函数`"}} javascript/comp_ops -.-> lab-28494{{"`使用记忆化优化JavaScript函数`"}} javascript/functions -.-> lab-28494{{"`使用记忆化优化JavaScript函数`"}} javascript/obj_manip -.-> lab-28494{{"`使用记忆化优化JavaScript函数`"}} javascript/closures -.-> lab-28494{{"`使用记忆化优化JavaScript函数`"}} javascript/higher_funcs -.-> lab-28494{{"`使用记忆化优化JavaScript函数`"}} javascript/debugging -.-> lab-28494{{"`使用记忆化优化JavaScript函数`"}} end

记忆化函数

要开始编码,请打开终端/SSH 并输入 node。此函数返回记忆化(缓存)函数。以下是使用此函数的步骤:

  1. 实例化一个新的 Map 对象以创建一个空缓存。
  2. 返回一个接受单个参数的函数,该参数将提供给记忆化函数。在执行函数之前,检查该特定输入值的输出是否已被缓存。如果是,则返回缓存的输出;否则,存储并返回它。
  3. 使用 function 关键字,以便在必要时允许记忆化函数的 this 上下文发生变化。
  4. cache 设置为返回函数的一个属性,以便可以访问它。

以下是实现记忆化函数的代码:

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;
};

要了解此函数的工作原理,可以将其与 anagrams 函数一起使用。以下是一个示例:

const anagramsCached = memoize(anagrams);
anagramsCached("javascript"); // 耗时较长
anagramsCached("javascript"); // 由于已缓存,几乎立即返回
console.log(anagramsCached.cache); // 缓存的变位词映射

总结

恭喜你!你已经完成了“记忆化函数”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程