Js 编写搜索历史逻辑

逻辑

1. 检查输入内容是否存在，若存在，则更新该条数据的搜索时间字段
2. 若不存在，则判断存储搜索历史的长度，是否超过最大值(5)
3. 若没有超过最大值，则新增数据
4. 若超过了最大值，则替换最久远的数据

相关代码

const input = ref('')

const sc = ref([
  
])

const search = (()=>{

  var isExist = false
  // 检查搜索的内容是存在
  sc.value.forEach(element => {
    // 存在，则更新最近搜索时间
    if(input.value===element.value){
        element.time = new Date
        console.log(element)
        isExist = true
        return
    }
  });
  if(!isExist){
    
     // 不存在，判断当前数组的长度是否大于5
    if(sc.value.length<5){
      // 若小于5，则添加到数组中
      sc.value.push({
        value:input.value,
        time:new Date
      })
    }else{
      // 若大于5，则排除距离最远的时间
      sc.value[sc.value.length-1] = {
        value:input.value,
        time:new Date
      }
    }
  }
   // 每次修改后都会对数组进行重新排序
   sc.value = sc.value.sort(function(a,b){return b.time - a.time})
   console.log(sc.value)
})

测试

测试1

检查输入内容是否存在，若存在，则更新该条数据的搜索时间字段

事先存入两条数据1和2

当再次输入1时，1对应的搜索时间更新

测试2

判断存储搜索历史的长度，是否超过最大值，若没有超过最大值，则新增数据

新增3，4，5数据时，因为没有超过存储的最大值，所以正常存入

若超过了最大值，则替换最久远的数据

当输入6时，会替换最久远的2