当前位置：首页 > JavaScript

js实现过滤

2026-03-15 05:29:33JavaScript

过滤数组的基本方法

在JavaScript中，数组过滤可以通过多种方式实现。Array.prototype.filter()是最常用的方法，它创建一个新数组，包含通过所提供函数测试的所有元素。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

自定义过滤函数

如果需要更复杂的过滤逻辑，可以编写自定义过滤函数。这种方式适用于需要复用过滤逻辑的场景。

js实现过滤

function filterByProperty(array, property, value) {
    return array.filter(item => item[property] === value);
}

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 }
];
const filteredUsers = filterByProperty(users, 'age', 25);
console.log(filteredUsers); // [{ name: 'Alice', age: 25 }]

使用reduce实现过滤

Array.prototype.reduce()也可以用于实现过滤功能，虽然不如filter()直观，但在某些复杂场景下更灵活。

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.reduce((acc, num) => {
    if (num % 2 !== 0) acc.push(num);
    return acc;
}, []);
console.log(oddNumbers); // [1, 3, 5]

链式过滤操作

多个过滤条件可以通过链式调用filter()方法实现，每个filter()都会基于前一个过滤结果进行处理。

js实现过滤

const products = [
    { name: 'Laptop', price: 1000, category: 'electronics' },
    { name: 'Shirt', price: 20, category: 'clothing' }
];
const filteredProducts = products
    .filter(product => product.price > 10)
    .filter(product => product.category === 'electronics');
console.log(filteredProducts); // [{ name: 'Laptop', price: 1000, category: 'electronics' }]

过滤和映射结合

filter()常与map()结合使用，先过滤出需要的元素，再对结果进行转换。

const numbers = [1, 2, 3, 4, 5];
const squaredEvenNumbers = numbers
    .filter(num => num % 2 === 0)
    .map(num => num * num);
console.log(squaredEvenNumbers); // [4, 16]

性能优化建议

对于大型数组，过滤操作可能影响性能。可以考虑以下优化方法：

使用for循环代替filter()，在极高性能要求的场景下可能更快
尽早减少数据量，在链式操作中将最严格的过滤条件放在前面
考虑使用Web Worker进行离屏处理，避免阻塞主线程

// 使用for循环的过滤实现
const array = [/* 大型数组 */];
const result = [];
for (let i = 0; i < array.length; i++) {
    if (/* 过滤条件 */) {
        result.push(array[i]);
    }
}

标签: js