极简实现系列——三行代码搞定LRU

LRU的概念可能有部分同学会感到陌生，这里我也不过多说明，简单的解释一下：

如果 不明白，就请打开你手机上的饿了么或美团外卖，然后在搜索框中输入麻辣烫并确定，输入框下面就会产生一条历史记录，然后再输入砂锅粥、麻辣香锅重复以上步骤。 此时历史记录的排序应该是[麻辣香锅，砂锅粥，麻辣烫]， 然后你点击麻辣烫直接搜索，此时历史记录应该变成[麻辣烫，麻辣香锅，砂锅粥]。 这下懂了吧[狗头]

懂了之后接下来就是代码实现

简单来说就这几步

1. 判断要放入队列中的元素是否已经存在
2. 如果已经存在队列中，则把队列中的那一项删除。
3. 放在队首
4. 如果整个队列的长度大于预设长度，则把最后一个移除掉

根据以上这些步骤，应该可以很容易的写出一个简版吧

第一版

let lruArr = []
const limit = 3 // 最大限制3个
function put(val){
  let index = lruArr.findIndex(item => item === val) // 步骤1
  if(index !== -1) { // 步骤2
    lruArr.splice(index,1)
  }
  lruArr.unshift(val)  // 步骤3
  lruArr.length > limit && (lruArr.splice(-1,1)) // 步骤4
}

put('麻辣烫') // ['麻辣烫']
put('砂锅粥') // ['砂锅粥',' 麻辣烫']
put('麻辣香锅') // ['麻辣香锅', '砂锅粥',' 麻辣烫']
put('烧烤') // ['烧烤','麻辣香锅', '砂锅粥']
put('砂锅粥') // ['砂锅粥','烧烤','麻辣香锅']

很简单吧~

还可以更简单~~

仔细观察一下代码， 假如我把步骤3放在第一步，然后不就转变成了数组去重的问题了吗，数组去重可就是个老生常谈的问题了。来，我们改造一下

第二版

let lruArr = []
const limit = 3 // 最大限制3个
function put(val) {
  lruArr.unshift(val) // 先执行步骤3
  lurArr = [...new Set(lruArr)] // 去重
  lruArr.length > limit && (lruArr.splice(-1,1)) // 步骤4
}

真·三行实现 哈哈哈~

改进版

现在的代码都暴露在全局，有点不好，再使用ES6来优化一下

class LRU {
  constructor(limit) {
    this.limit = limit
    this.arr = []
  }

  put(val){
    this.arr.unshift(val)
    this.arr = [...new Set(this.arr)]
    this.arr.length > this.limit && (this.arr.splice(-1,1))
    console.log(this.arr)
  }
}

let lru = new LRU(3)
lru.put('麻辣烫') // ['麻辣烫']
lru.put('砂锅粥') // ['砂锅粥',' 麻辣烫']
lru.put('麻辣香锅') // ['麻辣香锅', '砂锅粥',' 麻辣烫']
lru.put('烧烤') // ['烧烤','麻辣香锅', '砂锅粥']
lru.put('砂锅粥') // ['砂锅粥','烧烤','麻辣香锅']

完事~