在JavaScript开发中，数据过滤是非常高频的操作，比如列表搜索、数据清洗、条件筛选等场景都需要用到。不同的业务场景可以选择不同的实现方式，下面详细介绍几种常见的JavaScript数据过滤实现方法。
一、使用数组内置filter方法
filter是ES5引入的数组方法，它会遍历数组的每一个元素，将回调函数返回true的元素收集起来，最终返回一个新的数组，不会修改原数组。这是目前最推荐使用的过滤方式，代码简洁可读性高。
基础使用示例
比如我们有一个数字数组，需要过滤出所有大于10的元素：
const numList = [3, 7, 12, 5, 18, 2, 9];
// 过滤大于10的元素
const filteredNumList = numList.filter((item) => {
return item > 10;
});
console.log(filteredNumList); // 输出 [12, 18]
console.log(numList); // 原数组不变，输出 [3,7,12,5,18,2,9]对象数组过滤
实际开发中更多是对对象数组进行过滤，比如过滤出用户列表中年龄大于等于18岁的用户：
const userList = [
{ name: '张三', age: 16 },
{ name: '李四', age: 20 },
{ name: '王五', age: 18 },
{ name: '赵六', age: 15 }
];
// 过滤成年用户
const adultUserList = userList.filter((user) => {
return user.age >= 18;
});
console.log(adultUserList);
// 输出 [{name:'李四',age:20},{name:'王五',age:18}]二、使用for循环手动实现过滤
如果运行环境不支持ES5的filter方法，或者需要自定义更复杂的过滤逻辑，也可以通过for循环遍历数组手动实现过滤，这种方式兼容性更好。
const numList = [3, 7, 12, 5, 18, 2, 9];
const result = [];
for (let i = 0; i < numList.length; i++) {
if (numList[i] > 10) {
result.push(numList[i]);
}
}
console.log(result); // 输出 [12, 18]三、结合正则表达式过滤字符串数据
如果需要过滤符合特定字符串格式的元素，可以结合正则表达式实现，比如过滤出所有包含数字的字符串：
const strList = ['abc', 'a1b', 'def', '2cd', 'ghi'];
const hasNumList = strList.filter((str) => {
// 正则匹配是否包含数字
return /\d/.test(str);
});
console.log(hasNumList); // 输出 ['a1b', '2cd']四、复杂条件过滤的实现
当过滤条件比较复杂时，比如需要同时满足多个属性条件，只需要在filter的回调函数中编写组合判断逻辑即可，比如过滤出年龄大于等于18岁且名字长度大于2的用户：
const userList = [
{ name: '张三', age: 16 },
{ name: '李四', age: 20 },
{ name: '王小明', age: 18 },
{ name: '赵', age: 19 }
];
const targetUserList = userList.filter((user) => {
return user.age >= 18 && user.name.length > 2;
});
console.log(targetUserList);
// 输出 [{name:'王小明',age:18}]注意事项
- filter方法不会改变原数组，如果需要在过滤的同时修改元素，可以结合map方法使用。
- filter的回调函数需要明确返回布尔值，不要省略return，否则可能出现不符合预期的过滤结果。
- 如果过滤条件是动态变化的，可以将判断逻辑封装成单独的函数，提高代码复用性。
JavaScript数组过滤filter方法条件筛选数据处理修改时间：2026-06-03 00:58:02