LRU原理以及js实现

2020-06-09 08:50:28

参考地址 LRU缓存的js实现

LRU缓存原理:

LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”。

实现

最常见的实现是使用一个链表保存缓存数据,详细算法实现如下:
这里写图片描述

  1. 新数据插入到链表头部;

  2. 每当缓存命中(即缓存数据被访问),则将数据移到链表头部;

  3. 当链表满的时候,将链表尾部的数据丢弃。

代码

function Node(value, next) {  
    this.value = value;  
    this.next = next;  
}  

function LRUCache(initialCapacity, initialValue) {  
    this.size = 0;  
    this.head = null;  
    this.tail = null;  
    this.capacity = initialCapacity;  

    if (initialValue) {  
        var key = Object.keys(initialValue)[0];        //Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。  
        var value = initialValue[key];  
        this.cache(key, value);  
    }  
}  

//是否为空  LRUCache.prototype.isEmpty = function() {  
    return this.head == null && this.tail == null;  
};  

//在头部做添加  LRUCache.prototype.addFirst = function(obj) {  
    var newNode = new Node(obj, null);  
    if (this.isEmpty()) {  
        this.head = this.tail = newNode;  
    } else {  
        this.head.next = newNode;  
        this.head = newNode;        //链表是反着的,head是最后一个节点  
    }  
    this.size++;  
    newNode = null;  
};  

//在尾部做删除  LRUCache.prototype.removeLast = function() {  
    if (!this.isEmpty()) {  
        var key = Object.keys(this.tail.value)[0];  
        delete this[key];  
        this.tail = this.tail.next;  
        if (this.tail == null) {  
            this.head = null;  
        }  
        this.size--;  
    }  
};  

//将节点向头部移动  LRUCache.prototype.moveForward = function(key) {  
    var node = this.search(key);  
    if (node && node.next) {  
        var next = node.next;  
        var temp = node.value;  
        node.value = next.value;  
        next.value = temp;        //位置交换了一下  
    }  
};  

//缓存元素  LRUCache.prototype.cache = function(key, value) {  
    //先查找是否已存在  
    var result = this.search(key);  
    //已存在采取覆盖value策略  
    if (result) {  
        result.value[key] = value;  
        this[key] = value;  
    } else {  
        var obj = {};  
        obj[key] = value;  
        this.addFirst(obj);  
        var that = this;  
        Object.defineProperty(this, key, {  
            set : function(x) {  
                that.moveForward(key);  
                value = x;  
            },  
            get : function() {  
                that.moveForward(key);  
                return value;  
            },  
            configurable : true,  
            enumerable : true  
        });  
        //超出容量的话,将最少使用的删除  
        if (this.size > this.capacity) {  
            this.removeLast();  
        }  
    }  
    //可以链式调用  
    return this;  
};  

//删除元素  LRUCache.prototype.del = function(key) {  
    if (this.search(key)) {  
        var previous = null;  
        var cur = this.tail;  
        for (; cur; cur = cur.next) {  
            if (cur.value.hasOwnProperty(key)) {  
                break;  
            }  
            previous = cur;  
        }  
        if (previous) {  
            if (previous.next) {            //待定,感觉有点问题,删除的是目标值的后一个节点  
                previous.next = previous.next.next;  
                this.size--;  
            }  
        } else {  
            this.tail = this.tail.next;  
            this.size--;  
        }  
    }  
    if (this.hasOwnProperty(key)) {  
        return (delete this[key]);  
    } else {  
        return (delete LRUCache.prototype[key]);  
    }  
};  

//查找元素  LRUCache.prototype.search = function(key) {  
    for (var e = this.tail; e; e = e.next) {  
        if (key in e.value) {  
            return e;  
        }  
    }  
    return null;  
};  123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135

这里写图片描述

参考:
http://flychao88.iteye.com/blog/1977653
https://blog.csdn.net/esir82/article/details/72674274#commentBox


  • 2020-03-18 21:15:34

    使用canvas画布解决百度地图自定义图层全球连续显示问题

        基于百度地图的Web API进行自定义图层叠加时,默认的图层只能叠加到全球范围以内,即经度范围为[-180, 180],而无法将图层叠加到默认的全球范围以外,即经度范围超出了[-180, 180]之后,经纬度坐标会自动回归到(0, 0),而导致在地图拖拽时全球以外无法连续显示想要的图层,此时可以基于百度地图的自定义图层将经纬度坐标转为像素点使用画布canvas来解决该问题。解决后效果如下图所示: ———————————————— 版权声明:本文为CSDN博主「宏伟杰作」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/u011284073/article/details/80549950

  • 2020-03-18 21:18:01

    node-canvas实现百度地图个性化底图绘制

    随着nodejs的推出,node的并发和异步的强大能力,越来越多的得到应用,而且取得了非常不错的效果。 作为一个前端工程师对node.js自然有着一份更深的感情,跃跃欲试的心情,总希望能将它应用到产品中来。

  • 2020-03-18 21:19:28

    高德地图和canvas画图结合应用的一些感想(一)

    入了团队才发现,该项目前后端分离,后端工程师已就位主要实现接口,IOS端工程师也已就位,还差一个web前端工程师。背脊一凉,我之前虽然写过一些js和css,虽有点功底但是离前端工程师还是有距离的啊。在和朋友说明情况后,朋友也是胆大,让我试试,主要他实在找不到人了(也有可能目前前端工程师报价都太贵了,创业嘛,能节约就节约,能理解。。。),没办法,走一步算一步吧。

  • 2020-03-18 21:30:57

    基于OpenLayers实现地理围栏 谷歌百度高德地图都可以

    前言.因为项目有点特殊,需要接入谷歌地图实现地理围栏,因为谷歌地图的地理围栏接口相关接口并不完善,于是就换了一个思路,利用OpenLayers来实现地理围栏 openlayers 中文地址 http://weilin.me/ol3-primer/ch02/index.html 作者:zcty0701 链接:https://www.jianshu.com/p/60e88ee1e843 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2020-03-19 17:12:40

    百度地图放大覆盖物消失

    产生问题的原因是因为我们用的普通的点数组生成的多边形,我们应该用百度的点数组生成就没问题了。