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

函数缓存就是将函数运算的结果进行缓存。

本质上是利用空间换时间。

常用于缓存数据计算结果和缓存对象。缓存只是一个临时的数据存储,它保存数据,为了方便将来对该数据的请求时,可以更快的得到处理。

缓存函数

实现一个缓存函数,主要依靠闭包、柯里化和高阶函数。

闭包:

javascript 复制代码
(function () {
  var a = 1;
  function add() {
    const b = 2
    let sum = b + a
    console.log(sum); // 3
  }
  add()
})()

柯里化:

把接受多个参数的函数转化为接受一个参数的函数。

javascript 复制代码
// 非柯里化函数
var add = function (x, y) {
  return x + y;
}
add(3, 4) //7
// 柯里化函数
var add2 = function (x) {
  //** 返回函数 **
  return function (y) {
    return x + y;
  }
}
add2(3)(4) //7

也就是把一个二元函数拆分为两个一元函数

高阶函数,通过接收其他函数作为参数或者返回其他函数的函数。

缓存函数代码:

javascript 复制代码
const memoize = function (func, content) {
  let cache = Object.create(null)
  content = content || this
  return (...key) => {
    if (!cache[key]) {
      cache[key] = func.apply(content, key)
    }
    return cache[key]
  }
}
  1. 在当前函数作用域内定义一个空对象,用来缓存运行的结果
  2. 使用柯里化返回一个函数,返回的函数由于闭包的特性,可以访问缓存
  3. 然后判断输入参数是不是存在缓存中,如果存在,就直接返回缓存中的数据,如果缓存中不存在,使用函数对输入输入的参数进行运算,然后把结果存储到缓存中。

应用场景

使用缓存的效率是非常高的,但并不是所有的场景中都适用,在这几个场景中,适合使用缓存:

  • 对于昂贵的函数调用,执行复杂计算的函数
  • 对于具有有限并且高度重复输入范围的函数
  • 对于具有重复输入值的递归函数'
  • 对于纯函数,也就是传入任何参数,都返回相同的结果,这时候就适用缓存。
相关推荐
Web小助手26 分钟前
js高级程序设计(日期)
javascript
Web小助手26 分钟前
js高级程序设计(4/5章节)
javascript
山有木兮木有枝_28 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
十盒半价28 分钟前
从递归到动态规划:手把手教你玩转算法三剑客
javascript·算法·trae
Web小助手35 分钟前
js高级程序设计(1/2章节)
javascript
长路 ㅤ   1 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
独立开阀者_FwtCoder1 小时前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
张晓~183399481212 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周2 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02112 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js