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. 然后判断输入参数是不是存在缓存中,如果存在,就直接返回缓存中的数据,如果缓存中不存在,使用函数对输入输入的参数进行运算,然后把结果存储到缓存中。

应用场景

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

  • 对于昂贵的函数调用,执行复杂计算的函数
  • 对于具有有限并且高度重复输入范围的函数
  • 对于具有重复输入值的递归函数'
  • 对于纯函数,也就是传入任何参数,都返回相同的结果,这时候就适用缓存。
相关推荐
天天码行空几秒前
Bootstrap Table企业级web数据表格集成框架
前端·javascript·开源
Hilaku9 分钟前
用好了 defineProps 才叫会用 Vue3,90% 的写法都错了
前端·javascript·vue.js
英宋11 分钟前
ckeditor5的研究 (2):对 CKEditor5 进行设计,并封装成一个可用的 vue 组件
前端·javascript
古夕11 分钟前
搞定滚动穿透
前端·javascript
英宋12 分钟前
ckeditor5的研究 (3):初步使用 CKEditor5 的 事件系统 和 API
前端·javascript
Danta17 分钟前
从 0 开始学习 Three.js(2)😁
前端·javascript·three.js
就是我21 分钟前
开发“业务组件库”,该从哪里入手?
前端·javascript·面试
Mintopia23 分钟前
在数字画布上雕刻曲线:NURBS 的奇幻冒险之旅
前端·javascript·计算机图形学
Mintopia32 分钟前
Three.js 力导向图:让数据跳起优雅的华尔兹
前端·javascript·three.js
晓得迷路了1 小时前
栗子前端技术周刊第 84 期 - Vite v7.0 beta、Vitest 3.2、Astro 5.9...
前端·javascript·vite