JavaScript 函数缓存：程序员的脑力保温杯_js 题目缓存功能-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44996048/article/details/143117610

函数缓存？别慌，不是什么高深莫测的技术，而是一个让你的代码聪明到“懒惰”的小技巧。简单点说，就是用缓存让函数记住它干过的事儿，下次再遇到类似问题，直接从备忘录里抄答案。感觉是不是像学生时代那个带了小抄的学霸？

函数缓存是什么？

函数缓存（Function Caching）就是让函数在计算一次结果后，保存这个结果。下次如果再遇到相同的输入，直接拿之前保存的结果出来，不用再重新计算。

举个例子，假设你是个外卖小哥，每送一份外卖你都得记住路程。下一次遇到同样的地址，你会不会觉得：“我都来过这儿，干嘛还要打开地图？” 那你就可以直接通过记忆把外卖送到。函数缓存的原理也类似，让函数“记忆”之前的输入输出，避免重复计算。

如何实现函数缓存？

JavaScript 中实现函数缓存并不难。下面我们用一个例子来展示如何给函数加上缓存功能。假设我们有个简单的函数，用于计算数字平方：

function square(n) {
    return n * n;
}

这个函数每次调用时都会重新计算平方，那我们怎么让它变聪明点呢？我们可以使用对象（Object）作为缓存容器，存储已经计算过的结果。

function cachedSquare() {
    let cache = {};
    
    return function(n) {
        if (cache[n] !== undefined) {
            console.log("从缓存中获取结果");
            return cache[n];
        }
        console.log("重新计算结果");
        let result = n * n;
        cache[n] = result;
        return result;
    };
}

const squareWithCache = cachedSquare();

console.log(squareWithCache(4)); // 重新计算结果 16
console.log(squareWithCache(4)); // 从缓存中获取结果 16

在这个例子中，我们使用 cache 对象存储每个参数 n 的平方值。第一次计算时，函数会重新计算并把结果存到 cache 里。下次再调用时，如果参数一样，就直接从 cache 里拿结果出来，完全不需要重新计算。

这就像是你自己给自己贴了个小抄，每次有相同的问题，你都能快速查到答案，不必费脑子了！

小心缓存的大小：别让缓存变成垃圾堆！

当然，缓存太多也不是好事儿。想象你是个收藏癖，一直往脑袋里塞各种没用的东西，时间长了脑袋也会装不下。所以，实际应用中，我们可以给缓存设置一个大小限制，或者采用一些缓存淘汰策略，比如常用的 LRU（最近最少使用）策略。

函数缓存的应用场景

那这玩意儿能用在哪些地方呢？别急，函数缓存不仅仅是“装酷”，它在实际开发中可是非常有用的。

1. 复杂计算

当你处理复杂、重复性很高的计算时，函数缓存能帮你省下大量的计算时间。比如斐波那契数列，直接来看代码对比：

没有缓存的斐波那契：

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(40)); // 时间太长...

有缓存的斐波那契：

function cachedFibonacci() {
    let cache = {};
    
    return function(n) {
        if (cache[n] !== undefined) {
            return cache[n];
        }
        if (n <= 1) {
            return n;
        }
        cache[n] = cachedFibonacci()(n - 1) + cachedFibonacci()(n - 2);
        return cache[n];
    };
}

const fib = cachedFibonacci();
console.log(fib(40)); // 快速计算

斐波那契数列是个经典例子，递归计算非常费时，但有了缓存后，就能大幅提升性能。每次计算结果后都记下来，避免重复计算那些早已知道的值。

2. API 请求

如果你需要频繁调用 API 请求，而这些请求的数据变化不大，或者你只想在短时间内重复调用获取相同数据，那么函数缓存可以帮你减少重复的网络请求，提升性能。

假设我们有一个获取用户数据的 API 请求：

function getUserData(userId) {
    return fetch(`https://api.example.com/user/${userId}`)
        .then(response => response.json());
}

可以改写为：

function cachedGetUserData() {
    let cache = {};

    return function(userId) {
        if (cache[userId]) {
            return Promise.resolve(cache[userId]);
        }
        return fetch(`https://api.example.com/user/${userId}`)
            .then(response => response.json())
            .then(data => {
                cache[userId] = data;
                return data;
            });
    };
}

const getUserDataWithCache = cachedGetUserData();

这样做，当用户数据没有改变时，函数会直接从缓存中返回结果，避免重复发送网络请求。

3. DOM 操作

在频繁的 DOM 操作中，如果你要多次获取同一个 DOM 元素（比如一个按钮或者输入框），你也可以使用缓存来避免每次都去查找 DOM 节点。

function getButton() {
    return document.querySelector("#myButton");
}

function cachedGetButton() {
    let cache;
    
    return function() {
        if (!cache) {
            cache = document.querySelector("#myButton");
        }
        return cache;
    };
}

const getCachedButton = cachedGetButton();