javaScript中如何实现函数缓存，具体应用场景如重复计算，数据查询缓存，递归算法优化......

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。

文章目录

在 JavaScript 中，函数缓存（也称为 memoization）是一种通过存储函数的调用结果来避免重复计算的技术。当函数多次被调用时，如果传入的参数是相同的，则可以直接返回之前计算的结果，而不必重复计算，提升了性能。

如何实现函数缓存

使用闭包实现

可以使用闭包来存储之前的计算结果，并在函数调用时检查缓存中是否已经存在对应结果。如果存在则直接返回缓存值，否则执行函数并将结果存入缓存中。

以下是一个简单的函数缓存的实现：

function memoize(fn) {
    let cache = {}; // 缓存对象

    return function (...args) {
        let key = JSON.stringify(args); // 将参数转换成字符串作为缓存的 key
        if (cache[key]) {
            console.log("从缓存中获取结果"); // 如果缓存中存在结果
            return cache[key];
        } else {
            console.log("计算新结果"); // 否则计算结果
            let result = fn(...args);
            cache[key] = result; // 将结果存入缓存
            return result;
        }
    };
}

// 示例：计算斐波那契数列
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

const memoizedFibonacci = memoize(fibonacci);

console.log(memoizedFibonacci(10)); // 计算新结果
console.log(memoizedFibonacci(10)); // 从缓存中获取结果

代码讲解

memoize 函数创建一个 cache 对象来存储之前的调用结果。
key 是通过将传入的参数（args）转换为字符串来创建的。这使得每组参数都有唯一的键值。
当函数被调用时，首先检查缓存中是否已经存在该结果。如果存在，则直接返回缓存的值。如果不存在，则计算函数结果并存储在缓存中。

优化缓存大小控制

可以进一步优化函数缓存，比如只缓存一定数量的结果，避免缓存过多的无用数据。

function memoize(fn, limit = 10) {
    let cache = new Map(); // 使用 Map 以确保有序性并能轻松控制大小

    return function (...args) {
        let key = JSON.stringify(args);
        if (cache.has(key)) {
            console.log("从缓存中获取结果");
            return cache.get(key);
        } else {
            console.log("计算新结果");
            let result = fn(...args);
            cache.set(key, result);

            // 如果缓存超过设定的大小，删除最早的缓存
            if (cache.size > limit) {
                const firstKey = cache.keys().next().value;
                cache.delete(firstKey);
            }

            return result;
        }
    };
}

这个优化版本使用了 Map，因为 Map 保留了插入顺序，可以方便地删除最早的缓存项，限制缓存的大小。

函数缓存的应用场景

函数缓存特别适用于以下场景：

1. 重复计算的场景

函数缓存的主要目的是减少重复计算，尤其是对于具有相同输入的计算。例如：
数学计算：如斐波那契数列、阶乘、递归等涉及大量重复计算的函数。

const memoizedFactorial = memoize(function factorial(n) {
    return n === 0 ? 1 : n * factorial(n - 1);
});

2. API 调用的结果缓存

当调用外部 API 或者是某些昂贵的操作时，通常会进行缓存，以避免多次请求相同的数据。比如：
数据查询：如果多次查询相同的数据库内容，缓存上一次的查询结果能减少查询次数。
HTTP 请求：避免多次发送相同的请求。

const fetchData = memoize(async function(url) {
    const response = await fetch(url);
    return response.json();
});

3. 递归算法优化

递归算法中，许多问题会多次计算相同的子问题。例如，斐波那契数列的递归实现中，fibonacci(n-1) 和 fibonacci(n-2) 可能会多次计算，缓存可以显著提升性能。

4. 纯函数

在处理纯函数（对于相同的输入，永远返回相同的输出）时，缓存是非常有效的。例如：
字符串操作： 如将一个复杂的字符串处理函数进行缓存，避免对同样的输入重复操作。

5. 高频调用的场景

一些计算密集型的函数，尤其是频繁调用的函数，通过缓存可以显著提升性能。例如：
实时性应用：如在图形处理或游戏开发中，某些计算可能会被频繁调用，通过缓存减少重复计算。

注意事项

缓存失效：当底层数据发生变化时，可能需要考虑缓存的失效机制，以确保数据的一致性。
内存使用：缓存会占用内存，尤其是对于大型对象或长期运行的应用，需要合理设置缓存大小，避免内存泄漏。

总结：

函数缓存 是通过存储函数的计算结果来避免重复计算的技术，在需要频繁调用且相同输入的情况下非常有用。它可以应用于递归算法、API 调用优化、纯函数、以及高频计算的场景。实现方式包括简单的缓存和优化版本，如限制缓存大小，或者使用像 Map 这样的数据结构来提高效率。