当前位置: 首页 > news >正文

Javascript中如何实现函数缓存?函数缓存有哪些应用场景?

今天要聊的一个很经典的问题——如何在JavaScript中实现函数缓存,以及它有哪些应用场景。

我们先来明确一下,函数缓存是什么。简单来说,函数缓存是将函数的运算结果存储起来,以便下次用到相同的输入时,可以直接返回结果,而不需要重新计算。这种方式可以理解为用空间换时间,也就是用缓存存储的空间,换取未来计算时间的节省。

先给个简单的代码例子让大家感受一下:

const add = (a, b) => a + b;
const calc = memoize(add); // 创建一个支持缓存的函数
console.log(calc(10, 20)); // 输出 30
console.log(calc(10, 20)); // 直接从缓存中获取结果,输出 30

是不是很有意思?在这个例子中,calc函数并没有重复计算,而是利用缓存存储的结果直接返回。这种思路在性能优化中非常常见。接下来,我们来详细看看如何实现它。

函数缓存的实现,离不开JavaScript的几个核心概念:闭包柯里化高阶函数

首先说说闭包。闭包的本质是函数加上它能够访问的变量总和。闭包允许我们在一个函数的作用域中保持变量的引用。比如:

function outer() {let a = 1;return function inner() {console.log(a); // 访问外部作用域的变量 a};
}const func = outer();
func(); // 输出 1

在这里,inner函数形成了闭包,它能够访问到外部函数outer中的变量a。闭包为实现函数缓存提供了重要的基础——我们可以利用它保存计算结果。

接下来说柯里化。柯里化是一种把接收多个参数的函数转换为接收一个参数的函数的技巧。比如:

function add(x) {return function (y) {return x + y;};
}console.log(add(3)(4)); // 输出 7

柯里化的好处是,我们可以延迟计算,或者分步计算,这对缓存机制的实现很有帮助。

最后是高阶函数。高阶函数是那些接收函数作为参数,或者返回一个函数的函数。比如:

function withLogging(func) {return function (...args) {console.log(`Calling with ${args}`);return func(...args);};
}const loggedAdd = withLogging((x, y) => x + y);
console.log(loggedAdd(2, 3)); // 输出日志并计算结果

高阶函数让我们可以灵活地扩展已有函数的功能,比如添加缓存逻辑。

结合这三个概念,我们可以实现一个通用的函数缓存工具,如下:

function memoize(func) {const cache = new Map(); // 使用 Map 存储缓存return function (...args) {const key = JSON.stringify(args); // 将参数序列化为字符串作为键if (cache.has(key)) {console.log('从缓存中获取结果:', key);return cache.get(key);}const result = func(...args); // 调用原始函数计算结果cache.set(key, result); // 缓存结果return result;};
}

用法如下:

const add = (a, b) => a + b;
const cachedAdd = memoize(add);console.log(cachedAdd(10, 20)); // 输出 30
console.log(cachedAdd(10, 20)); // 从缓存中获取结果,输出 30

在这个实现中,我们用Map来存储缓存,key是序列化的参数值,这样可以保证每一组参数对应一个缓存结果。调用时,先检查缓存中是否存在结果,存在就直接返回,不存在就计算后存入缓存。

虽然函数缓存非常高效,但它并不适合所有场景。以下是一些常见的适用场景:

1、昂贵的函数调用:比如涉及复杂计算的场景。假设我们需要计算一个斐波那契数列的值:

function fibonacci(n) {if (n <= 1) return n;return fibonacci(n - 1) + fibonacci(n - 2);
}

用递归计算时,很多输入会重复计算。通过缓存优化:

const memoizedFib = memoize(fibonacci);
console.log(memoizedFib(40)); // 快速计算大值

2、输入有限且重复率高:比如函数的输入是有限的枚举值,且经常重复。例如,一个根据用户 ID 获取用户信息的函数:

const getUserInfo = memoize((userId) => {console.log(`Fetching data for user ${userId}`);return { id: userId, name: `User${userId}` }; // 模拟 API 请求
});console.log(getUserInfo(1));
console.log(getUserInfo(1)); // 第二次调用直接从缓存获取

3、纯函数的计算:纯函数是指对于相同输入,总是返回相同输出的函数,比如数学函数:

const square = memoize((x) => x * x);
console.log(square(5)); // 输出 25
console.log(square(5)); // 从缓存中获取,输出 25

4、递归函数的优化:尤其是那些可以利用之前结果的递归场景,比如阶乘计算。

“函数缓存的实现可以依赖闭包、高阶函数和柯里化。核心思路是使用一个存储计算结果的缓存对象(比如Map),每次调用时先检查缓存中是否有结果,如果有则直接返回,否则进行计算并存储结果。”

然后给出简洁的实现代码:

function memoize(func) {const cache = new Map();return function (...args) {const key = JSON.stringify(args);if (cache.has(key)) return cache.get(key);const result = func(...args);cache.set(key, result);return result;};
}

最后补充应用场景,比如复杂计算(如递归函数)和高频调用的纯函数等,显示你的全面思考能力。这样,不仅技术点到位,还能展现你的工程实践思路。

相关文章:

Javascript中如何实现函数缓存?函数缓存有哪些应用场景?

今天要聊的一个很经典的问题——如何在JavaScript中实现函数缓存&#xff0c;以及它有哪些应用场景。 我们先来明确一下&#xff0c;函数缓存是什么。简单来说&#xff0c;函数缓存是将函数的运算结果存储起来&#xff0c;以便下次用到相同的输入时&#xff0c;可以直接返回结…...

子页面访问父页面

子页面访问父页面的方式主要依赖于页面之间的关系&#xff0c;特别是它们是否处于同一域、是否是嵌套在 <iframe> 中、或者通过弹出窗口打开。下面是几种常见的子页面访问父页面的方法&#xff1a; 1. 通过 window.parent 访问父页面&#xff08;适用于嵌套的 iframe&am…...

芯片级IO (Pad) Ring IP Checklist

SoC top顶层数字后端实现都会涉及到IO Ring &#xff08;PAD Ring&#xff09;的设计。这里面包括VDD IO,VDDIO IO, Signal IO, Corner IO&#xff0c;Filler IO&#xff0c;IO power cut cell等等。 数字后端零基础入门系列 | Innovus零基础LAB学习Day2 数字IC后端实现TOP F…...

计算机毕业设计论文指导

计算机毕业设计论文指导 计算机毕业设计辅导一站式&#xff01;太香了&#x1f4aa; [赞R][赞R][赞R]嗨喽&#xff01;计算机专业的宝子们&#xff01; 计算机毕设辅导专业靠谱的他来了&#xff01;&#xff01; 是不是还在为选题程序不会做而感到苦难&#xff1f; 论文没思路赶…...

Electron-Vue 开发下 dev/prod/webpack server各种路径设置汇总

背景 在实际开发中&#xff0c;我发现团队对于这几个路径的设置上是纯靠猜的&#xff0c;通过一点点地尝试来找到可行的路径&#xff0c;这是不应该的&#xff0c;我们应该很清晰地了解这几个概念&#xff0c;以下通过截图和代码进行细节讲解。 npm run dev 下的路径如何处理&…...

Vue.js前端框架教程9:Vue插槽slot用法

文章目录 插槽&#xff08;Slots&#xff09;无名插槽&#xff08;默认插槽&#xff09;具名插槽reference 插槽使用 v-slot 的缩写语法 插槽&#xff08;Slots&#xff09; 在 Vue 中&#xff0c;插槽&#xff08;Slots&#xff09;是一种组件内容分发的机制&#xff0c;允许…...

初学stm32 --- NVIC中断

目录 STM32 NVIC 中断优先级管理 NVIC_Type: ISER[8]&#xff1a; ICER[8]&#xff1a; ISPR[8]&#xff1a; ICPR[8]&#xff1a; IABR[8]&#xff1a; IP[240]&#xff1a; STM32 的中断分组&#xff1a; 中断优先级分组函数 NVIC_PriorityGroupConfig 中断初始化函…...

Jest 入门指南:从零开始编写 JavaScript 单元测试

前言 在前端开发中&#xff0c;单元测试已经成为确保代码质量和稳定性的关键步骤。Jest 作为由 Facebook 开发和维护的功能强大的 JavaScript 测试框架&#xff0c;以其易于配置、丰富的功能和开箱即用的特性&#xff0c;成为众多开发者的首选工具。本文旨在引导你从零开始&am…...

【Java Web】Axios实现前后端数据异步交互

目录 一、Promise概述 二、Promise基本用法 三、async和await关键字 四、Axios介绍 4.1 Axios基本用法 4.2 Axios简化用法之get和post方法 五、Axios拦截器 六、跨域问题处理 一、Promise概述 axios是代替原生的ajax实现前后端数据交互的一套新解决方案&#xff0c;而…...

React 第十七节 useMemo用法详解

概述 useMemo 是React 中的一个HOOK&#xff0c;用于根据依赖在每次渲染时候缓存计算结果&#xff1b; 大白话就是&#xff0c;只有依赖项发生变化时候&#xff0c;才会重新渲染为新计算的值&#xff0c;否则就还是取原来的值&#xff0c;有点类似 vue 中的 computed 计算属性…...

鸿蒙项目云捐助第十五讲云数据库的初步使用

鸿蒙项目云捐助第十五讲云数据库的初步使用 在华为云技术使用中&#xff0c;前面使用了云函数&#xff0c;接下来看一下华为云技术中的另外一个技术云数据库的使用。 一、云数据库的创建 这里使用华为云数据库也需要登录到AppGallery Connect平台中&#xff0c;点击进入到之…...

如何构建一个可信的联邦RAG系统。

今天给大家分享一篇论文。 题目是&#xff1a;C-RAG&#xff1a;如何构建一个可信的联邦检索RAG系统。 论文链接:https://arxiv.org/abs/2412.13163 论文概述 尽管大型语言模型 (LLM) 在各种应用中展现出令人印象深刻的能力&#xff0c;但它们仍然存在可信度问题&#xff…...

【深度学习之三】FPN与PAN网络详解

FPN与PAN&#xff1a;深度学习中的特征金字塔网络与路径聚合网络 在深度学习的领域里&#xff0c;特征金字塔网络&#xff08;Feature Pyramid Networks&#xff0c;简称FPN&#xff09; 和 路径聚合网络&#xff08;Path Aggregation Network&#xff0c;简称PAN&#xff09;…...

Qt学习笔记第71到80讲

第71讲 事件过滤器的方式实现滚轮按键放大 事件体系&#xff08;事件派发 -> 事件过滤->事件分发->事件处理&#xff09;中&#xff0c;程序员主要操作的是事件分发与事件处理。我们之前已经通过继承QTextEdit来重写事件实现Ctrl加滚轮的检测&#xff0c;还有一种处理…...

以管理员身份运行

同时按下Ctrl Shift Esc键打开任务管理器&#xff0c;在任务管理器的左上角&#xff0c;点击“文件”菜单&#xff0c;在下拉菜单中选择“新建任务” 在弹出的对话框中&#xff0c;输入您想要运行的程序的名称。如果您不确定程序的确切名称&#xff0c;可以点击“浏览”来找到…...

用 Python 实现井字棋游戏

一、引言 井字棋&#xff08;Tic-Tac-Toe&#xff09;是一款经典的两人棋类游戏。在这个游戏中&#xff0c;玩家轮流在 3x3 的棋盘上放置自己的标记&#xff0c;通常是 “X” 和 “O”&#xff0c;第一个在棋盘上连成一线&#xff08;横、竖或斜&#xff09;的玩家即为获胜者。…...

06 实现自定义AXI DMA驱动

为什么要实现自定义AXI DMA驱动 ZYNQ 的 AXI DMA 在 Direct Register DMA &#xff08;即 Simple DMA&#xff09;模式下可以通过 AXIS 总线的 tlast 提前结束传输&#xff0c;同时还可以在 BUFFLEN 寄存器中读取到实际传输的字节数&#xff0c;但是通过 Linux 的 DMA 驱动框架…...

SpringBoot集成ENC对配置文件进行加密

在线MD5生成工具 配置文件加密&#xff0c;集成ENC 引入POM依赖 <!-- ENC配置文件加密 --><dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>2.1.2</ver…...

初学stm32 ——— 串口通信

目录 STM32的串口通信接口 UART异步通信方式特点&#xff1a; 串口通信过程 STM32串口异步通信需要定义的参数: USART框图&#xff1a; 常用的串口相关寄存器 串口操作相关库函数 ​编辑 串口配置的一般步骤 STM32的串口通信接口 UART&#xff1a;通用异步收发器USART&am…...

qwt 多Y轴 项目效果

项目场景&#xff1a; 在做一个半导体上位机软件项目实践中&#xff0c;需要做一个曲线展示和分析界面&#xff0c;上位机主题是用qt框架来开发&#xff0c;考虑到目前qt框架的两种图标库&#xff0c;一个是qcustomplot 一个是 qwt。之所以采用qwt &#xff0c;根本原因是因为…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...