最近在做公司搜索模块的前端界面，以前没觉得搜索能做出什么花样来，但最近在搜索上面得知的一些技法着实值得记录。
一、提供全文搜索接口的搜索
遇到的功能点：
1.搜索结果高亮
结果高亮主要的工程量在后台，在前端比较重要的是如何渲染出后台提供的h5代码。之前有看到直接截取后台代码里的值自己在前端重写了样式的，虽然这也算种做法，但后台提供的h5代码岂不是就失去了意义？
所以最为常规的做法是在组件中使用模板，将需要渲染的内容赋给v-html。
2.搜索后页面跳转涉及的传值
在vue——组件传值小结中有提到关于传值的问题
二、只提供搜索数据源的搜索
这部分搜索的做法也可以直接称为过滤，本质来讲就是将数据源按条件过滤。这里首先要确定过滤内容的精细程度，按不同的精细程度，方法可以使用：
1.字符串匹配（较耗费性能但是可以做较精确匹配）
2.filter过滤器（在中序匹配中可以得到比较好的应用）
在实际操作过程中，需要精确匹配的搜索结果时通常都会在后台写好条件以求节约资源和优化性能，所以纯前端的处理更多的是使用模糊匹配。
谈谈遇到的问题：filter过滤器使用过程中出现了二次搜索数组变化的情况
就是所谓“越搜越少”，原始数组在用户操作下不断过滤。这样形式的过滤就违背了搜索功能的本质。
解决方法：对原始数据进行对象深拷贝，处理深拷贝后的数组，最后赋值进去。每次赋值都使用该深拷贝的数组，匹配数组一定要设置为局部变量，否则可能存在数据残留无法清空的情况
这个问题涉及相关知识点：js对象深拷贝、浅拷贝、引用的的区别及方法
（1）引用：对象间可以使用“=”赋值表示引用，这种引用指向同一内存地址，修改被引用值，引用值发生改变，相反亦然。
（2）浅拷贝：只遍历一层，而且旧对象和新对象里的东西都指向一个地址，对于基本类型就是对值的复制，对于引用类型就是复制其地址，外在的元素情况引用时看起来互不干扰，可内在的基础条件改变时，可能会导致拷贝出的数据产生变化
浅拷贝方法：
使用Object.assign（）
（3）深拷贝：不管里面有多少层都遍历，克隆一个与旧不相干的，修改新的不影响旧的
深拷贝方法：
a.JSON.parse(JSON.stringify())
b.对象遍历（前提是有对象）
例： var newObj = new obj.constructor()
//保持继承链
for (var key in obj) {
if(obj.hasOwnProPerty(key)) {
// 不遍历其原型链上的属性
var val = obj [key];
newObj[key] = typeof val === 'object' ? argument.callee(val) : val;
// 使用argument.callee解除与函数的耦合
}
}
return newObj;
}
console.log(obj1)
console.log(clone(obj1))笔者最后还是使用了序列化的方法。
