关于前端面试中常提到的LRU缓存策略详析

 更新时间:2023年05月04日 11:38:58   作者:不叫猫先生  
LRU缓存就是一种常用策略,下面这篇文章主要给大家介绍了关于前端面试中常提到的LRU缓存策略的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

LRU

LRU(Least Recently Used)最近最少使用缓存策略,根据历史数据记录,当数据超过了限定空间的时候对数据清理,清理的原则是对很久没有使用到过的数据进行清除

一、为什么要使用Map是来定义容器

Map在保存数据时会按照记住存储数据时候的顺序,这样存储的数据是有序列的,并且会维护键值对的插入顺序,Map存储数据的键值可以是任意类型(对象或者基本类型都可),Map提供了get、set、delete方法十分方便;而Object的话是无序,当然也可以使用Array。另外Map的算法复杂度是O(1),处理数据更迅速。

二、应用场景

  • redis
  • 浏览器浏览记录
  • vue中内置组件keep-alive

三、代码实现

实现的大概思路如下:

  • 创建一个LRUCache类
  • 定义容器以及容器的容量
  • 定义set方面,设置容器中的数据
  • 定义get方法,获取容器中的数据
class LRUCache {
  constructor(length) {
    // 定义容器容量
    this.length = length;
    // 创建数据容器,生成一个空映射
    this.map = new Map();
  }
  // 设置key值
  set(key, value) {
  }
  // 获取key值
  get(key) {}
}

接下来就是对set方法和get方法的处理:

set

  • 当容器长度不超过设定的长度:设置key值,但是为了达到缓存策略的效果,需要我们先删除数据,后添加到容器的最后一条
  • 当容器长度超过设定的长度:先删除掉容器中的第一条数据

get

  • 先获取数据值,然后删除该条数据,再设置数据到最后
class LRUCache {
  constructor(length) {
    // 定义容器容量
    this.length = length;
    // 定义数据容器
    this.map = new Map();
  }
  // 设置key值
  set(key, value) {
    // 如果容器容量超过设定的容量
    if (this.map.size >= this.length) {
      // 等价于:let firstKey = this.map.keys()[0]
      //map.keys().next()查询容器中第一条数据的key值 
      //keys()会返回一个迭代器对象,包含了实力对象中的每一个key值
      let firstKey = this.map.keys().next().value;
      //删除容器中第一条数据
      this.map.delete(firstKey);
    }
    // 容器中存在key就先删除掉
    if (this.map.has(key)) {
      this.map.delete(key);
    }
    // 删除后重新加入该条数据
    this.map.set(key, value);
  }
  // 获取key值
  get(key) {
    // 获取key值不存在返回null
    if (!this.map.has(key)) {
      return null;
    }
    // 获取key值
    let value = this.map.get(key);
    //删除容器中的该条数据
    this.map.delete(key);
    //重新把该条数据添加到容器中
    this.map.set(key, value);
    return value
  }
}
// 创建实例对象并设置容器大小
const lruCache = new LRUCache(5)

添加6条数据

        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条数据并按顺序排列,打印出来只剩5条数据,添加的第一条(‘name’, ‘zhangsan’)被删除了。

然后获取class的值,发现key为class的这条数据跑最后了。因为在get时候先delete后set了。

console.log(lruCache.get('class'), 'lruCache')//xinguan

总结

到此这篇关于关于前端面试中常提到的LRU缓存策略的文章就介绍到这了,更多相关前端面试LRU缓存策略内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈Webpack是如何打包CommonJS的

    浅谈Webpack是如何打包CommonJS的

    CommonJS是Node中的一种模块化规范,本文主要介绍了Webpack是如何打包CJS的,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • js使用swiper实现层叠轮播效果实例代码

    js使用swiper实现层叠轮播效果实例代码

    这篇文章主要给大家介绍了关于js使用swiper实现层叠轮播效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • Javascript实现的类似Google的Div拖动效果代码

    Javascript实现的类似Google的Div拖动效果代码

    Javascript实现的类似Google的Div拖动效果代码,需要的朋友可以参考下。
    2011-08-08
  • JavaScript代码模拟鼠标自动点击事件示例

    JavaScript代码模拟鼠标自动点击事件示例

    这篇文章主要介绍了JavaScript代码模拟鼠标自动点击事件示例,文章通过示例代码和运行效果图介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JS与HTML结合实现流程进度展示条思路详解

    JS与HTML结合实现流程进度展示条思路详解

    基于js与html相结合实现的流程进度展示条,非常实用,在各大网站都可以用到,下面小编给大家带来了JS与HTML结合实现流程进度展示条思路详解,需要的朋友参考下吧
    2017-09-09
  • ECharts柱状图过多添加滚动条的步骤(亲测可用)

    ECharts柱状图过多添加滚动条的步骤(亲测可用)

    这篇文章主要介绍了ECharts柱状图过多添加滚动条的步骤(亲测可用),添加echarts柱状图滚动条,首先添加js用来判断当前视图要显示几个及是否显示滚动条,本文结合实例代码介绍的非常详细,需要的朋友参考下吧
    2024-01-01
  • 微信小程序实现的数字滑块拼图效果

    微信小程序实现的数字滑块拼图效果

    滑块拼图(Slider Puzzle)是一种经典的智力游戏,通常由一个3x3或更大的格子组成,其中一个格子为空,玩家通过滑动拼图块来达到特定的图案或顺序,这篇文章主要介绍了微信小程序实现的数字滑块拼图,需要的朋友可以参考下
    2024-08-08
  • JavaScript通过prototype给对象定义属性用法实例

    JavaScript通过prototype给对象定义属性用法实例

    这篇文章主要介绍了JavaScript通过prototype给对象定义属性用法,实例分析了prototype的功能及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 函数式 JavaScript(一)简介

    函数式 JavaScript(一)简介

    JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言,人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。
    2014-07-07
  • JavaScript作用域与作用域链使用重点讲解

    JavaScript作用域与作用域链使用重点讲解

    当代码在一个环境中执行时,会创建变量对象的一个作用域链,作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问,下面这篇文章主要给大家介绍了关于JavaScript作用域与作用域链的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论