關(guān)于前端面試中常提到的LRU緩存策略詳析
LRU
LRU(Least Recently Used)最近最少使用緩存策略,根據(jù)歷史數(shù)據(jù)記錄,當(dāng)數(shù)據(jù)超過(guò)了限定空間的時(shí)候?qū)?shù)據(jù)清理,清理的原則是對(duì)很久沒(méi)有使用到過(guò)的數(shù)據(jù)進(jìn)行清除。
一、為什么要使用Map是來(lái)定義容器
Map在保存數(shù)據(jù)時(shí)會(huì)按照記住存儲(chǔ)數(shù)據(jù)時(shí)候的順序,這樣存儲(chǔ)的數(shù)據(jù)是有序列的,并且會(huì)維護(hù)鍵值對(duì)的插入順序,Map存儲(chǔ)數(shù)據(jù)的鍵值可以是任意類型(對(duì)象或者基本類型都可),Map提供了get、set、delete方法十分方便;而Object的話是無(wú)序,當(dāng)然也可以使用Array。另外Map的算法復(fù)雜度是O(1),處理數(shù)據(jù)更迅速。
二、應(yīng)用場(chǎng)景
- redis
- 瀏覽器瀏覽記錄
- vue中內(nèi)置組件keep-alive
三、代碼實(shí)現(xiàn)
實(shí)現(xiàn)的大概思路如下:
- 創(chuàng)建一個(gè)LRUCache類
- 定義容器以及容器的容量
- 定義set方面,設(shè)置容器中的數(shù)據(jù)
- 定義get方法,獲取容器中的數(shù)據(jù)
class LRUCache {
constructor(length) {
// 定義容器容量
this.length = length;
// 創(chuàng)建數(shù)據(jù)容器,生成一個(gè)空映射
this.map = new Map();
}
// 設(shè)置key值
set(key, value) {
}
// 獲取key值
get(key) {}
}接下來(lái)就是對(duì)set方法和get方法的處理:
set
- 當(dāng)容器長(zhǎng)度不超過(guò)設(shè)定的長(zhǎng)度:設(shè)置key值,但是為了達(dá)到緩存策略的效果,需要我們先刪除數(shù)據(jù),后添加到容器的最后一條
- 當(dāng)容器長(zhǎng)度超過(guò)設(shè)定的長(zhǎng)度:先刪除掉容器中的第一條數(shù)據(jù)
get
- 先獲取數(shù)據(jù)值,然后刪除該條數(shù)據(jù),再設(shè)置數(shù)據(jù)到最后
class LRUCache {
constructor(length) {
// 定義容器容量
this.length = length;
// 定義數(shù)據(jù)容器
this.map = new Map();
}
// 設(shè)置key值
set(key, value) {
// 如果容器容量超過(guò)設(shè)定的容量
if (this.map.size >= this.length) {
// 等價(jià)于:let firstKey = this.map.keys()[0]
//map.keys().next()查詢?nèi)萜髦械谝粭l數(shù)據(jù)的key值
//keys()會(huì)返回一個(gè)迭代器對(duì)象,包含了實(shí)力對(duì)象中的每一個(gè)key值
let firstKey = this.map.keys().next().value;
//刪除容器中第一條數(shù)據(jù)
this.map.delete(firstKey);
}
// 容器中存在key就先刪除掉
if (this.map.has(key)) {
this.map.delete(key);
}
// 刪除后重新加入該條數(shù)據(jù)
this.map.set(key, value);
}
// 獲取key值
get(key) {
// 獲取key值不存在返回null
if (!this.map.has(key)) {
return null;
}
// 獲取key值
let value = this.map.get(key);
//刪除容器中的該條數(shù)據(jù)
this.map.delete(key);
//重新把該條數(shù)據(jù)添加到容器中
this.map.set(key, value);
return value
}
}
// 創(chuàng)建實(shí)例對(duì)象并設(shè)置容器大小
const lruCache = new LRUCache(5)添加6條數(shù)據(jù)
lruCache.set('name', 'zhangsan')
lruCache.set('class', 'xinguan')
lruCache.set('age', 19)
lruCache.set('sex', '男')
lruCache.set('occupation', '前端工程師')
lruCache.set('year', '2023')
console.log(lruCache, 'lruCache')對(duì)lruCache添加了6條數(shù)據(jù)并按順序排列,打印出來(lái)只剩5條數(shù)據(jù),添加的第一條(‘name’, ‘zhangsan’)被刪除了。

然后獲取class的值,發(fā)現(xiàn)key為class的這條數(shù)據(jù)跑最后了。因?yàn)樵趃et時(shí)候先delete后set了。
console.log(lruCache.get('class'), 'lruCache')//xinguan
總結(jié)
到此這篇關(guān)于關(guān)于前端面試中常提到的LRU緩存策略的文章就介紹到這了,更多相關(guān)前端面試LRU緩存策略內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
限時(shí)搶購(gòu)-倒計(jì)時(shí)的完整實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇限時(shí)搶購(gòu)-倒計(jì)時(shí)的完整實(shí)例(分享)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
微信小程序?qū)崿F(xiàn)收藏與取消收藏切換圖片功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)收藏與取消收藏切換圖片功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
原生JS實(shí)現(xiàn)圣旨卷軸展開(kāi)效果
本文主要介紹了原生JS實(shí)現(xiàn)詔書(shū)卷軸展開(kāi)效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
解決微信內(nèi)置瀏覽器返回上一頁(yè)強(qiáng)制刷新問(wèn)題方法

