JavaScript Array对象的filter方法详解

最新推荐文章于 2025-04-21 14:23:59 发布

angelavor

最新推荐文章于 2025-04-21 14:23:59 发布

阅读量3.4k

点赞数 1

分类专栏：一个web全栈的修行者文章标签： Filter JavaScript Array对象

本文链接：https://blog.youkuaiyun.com/AngelLover2017/article/details/85918512

版权

一个web全栈的修行者专栏收录该内容

49 篇文章

订阅专栏

本文详细解析了JavaScript中Array.filter()方法的语法及参数，通过具体示例展示了如何使用filter进行数组元素过滤，包括条件判断、正则表达式匹配等，并介绍了在Vue项目中如何利用filter优化列表渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Filter语法

array.filter(function(currentValue,index,arr), thisValue)

参数描述

function(currentValue,index,arr)

必选项，每个filter都需要一个回调函数用来写过滤的逻辑

参数	描述
currentValue	必选参数，指向的是原数组中的当前项
index	可选项，顾名思义就是当前项[currentValue]的索引
arr	可选项，指向的是原数组，是原数组的一个副本

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的最大的好处就在于，把过滤的逻辑放到数据层面控制，方便维护，解耦代码。更多关于这里的风格指南可以看官方网站上的讲解。