JavaScript Memoization 缓存函数使用说明
作者:函数茶馆时间:2026-10-24 22:52:47浏览:371
本文介绍 JavaScript 中的 Memoization(记忆化)技术,通过缓存函数计算结果来优化性能。文章提供了完整的 Memoization 函数实现代码,解释了如何利用闭包存储缓存对象、处理多参数以及支持重新获取机制,并展示了如何在实际场景中应用该模式以减少重复计算。
示例代码与问题背景
示例代码如下:
var flower= function(){
var t=0,i=0;
for(;i<5000000;i++){
t++;
}
return t;
} 函数 flower 返回变量 t 的值。
假设该函数的执行耗时约为 2-3 秒。
利用 Memoization(记忆化)函数,当再次查询相同参数时,可直接返回预先缓存的值,从而立即返回结果;
Memoization 函数
Memoization 函数实现原理
Memoization 函数的实现代码如下:
var Memoize = function(fn, cache, refetch, obj){
cache = cache || {};//用于存储缓存结果的对象
return function(){
var k = arguments[1] ? Array.prototype.join.call(arguments, '__') : arguments[0];//若存在多个参数,则使用'__'连接;否则仅使用第一个参数作为键
if (!(k in cache) || (refetch && cache[k] == refetch)) { //若缓存中不存在该键,或启用了 refetch 且当前缓存值等于指定的 refetch 值,则重新计算
cache[k] = fn.apply(obj || fn, arguments); //调用原函数,obj 参数可用于指定 this 指向
}
return cache[k];//返回缓存或新计算的结果
}
} Demo:
完整 Demo 示例
<!DOCTYPE html> <html> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> </BODY> </HTML> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
作者最新文章
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
