前端面试题-Javascript中如何实现函数缓存?函数缓存有哪些应用场景?（2024.2.19）

一、概念

函数缓存就像是一个记事本，它记住了函数每次计算的结果。当函数再次遇到相同的输入时，它不再重新计算，而是直接从记事本中查找并返回之前的计算结果。

这个记事本就是一个简单的存储空间，通过记录每次函数调用的输入和输出，来避免不必要的计算，提高效率。这在处理一些计算量较大、但结果常常相同的函数时很有用，就像查字典一样，遇到相同的词汇就直接翻到上次查过的页面，不再重新查找。

二、如何实现

实现函数缓存的一种简单方式是使用闭包和一个对象来存储计算结果

javascript 复制代码

function memoize(func) {
  const cache = {}; // 用于存储计算结果的缓存对象

  return function (...args) {
    const key = JSON.stringify(args); // 将函数参数转换成字符串作为缓存的键

    if (cache.hasOwnProperty(key)) {
      // 如果缓存中有结果，则直接返回缓存的结果
      console.log('Fetching from cache');
      return cache[key];
    } else {
      // 如果缓存中没有结果，则计算结果并存入缓存
      console.log('Calculating result');
      const result = func.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

// 示例使用
const add = (a, b) => {
  console.log('Adding');
  return a + b;
};

const memoizedAdd = memoize(add);

console.log(memoizedAdd(1, 2)); // Calculating result, Adding, 3
console.log(memoizedAdd(1, 2)); // Fetching from cache, 3
console.log(memoizedAdd(3, 4)); // Calculating result, Adding, 7
console.log(memoizedAdd(3, 4)); // Fetching from cache, 7

三、有哪些应用场景

递归函数优化： 当递归函数中存在相同的参数组合时，通过函数缓存可以避免重复计算，提高递归函数的效率。
计算密集型操作： 对于一些需要较长时间计算的函数，可以使用函数缓存来避免重复计算，特别是当函数的输出在相同输入下始终相同的情况。
API调用缓存： 在使用远程API或服务端数据时，函数缓存可以用于缓存请求的结果，减少对远程服务器的请求次数，提高响应速度。
页面性能优化： 在一些需要频繁计算的页面中，比如数据的排序、过滤等操作，可以使用函数缓存来避免重复计算，提高页面性能。
复杂数据转换： 当需要对复杂的数据进行计算或转换时，函数缓存可以避免对相同的数据进行重复的复杂计算。
计算结果稳定性要求高： 当函数的计算结果在相同的输入下始终相同，并且计算成本较高时，可以使用函数缓存来提高效率。

总的来说，函数缓存适用于那些在相同输入下有稳定输出，并且计算成本相对较高的场景。在这些场景中，使用函数缓存可以有效地提高性能和降低计算开销。