使用 Array.prototype.filter 筛选接口数据需三步：先解构出数组（如 res.data），再编写返回布尔值的回调函数（如 u => u.status === 'active'），最后在异步响应后调用（如 await 后的 data.filter）。
用 Array.prototype.filter 筛选接口数据，核心是先拿到数组（比如 API 返回的列表），再传入一个判断函数，返回满足条件的新数组。关键在于：数据得是数组、判断逻辑要写对、注意异步时机。
确保接口返回的是数组
很多接口返回的是对象包裹的数组，比如：{ code: 200, data: [ {...}, {...} ] }。直接对响应对象调用 filter 会报错（xxx.filter is not a function）。必须先解构出真正的数组：
-
错误写法：
res.filter(...)（res是对象） -
正确写法：
res.data.filter(...)或res.result.list.filter(...)，具体看后端字段名
写好 filter 的回调函数
filter 的参数是一个函数，它接收每个元素（item）、索引（index）、原数组（arr），通常只用 item。返回 true 表示保留，false 表示过滤掉。
- 筛选状态为 "active" 的用户：
users.filter(u => u.status === 'active') - 排除价格为空或小于 0 的商品：
products.filter(p => p.price && p.price > 0) - 模糊搜索名称包含关键词：
list.filter(item => item.name?.includes(keyword))（?.includes防止 name 为 undefined）
注意异步执行顺序
接口请求是异步的，不能在 fetch 或 axios 外直接调用 filter。必须等数据回来后再处理：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
-
错误写法：
const filtered = apiData.filter(...); // 此时 apiData 还没赋值 -
正确写法：在
.then()、async/await或响应成功回调里操作
示例（使用 async/await）：
const res = await fetch('/api/users');
const { data } = await res.json();
const activeUsers = data.filter(user => user.enabled);
结合其他方法做复合筛选
单靠 filter 可能不够，常和 map、some、三元判断组合使用：
- 先筛选再取字段：
data.filter(x => x.type === 'vip').map(x => ({ id: x.id, name: x.fullname })) - 按多条件筛选（如状态 + 类型）：
list.filter(item => item.status === 'published' && item.category === 'news') - 动态条件（避免重复写多个 filter）：
list.filter(item => !status || item.status === status)（status为空时不过滤）
