今天要聊的一個(gè)很經(jīng)典的問題——如何在JavaScript中實(shí)現(xiàn)函數(shù)緩存，以及它有哪些應(yīng)用場景。

我們先來明確一下，函數(shù)緩存是什么。簡單來說，函數(shù)緩存是將函數(shù)的運(yùn)算結(jié)果存儲起來，以便下次用到相同的輸入時(shí)，可以直接返回結(jié)果，而不需要重新計(jì)算。這種方式可以理解為用空間換時(shí)間，也就是用緩存存儲的空間，換取未來計(jì)算時(shí)間的節(jié)省。

先給個(gè)簡單的代碼例子讓大家感受一下：

const?add?=?(a,?b)?=>?a?+?b;
const?calc?=?memoize(add);?//?創(chuàng)建一個(gè)支持緩存的函數(shù)
console.log(calc(10,?20));?//?輸出?30
console.log(calc(10,?20));?//?直接從緩存中獲取結(jié)果，輸出?30

是不是很有意思？在這個(gè)例子中，calc函數(shù)并沒有重復(fù)計(jì)算，而是利用緩存存儲的結(jié)果直接返回。這種思路在性能優(yōu)化中非常常見。接下來，我們來詳細(xì)看看如何實(shí)現(xiàn)它。

函數(shù)緩存的實(shí)現(xiàn)，離不開JavaScript的幾個(gè)核心概念：閉包、柯里化和高階函數(shù)。

首先說說閉包。閉包的本質(zhì)是函數(shù)加上它能夠訪問的變量總和。閉包允許我們在一個(gè)函數(shù)的作用域中保持變量的引用。比如：

function?outer()?{let?a?=?1;return?function?inner()?{console.log(a);?//?訪問外部作用域的變量?a};
}const?func?=?outer();
func();?//?輸出?1

在這里，inner函數(shù)形成了閉包，它能夠訪問到外部函數(shù)outer中的變量a。閉包為實(shí)現(xiàn)函數(shù)緩存提供了重要的基礎(chǔ)——我們可以利用它保存計(jì)算結(jié)果。

接下來說柯里化?？吕锘且环N把接收多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換為接收一個(gè)參數(shù)的函數(shù)的技巧。比如：

function?add(x)?{return?function?(y)?{return?x?+?y;};
}console.log(add(3)(4));?//?輸出?7

柯里化的好處是，我們可以延遲計(jì)算，或者分步計(jì)算，這對緩存機(jī)制的實(shí)現(xiàn)很有幫助。

最后是高階函數(shù)。高階函數(shù)是那些接收函數(shù)作為參數(shù)，或者返回一個(gè)函數(shù)的函數(shù)。比如：

function?withLogging(func)?{return?function?(...args)?{console.log(`Calling?with?${args}`);return?func(...args);};
}const?loggedAdd?=?withLogging((x,?y)?=>?x?+?y);
console.log(loggedAdd(2,?3));?//?輸出日志并計(jì)算結(jié)果

高階函數(shù)讓我們可以靈活地?cái)U(kuò)展已有函數(shù)的功能，比如添加緩存邏輯。

結(jié)合這三個(gè)概念，我們可以實(shí)現(xiàn)一個(gè)通用的函數(shù)緩存工具，如下：

function?memoize(func)?{const?cache?=?new?Map();?//?使用?Map?存儲緩存return?function?(...args)?{const?key?=?JSON.stringify(args);?//?將參數(shù)序列化為字符串作為鍵if?(cache.has(key))?{console.log('從緩存中獲取結(jié)果:',?key);return?cache.get(key);}const?result?=?func(...args);?//?調(diào)用原始函數(shù)計(jì)算結(jié)果cache.set(key,?result);?//?緩存結(jié)果return?result;};
}

用法如下：

const?add?=?(a,?b)?=>?a?+?b;
const?cachedAdd?=?memoize(add);console.log(cachedAdd(10,?20));?//?輸出?30
console.log(cachedAdd(10,?20));?//?從緩存中獲取結(jié)果，輸出?30

在這個(gè)實(shí)現(xiàn)中，我們用Map來存儲緩存，key是序列化的參數(shù)值，這樣可以保證每一組參數(shù)對應(yīng)一個(gè)緩存結(jié)果。調(diào)用時(shí)，先檢查緩存中是否存在結(jié)果，存在就直接返回，不存在就計(jì)算后存入緩存。

雖然函數(shù)緩存非常高效，但它并不適合所有場景。以下是一些常見的適用場景：

1、昂貴的函數(shù)調(diào)用：比如涉及復(fù)雜計(jì)算的場景。假設(shè)我們需要計(jì)算一個(gè)斐波那契數(shù)列的值：

function?fibonacci(n)?{if?(n?<=?1)?return?n;return?fibonacci(n?-?1)?+?fibonacci(n?-?2);
}

用遞歸計(jì)算時(shí)，很多輸入會(huì)重復(fù)計(jì)算。通過緩存優(yōu)化：

const?memoizedFib?=?memoize(fibonacci);
console.log(memoizedFib(40));?//?快速計(jì)算大值

2、輸入有限且重復(fù)率高：比如函數(shù)的輸入是有限的枚舉值，且經(jīng)常重復(fù)。例如，一個(gè)根據(jù)用戶 ID 獲取用戶信息的函數(shù)：

const?getUserInfo?=?memoize((userId)?=>?{console.log(`Fetching?data?for?user?${userId}`);return?{?id:?userId,?name:?`User${userId}`?};?//?模擬?API?請求
});console.log(getUserInfo(1));
console.log(getUserInfo(1));?//?第二次調(diào)用直接從緩存獲取

3、純函數(shù)的計(jì)算：純函數(shù)是指對于相同輸入，總是返回相同輸出的函數(shù)，比如數(shù)學(xué)函數(shù)：

const?square?=?memoize((x)?=>?x?*?x);
console.log(square(5));?//?輸出?25
console.log(square(5));?//?從緩存中獲取，輸出?25

4、遞歸函數(shù)的優(yōu)化：尤其是那些可以利用之前結(jié)果的遞歸場景，比如階乘計(jì)算。

“函數(shù)緩存的實(shí)現(xiàn)可以依賴閉包、高階函數(shù)和柯里化。核心思路是使用一個(gè)存儲計(jì)算結(jié)果的緩存對象（比如Map），每次調(diào)用時(shí)先檢查緩存中是否有結(jié)果，如果有則直接返回，否則進(jìn)行計(jì)算并存儲結(jié)果?！?/p>

然后給出簡潔的實(shí)現(xiàn)代碼：

function?memoize(func)?{const?cache?=?new?Map();return?function?(...args)?{const?key?=?JSON.stringify(args);if?(cache.has(key))?return?cache.get(key);const?result?=?func(...args);cache.set(key,?result);return?result;};
}

最后補(bǔ)充應(yīng)用場景，比如復(fù)雜計(jì)算（如遞歸函數(shù)）和高頻調(diào)用的純函數(shù)等，顯示你的全面思考能力。這樣，不僅技術(shù)點(diǎn)到位，還能展現(xiàn)你的工程實(shí)踐思路。