搜索功能（五）03-搜索关键字历史重复记录-数组去重操作——es6 set类数组-数据结构-数组去重 & 三个点（...）方法-对象的延展操作-拆解数组

数组去重操作——es6 set类数组-数据结构——去重 & 三个点（…）方法——对象的延展操作

**情况：**输入历史，存在重复记录情况

 // 数组去重操作
      this.hkw = [...new Set(this.hkw)]

完整处理逻辑代码

    toSearch () {
      // 回车时触发，跳转到商品列表页面并且缓存关键字
      // console.log('enter')
      // 把搜索历史关键字放到数组中
      this.hkw.unshift(this.keyword)
      // 数组去重操作
      this.hkw = [...new Set(this.hkw)]
      // 再把数组放到缓存中
      wx.setStorageSync('history', this.hkw)
      // 控制页面跳转到商品列表页面
      wx.navigateTo({
        url: '/pages/search_list/main?kw=' + this.keyword
      })
    },

第三次输入 hi，本来有3个历史记录，现只有一个hi——去重操作

再次输入abc，去重操作之后，记录移到最前边

补充

es6 set基础方法——去重

…方法——对象的延展操作，也可以拆解数组，也可以拆解set类数组结构；即：把去重之后的结果组成一个新的数组

1、set

//数组去重

var arr=[1,2,3,4,5,1,2,'a','b','a'];

let le=new Set(arr);
let c=[...le];//转换为数组
let b=Array.from(le);//转换为数组
console.log(c);   // [1, 2, 3, 4, 5, "a", "b"]
console.log(b);  // [1, 2, 3, 4, 5, "a", "b"]

2、三个点（…）结构

arr =  [1,2,2,3,4,5,5,6];
let a = [...new Set(arr)];
console.log(a)  // [1,2,3,4,5,6]