js实现多条件筛选数据
多条件筛选数据的实现方法
使用 Array.filter() 方法
通过 Array.filter() 结合多个条件进行筛选。每个条件可以独立判断，最终合并为完整的筛选逻辑。
const data = [
{ name: 'Alice', age: 25, city: 'New York' },
{ name: 'Bob', age: 30, city: 'Los Angeles' },
{ name: 'Charlie', age: 28, city: 'New York' }
];
function filterData(data, filters) {
return data.filter(item => {
return Object.keys(filters).every(key => {
if (filters[key] === '') return true; // 忽略空条件
return item[key] === filters[key];
});
});
}
const filters = { city: 'New York', age: 25 };
const result = filterData(data, filters);
console.log(result); // 输出: [{ name: 'Alice', age: 25, city: 'New York' }]动态构建筛选条件
允许条件动态增减，支持部分匹配或范围查询。
function dynamicFilter(data, conditions) {
return data.filter(item => {
return conditions.every(condition => {
const { key, value, operator = '===' } = condition;
switch (operator) {
case '===': return item[key] === value;
case '>': return item[key] > value;
case '<': return item[key] < value;
case 'includes': return String(item[key]).includes(value);
default: return true;
}
});
});
}
const conditions = [
{ key: 'city', value: 'New York' },
{ key: 'age', value: 26, operator: '<' }
];
const result = dynamicFilter(data, conditions);
console.log(result); // 输出: [{ name: 'Charlie', age: 28, city: 'New York' }]使用高阶函数封装
将筛选逻辑抽象为高阶函数，支持更复杂的组合条件。
const and = (...fns) => item => fns.every(fn => fn(item));
const or = (...fns) => item => fns.some(fn => fn(item));
const filterByCity = city => item => item.city === city;
const filterByAge = age => item => item.age > age;
const combinedFilter = and(
filterByCity('New York'),
or(filterByAge(24), filterByAge(27))
);
const result = data.filter(combinedFilter);
console.log(result); // 输出符合条件的项支持模糊搜索
通过正则表达式或字符串匹配实现模糊筛选。
function fuzzyFilter(data, keyword) {
const regex = new RegExp(keyword, 'i');
return data.filter(item => {
return Object.values(item).some(value =>
String(value).match(regex)
);
});
}
const result = fuzzyFilter(data, 'al');
console.log(result); // 输出包含 'al' 的项性能优化
对于大数据量，可以使用索引或 Web Worker 分片处理。
// 使用索引优化
const index = {};
data.forEach((item, idx) => {
Object.keys(item).forEach(key => {
if (!index[key]) index[key] = {};
const value = item[key];
if (!index[key][value]) index[key][value] = [];
index[key][value].push(idx);
});
});
function indexedFilter(filters) {
const matchedIndices = Object.keys(filters).map(key => {
const value = filters[key];
return index[key][value] || [];
});
const commonIndices = matchedIndices.reduce((a, b) =>
a.filter(x => b.includes(x))
);
return commonIndices.map(idx => data[idx]);
}以上方法覆盖了从基础到高级的多条件筛选需求，可根据实际场景选择或组合使用。
