17_Vue列表过滤_js模糊查询( 二 ) _生活百科

一种是在vue当中书写
一种是在外部使用vue的 $watch书写（你明确知道你要监视的属性是谁）

我们等下使用$watch书写

准备工作html
与之前计算属性一样，但是这次不需要额外的span标签了，因为我们只对keyWords进行监视

<!-- 创建一个容器 --><div class="app"><!-- 模糊查询 --><input type="text" v-model="keyWords"><!-- 列表渲染 --><ul><li v-for="item in initialArr" :key="item.id">{{item.name}} - {{item.age}} - {{item.sex}}</li></ul></div>

// 我很明确我要监视的属性是keyWordsvm.$watch("keyWords",function(newValue){// 内部书写的就是handler函数的内容this.initialArr = this.persons.filter((item) => {return item.name.indexOf(this.keyWords) != -1})})

测试

文章插图
事件分析，属性解读

为什么我这里写了两个数组，因为使用了filter进行过滤，而filter会返回一个新数组
- 如果data当中只存在一个数组，原始数组，那么当 filter进行过滤的时候，为了同步，我们只能让原始数组的值替换为新的filter过滤数据
- 总之，需要一个原始数据和渲染数据，原始数据无法修改，渲染数据可以修改（迎合filter）
对persons进行过滤， item为persons数组当中的每一个对象
- filter的参数是一个函数类型
- 该函数需要返回值，返回值是一个判定条件
- 判定条件我们使用indexOf 的字符匹配，只要匹配成功，那么indeOf调用的返回值就不是-1

filter API自实现我感觉这个API我用起来不是很顺畅
我自己写一个看看
分析这是api参考手册

文章插图

文章插图
这是我们刚刚实例当中使用的filter

文章插图
设计思路

抛开其他的不谈，filter 本质上就是原型Array上的一个函数 == api
这个api的结构是这样的
- // 这个percolator是一个匿名函数function filter(percolator){}
那么重点就在这个percolator 身上，它是一个参数，是一个匿名函数
这个匿名函数有三个参数，对应的就是文档上的三个参数
1. currentValue：这是数组当中的每一项
  - 这个项是怎么来的 ==> 通过循环得到的
2. index：这是currentValue这个元素，它在数组当中的索引
3. arr：currentValue所处的数组
把这个搞清楚了，剩下的就很简单了

开始设计

首先我们需要在原型对象Array当中，通过prototype 设计一个供所有数组类型，调用的函数
- Array.prototype.myFilter = function(percolator){}
既然这个方法，最终会得到一个新的数组，不会改变原有数组结构，那我们肯定要先设计一个新数组嘛
- Array.prototype.myFilter = function(percolator){// 设计一个新数组 let newArr = [];}
我们需要得到 currentValue（循环项），这个东西到底如何上手？通过循环得到嘛
1. 通过刚刚在原形对象上设计的 myFilter 函数，我们可以对这个数组进行基本的迭代
2. Array.prototype.myFilter = function(percolator){// 设计一个新数组let newArr = [];// 对当前数组进行迭代;this的指向是数组本身for(let i =0; i<this.length; i++){// this[i] 就代表我们当前的循环项，也就是currentValue}}
3. this[i] 就代表我们当前的循环项，也就是currentValue
那么现在，值得思考的地方就来了
1. 我们使用这个for循环，是为了得到循环项，那么这个循环项给谁调用？ == 匿名函数percolator
2. 这个匿名函数，可以接受三个参数，但是currentValue是必须要的，所以这里我们三个参数都传进去
3. 那么，匿名函数应该用在什么位置？
  - 我觉得这里应该写个判断，当满足条件的时候，给newArr添加一个元素
4. 它需要做什么事情？
  - 这个判断，就是匿名函数要做的事情，但是判断不能写死，要让使用者来书写