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

应用场景

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

  • 对于昂贵的函数调用,执行复杂计算的函数
  • 对于具有有限并且高度重复输入范围的函数
  • 对于具有重复输入值的递归函数'
  • 对于纯函数,也就是传入任何参数,都返回相同的结果,这时候就适用缓存。
相关推荐
一路向前的月光2 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   2 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web2 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
Jiaberrr3 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
安冬的码畜日常5 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ5 小时前
html+css+js实现step进度条效果
javascript·css·html
john_hjy6 小时前
11. 异步编程
运维·服务器·javascript
风清扬_jd6 小时前
Chromium 中JavaScript Fetch API接口c++代码实现(二)
javascript·c++·chrome
yanlele6 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范