搜索输入框防抖 、关键字高亮、去重

1、输入框防抖节流

 data () {
    return {
      kw: '', // 搜索关键字
      timer: null, // 定时器
      suggesList: [], // 联想菜单
      history: JSON.parse(localStorage.getItem('history')) || [] // 历史记录
    }
  },

inputFn () {
      clearTimeout(this.timer) // 防抖节流  清除之前定时器 只留下最后一次的执行

      this.timer = setTimeout(async () => {
        // 搜索建议列表
        if (this.kw.length > 0) {
          const res = await suggestionAPI(this.kw)
          this.suggesList = res.data.data.options
        } else {
          this.suggesList = []
        }
      }, 500)
    },

2、关键字高亮

  <div
        v-html="lightStr(str)"
      ></div>

lightStr (keyStr) { // 关键字高亮
      if (keyStr) {
        // 正则 查找不分大小写 全部
        const kwStr = new RegExp(this.kw, 'ig')
        return keyStr.replace(kwStr, (substring) => {
          return `<span style="color:red;">${substring}</span>`
        })
      // substring:正则匹配到的要被替换的 字符
      }
    },

思路: 目标字符串, 里符合关键字 换成 <span style="color: red;">关键字</span>

方式1: 拆分成1个个字符, 挨个判断, 拼接回去带颜色标签字符串

方式2: 字符串.replace方法, 替换后原地新字符串

const reg = new RegExp(this.kw, 'g')  new正则对象

return targetStr.replace(reg, `<span style="color: red;">${this.kw}</span>`)

问题: 如果输入框小写d, indexedDb, 最后的D, 也变成了小写

效果: 原来大写还大写

解决: 参数2, 要用匹配到的原来字符, 而不能都直接用输入框

replace第二个参数也可以是函数

函数中的参数是获取到的要被替换的字符所有字符

3、数组去重

方式一：遍历/判断/新数组

const newArr = []

 isArray.foreach(str => {

 const index = newArr.findIndex(smallStr => smallStr === str)

 if (index === -1) {

  newArr.push(str)

  }

})

方式二：new Set()

ES6新增的3中数据类型

基础：Symbol

引用：Set集合 Map集合

set是一种集合 无序的不重复的value集合，如果有重复的值，会自动去重返回一个对象

isArray= [...new Set(isArray)]