Vue核心特性08，一文读懂过滤器（Filter）：定义、使用场景与链式调用

原创于 2025-12-23 10:05:25 发布 · 647 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端同时被 2 个专栏收录

62 篇文章

订阅专栏

VUE

20 篇文章

订阅专栏

2025博客之星年度评选已开启 10w+人浏览 1.9k人参与

在编程开发中，“过滤”是一个高频出现的核心需求——从海量数据中筛选有效信息、对输入输出进行格式转换、在请求响应链路中拦截校验……而**过滤器（Filter）**正是为解决这类问题而生的设计模式/组件。它看似简单，却贯穿了前端、后端、数据处理等多个领域。今天，我们就从基础到进阶，全面拆解过滤器的定义、实用场景与核心进阶技巧——链式调用。

一、什么是过滤器（Filter）？

从本质上来说，过滤器是一种**“输入-处理-输出”**的组件/函数：它接收一个原始数据（或请求、数据流），按照预设的规则对其进行“筛选”“转换”或“校验”，最终输出符合要求的数据（或直接拦截不符合规则的输入）。

核心特点可以概括为3点：

单一职责：每个过滤器只关注一个特定的处理规则（比如“筛选大于10的数字”“过滤敏感词”“校验token有效性”），符合“高内聚、低耦合”的设计原则；
可复用性：过滤器是独立的组件，可在不同场景中重复调用，无需重复编写相同逻辑；
无侵入性：过滤器不会修改原始数据的生成逻辑，而是通过“拦截/处理”的方式介入流程，降低代码耦合度。

举个最简单的例子：我们有一个数组 [1, 3, 5, 7, 9, 12, 15]，需要筛选出大于10的元素。这里的“筛选大于10”的逻辑，就是一个基础过滤器。在JavaScript中，数组的filter方法就是对这一思想的原生实现：


const arr = [1, 3, 5, 7, 9, 12, 15];
// 定义过滤器：筛选大于10的元素
const filterGreaterThan10 = (item) => item > 10;
// 使用过滤器
const result = arr.filter(filterGreaterThan10); 
console.log(result); // [12, 15]

二、过滤器的核心使用场景

过滤器的应用范围极广，几乎覆盖所有需要“数据筛选/处理”的场景。下面按前端、后端、数据处理三大领域，梳理最常见的实用场景：

1. 前端领域：数据渲染与交互处理

前端最核心的需求之一是“将后端数据转化为用户可感知的视图”，过滤器在这里承担着“数据格式化”“筛选展示”的关键角色。

数据格式化：比如将时间戳转化为“YYYY-MM-DD”格式、将数字转化为保留2位小数的金额（如 100 → 100.00）、将布尔值转化为“是/否”等用户友好的文本；
列表筛选：在表格、列表页中，根据用户输入的关键词、选择的条件（如价格区间、状态），筛选出符合要求的列表项（比如电商平台的“价格从低到高”“只看有货”筛选）；
输入校验与过滤：对用户输入的表单数据进行实时过滤（如过滤输入框中的特殊字符，防止XSS攻击）、校验输入格式（如手机号、邮箱格式校验，不符合则拦截提示）。

示例（Vue中的过滤器，格式化时间）：


// 定义全局过滤器：时间戳转日期
Vue.filter('formatDate', (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
});

// 模板中使用
<div>{{ createTime | formatDate }}</div> 
// 输出：2025-08-20

2. 后端领域：请求响应链路拦截

在后端开发中，过滤器是“拦截器模式”的典型实现，主要用于处理HTTP请求/响应的通用逻辑，避免在每个接口中重复编写。

身份认证与授权：拦截所有请求，校验请求头中的Token/JWT是否有效、是否具备访问当前接口的权限，无效则直接返回401/403错误；
请求参数处理：统一处理请求参数（如POST请求的JSON解析、GET请求的参数转义）、设置跨域头（CORS），解决跨域问题；
日志记录：拦截请求和响应，记录请求路径、请求参数、响应状态码、接口耗时等信息，用于问题排查和系统监控；
数据过滤与脱敏：对响应数据中的敏感信息（如手机号、身份证号）进行脱敏处理（如 138****1234），防止信息泄露。

示例（Java Spring Boot中的过滤器，记录接口耗时）：


