Filter语法
array.filter(function(currentValue,index,arr), thisValue)
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue,index,arr) | 必选项,每个filter都需要一个回调函数用来写过滤的逻辑
|
||||||||
thisValue | 可选项,该对象在执行回调函数[function(currentValue,index,arr)]中使用,指向"this"指针,在回调中使用this 可访问此对象 |
Filter语法实例
这里笔者写了一个使用所有参数的例子,并在注释中注明了用法,供参考:
//等待过滤的数组
var users = [
{
id : 1,
name : 'lbx',
age : 10
},
{
id : 2,
name : 'angellover',
age : 20
},
{
id : 3,
name : 'angel',
age : 12
},
{
id : 4,
name : 'ads',
age : 15
}
]
//RegExp对象
var patt = /ang/
//此对象将作为filter的thisValue参数传递,注意下面的用法
var usera = {
id : 5,
name : 'log',
age : 13
}
var usersA = users.filter(function(user,index,arr){
/*
* 这里的过滤逻辑是
* age大于10
* 从数组的索引大于1
* name中匹配到 /ang/
* age小于13 this指向的就是usera对象
*/
return user.age>10 && index>1 && patt.test(arr[index].name) && user.age<this.age
},usera);
console.log(usersA)
按照这样的逻辑我们可以看到,执行的结果集中就只有一条:
VUE中列表过滤时使用Filter
由此引申至VUE项目中的一个场景,当我们需要渲染一个列表中的某些特定的项时,我们可以通过在计算属性中返回过滤后的列表来渲染,实例如下:
以下实例引用在vue官方风格指南 https://cn.vuejs.org/v2/style-guide/#避免-v-if-和-v-for-用在一起-必要
//把列表过滤放到计算属性中去
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
//这里直接渲染计算属性返回的列表即可
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
这种方式相比在模板中使用v-if
的最大的好处就在于,把过滤的逻辑放到数据层面控制,方便维护,解耦代码。更多关于这里的风格指南可以看官方网站上的讲解。