js实现多条件筛选数据
实现多条件筛选数据的方法
在JavaScript中，可以通过多种方式实现多条件筛选数据。以下是几种常见的方法：
使用Array.filter()方法
通过Array.filter()方法可以轻松实现多条件筛选。该方法会创建一个新数组，包含通过所提供函数测试的所有元素。
const data = [
{ id: 1, name: 'Apple', category: 'fruit', price: 1.2 },
{ id: 2, name: 'Carrot', category: 'vegetable', price: 0.8 },
{ id: 3, name: 'Banana', category: 'fruit', price: 1.5 }
];
const filters = {
category: 'fruit',
price: value => value < 1.4
};
const filteredData = data.filter(item =>
Object.entries(filters).every(([key, condition]) =>
typeof condition === 'function'
? condition(item[key])
: item[key] === condition
)
);动态构建筛选条件
对于更灵活的多条件筛选，可以动态构建筛选条件函数：
function multiFilter(data, conditions) {
return data.filter(item => {
for (const key in conditions) {
if (conditions[key] === undefined) continue;
if (typeof conditions[key] === 'function') {
if (!conditions[key](item[key])) return false;
} else {
if (item[key] !== conditions[key]) return false;
}
}
return true;
});
}
const conditions = {
category: 'fruit',
price: price => price > 1
};
const result = multiFilter(data, conditions);使用Lodash等工具库
Lodash提供了.filter和.conforms等方法简化多条件筛选：
import _ from 'lodash';
const filtered = _.filter(data, _.conforms({
category: val => val === 'fruit',
price: val => val < 1.4
}));处理复杂条件
对于包含AND/OR逻辑的复杂条件，可以构建更复杂的筛选函数：
function complexFilter(data, conditions) {
return data.filter(item => {
const andConditions = conditions.and || [];
const orConditions = conditions.or || [];
const andPass = andConditions.every(cond =>
Object.entries(cond).every(([key, val]) =>
typeof val === 'function' ? val(item[key]) : item[key] === val
)
);
const orPass = orConditions.length === 0 ||
orConditions.some(cond =>
Object.entries(cond).every(([key, val]) =>
typeof val === 'function' ? val(item[key]) : item[key] === val
)
);
return andPass && orPass;
});
}性能优化建议
对于大数据集，可以考虑以下优化措施：
- 对数据进行预处理或索引
- 使用Web Worker进行后台筛选
- 实现延迟筛选或分批筛选
- 使用Memoization缓存筛选结果
实际应用示例
以下是一个完整的示例，展示如何在React组件中实现多条件筛选：
function ProductList({ products }) {
const [filters, setFilters] = useState({
category: '',
minPrice: 0,
maxPrice: Infinity
});
const filteredProducts = products.filter(product => {
return (
(filters.category === '' || product.category === filters.category) &&
product.price >= filters.minPrice &&
product.price <= filters.maxPrice
);
});
return (
<div>
{/* 筛选控件 */}
<input
type="text"
placeholder="Category"
onChange={e => setFilters({...filters, category: e.target.value})}
/>
<input
type="number"
placeholder="Min price"
onChange={e => setFilters({...filters, minPrice: Number(e.target.value)})}
/>
<input
type="number"
placeholder="Max price"
onChange={e => setFilters({...filters, maxPrice: Number(e.target.value)})}
/>
{/* 产品列表 */}
{filteredProducts.map(product => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>Price: ${product.price}</p>
</div>
))}
</div>
);
}这些方法提供了从简单到复杂的多条件筛选实现方案，可以根据具体需求选择合适的方法。
