前端面試中常提到的LRU緩存策略怎么定義

今天小編給大家分享一下前端面試中常提到的LRU緩存策略怎么定義的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

LRU

LRU（Least Recently Used）最近最少使用緩存策略，根據(jù)歷史數(shù)據(jù)記錄，當(dāng)數(shù)據(jù)超過了限定空間的時(shí)候?qū)?shù)據(jù)清理，清理的原則是對很久沒有使用到過的數(shù)據(jù)進(jìn)行清除。

一、為什么要使用Map是來定義容器

Map在保存數(shù)據(jù)時(shí)會(huì)按照記住存儲(chǔ)數(shù)據(jù)時(shí)候的順序，這樣存儲(chǔ)的數(shù)據(jù)是有序列的，并且會(huì)維護(hù)鍵值對的插入順序，Map存儲(chǔ)數(shù)據(jù)的鍵值可以是任意類型（對象或者基本類型都可），Map提供了get、set、delete方法十分方便；而Object的話是無序，當(dāng)然也可以使用Array。另外Map的算法復(fù)雜度是O(1)，處理數(shù)據(jù)更迅速。

二、應(yī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) {}
}

接下來就是對set方法和get方法的處理：

set

• 當(dāng)容器長度不超過設(shè)定的長度：設(shè)置key值，但是為了達(dá)到緩存策略的效果，需要我們先刪除數(shù)據(jù)，后添加到容器的最后一條

• 當(dāng)容器長度超過設(shè)定的長度：先刪除掉容器中的第一條數(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) {
    // 如果容器容量超過設(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è)迭代器對象，包含了實(shí)力對象中的每一個(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í)例對象并設(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')

對lruCache添加了6條數(shù)據(jù)并按順序排列，打印出來只剩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

以上就是“前端面試中常提到的LRU緩存策略怎么定義”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請關(guān)注億速云行業(yè)資訊頻道。