【前端学习——js篇】7.函数缓存

具体见:https://github.com/febobo/web-interview

7.函数缓存

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

本质上就是用空间(缓存存储)换时间(计算过程)

常用于缓存数据计算结果和缓存对象。

其实现主要通过闭包、柯里化和高阶函数。

下面主要介绍下柯里化:

①柯里化

柯里化(currying)是一种函数式编程的概念,指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的过程。这些接受单一函数的函数可以依次调用,每次调用都会返回一个新的函数,直到所有参数收集完毕,最好返回最终的结果。


具体例子

js 复制代码
//柯里化
// 原始的加法函数
function add(x, y) {
    return x + y;
}

// 柯里化后的加法函数
function curriedAdd(x) {
    return function(y) {
        return x + y;
    };
}

// 使用柯里化后的函数
const add5 = curriedAdd(5);
console.log(add5(3)); // 输出: 8

const add7 = curriedAdd(7);
console.log(add7(3)); // 输出: 10

在上面的示例中,add 是一个接受两个参数的加法函数。通过柯里化,我们定义了一个 curriedAdd 函数,它接受一个参数 x,并返回一个函数,这个返回的函数接受参数 y,并返回 x + y 的结果。通过这种方式,我们可以先传递一个参数 x,然后再传递另一个参数 y,实现了对多参数函数的拆分调用。

通过柯里化,我们可以将一个接受多个参数的函数转换为一个接受单个参数的函数链。这种技术有助于简化函数的调用方式,提高函数的灵活性和复用性。

②高阶函数

高阶函数(Higher-Order Functions)是指接受一个或多个函数作为参数,返回一个函数的函数。换句话说,高阶函数要么接受一个或多个函数作为参数,要么返回一个函数,或者同时具备这两个特点。

在js 中,函数被视为一等公民,因此可以像其他值一样被传递和操作。这种特性使得函数可以作为参数传递给其他函数,也可以作为其他函数的返回值。


具体例子

js 复制代码
// 高阶函数示例:接受一个函数作为参数
function operate(func, x, y) {
    return func(x, y);
}

function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

console.log(operate(add, 3, 4)); // 输出: 7
console.log(operate(multiply, 3, 4)); // 输出: 12

// 高阶函数示例:返回一个函数
function createMultiplier(multiplier) {
    return function(x) {
        return x * multiplier;
    };
}

const double = createMultiplier(2);
console.log(double(5)); // 输出: 10

在上面的示例中,operate 是一个接受一个函数作为参数的高阶函数,它可以根据传入的函数不同来执行不同的操作。另外,createMultiplier 是一个返回函数的高阶函数,它返回一个乘法函数,用于计算传入值的倍数。

③函数缓存

实现原理也很简单,把参数和对应的结果数据存在一个对象中,调用时判断参数对应的数据是否存在,存在就返回对应的结果数据,否则就返回计算结果。


js 复制代码
const memoize = function (func, content) {
    let cache = Object.create(null)
    content = content || this //函数被定义时的上下文
    return (...key) => {
        console.log(cache);
      if (!cache[key]) {
        cache[key] = func.apply(content, key)
      }
      return cache[key]
    }
  }

function add(a,b){
    return a + b;
}

const calc = memoize(add);
const num1 = calc(100,200);
//输出cache可以看到:[Object: null prototype] { '100,200': 300}
const num2 = calc(100,200); //直接从缓存得到结果
const num3 = calc(1000,2000);
console.log(num2); 

过程分析:

  • 在当前函数作用域定义了一个空对象,用于缓存运行结果
  • 运用柯里化返回一个函数,返回的函数因为作用域链的原因,可以访问到cache
  • 然后判断输入参数是不是在cache的中。如果已经存在,直接返回cache的内容,如果没有存在,使用函数func对输入参数求值,然后把结果存储在cache中。
④应用场景

虽然使用缓存效率是非常高的,但并不是所有场景都适用,因此千万不要极端的将所有函数都添加缓存

以下几种情况下,适合使用缓存:

  • 对于昂贵的函数调用,执行复杂计算的函数
  • 对于具有有限且高度重复输入范围的函数
  • 对于具有重复输入值的递归函数
  • 对于纯函数,即每次使用特定输入调用时返回相同输出的函数
相关推荐
Rubin932 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子2 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598243 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug5 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo5 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan5 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
软件黑马王子10 分钟前
C#系统学习第八章——字符串
开发语言·学习·c#
撰卢29 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机34 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28137 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端