@Component
public class TimeFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        long start = System.currentTimeMillis();
        // 放行，执行后续业务逻辑
        chain.doFilter(request, response);
        // 记录耗时
        long cost = System.currentTimeMillis() - start;
        System.out.println("接口耗时：" + cost + "ms");
    }
}

3. 数据处理领域：批量数据清洗

在数据挖掘、大数据处理场景中，原始数据往往存在重复、缺失、格式不统一等问题，过滤器用于“数据清洗”，为后续分析做准备。

去重过滤：过滤掉数据集中的重复记录（如用户行为日志中的重复点击记录）；
缺失值过滤：过滤掉关键字段缺失的记录（如用户数据中“手机号”缺失的记录）；
格式统一过滤：过滤掉格式不规范的数据（如日期格式不是“YYYY-MM-DD”的记录、数值超出合理范围的记录）。

三、过滤器的进阶：链式调用

单个过滤器只能解决一个简单问题，但实际开发中，我们往往需要对数据进行“多步连续处理”（比如“先筛选有效数据 → 再格式化 → 最后脱敏”）。这时候，过滤器的链式调用就派上用场了。

1. 什么是过滤器的链式调用？

链式调用的核心思想是：将多个过滤器按顺序串联起来，前一个过滤器的输出作为后一个过滤器的输入，依次执行，最终得到处理后的结果。这种方式可以将复杂的处理逻辑拆分为多个简单的过滤器，代码更清晰、更易维护。

形象地说，链式调用就像“流水线作业”：原材料（原始数据）经过第一道工序（第一个过滤器）处理后，变成半成品，再进入第二道工序（第二个过滤器），直到完成所有工序，得到最终产品。

2. 链式调用的实现原理

链式调用的实现关键有两点：

每个过滤器的返回值是“处理后的数据”，确保下一个过滤器有输入；
通过“方法链”的形式组织过滤器（通常要求过滤器对象的方法返回自身，或返回处理后的数据对象，支持继续调用其他方法）。

在不同语言/框架中，链式调用的实现方式略有差异，但核心逻辑一致。下面以JavaScript为例，通过两个场景理解链式调用。

3. 链式调用的实战示例

示例1：前端列表多条件筛选+格式化

需求：对用户列表数据进行3步处理——① 筛选出年龄大于18的用户；② 筛选出性别为“男”的用户；③ 将用户的“注册时间”格式化为“YYYY-MM-DD”。


// 原始用户数据
const users = [
  { name: '张三', age: 20, gender: '男', registerTime: 1628073600000 },
  { name: '李四', age: 17, gender: '男', registerTime: 1628073600000 },
  { name: '王五', age: 25, gender: '女', registerTime: 1628073600000 },
  { name: '赵六', age: 22, gender: '男', registerTime: 1628073600000 }
];

// 定义3个过滤器
// 过滤器1：筛选年龄>18的用户
const filterAdult = (users) => users.filter(user => user.age > 18);
// 过滤器2：筛选性别为男的用户
const filterMale = (users) => users.filter(user => user.gender === '男');
// 过滤器3：格式化注册时间
const formatRegisterTime = (users) => users.map(user => ({
  ...user,
  registerTime: new Date(user.registerTime).toLocaleDateString()
}));

// 链式调用：依次执行3个过滤器
const result = formatRegisterTime(filterMale(filterAdult(users)));
console.log(result);
// 输出：[{ name: '张三', age: 20, gender: '男', registerTime: '2021/8/4' }, { name: '赵六', age: 22, gender: '男', registerTime: '2021/8/4' }]

这里通过“函数嵌套”实现了链式调用，前一个过滤器的输出作为后一个的输入，逻辑清晰，易于维护。如果后续需要增加“筛选手机号非空”的逻辑，只需新增一个过滤器，再加入链式调用中即可。

示例2：后端请求链路的过滤器链（Spring Boot FilterChain）

在Java Spring Boot中，过滤器的链式调用是通过FilterChain接口实现的。当一个请求进入系统后，会依次经过所有注册的过滤器，每个过滤器通过chain.doFilter(request, response)将请求传递给下一个过滤器，直到所有过滤器执行完毕，才会进入对应的Controller处理业务逻辑。

比如我们有两个过滤器：① Token校验过滤器；② 接口耗时记录过滤器。它们的执行顺序是：