当前位置：首页 > JavaScript

js实现筛选数组

2026-03-01 13:28:45JavaScript

筛选数组的常用方法

在JavaScript中，数组筛选可以通过多种方式实现，以下是几种常见的方法：

filter方法 使用数组的filter方法可以创建一个新数组，包含通过测试的所有元素：

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

for循环 通过传统的for循环遍历数组并筛选元素：

js实现筛选数组

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evenNumbers.push(numbers[i]);
  }
}
console.log(evenNumbers); // [2, 4]

reduce方法 使用reduce方法可以将数组缩减为满足条件的元素集合：

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

复杂条件的筛选

当需要基于多个条件筛选时，可以在回调函数中组合条件：

js实现筛选数组

const users = [
  { name: 'Alice', age: 25, active: true },
  { name: 'Bob', age: 30, active: false },
  { name: 'Charlie', age: 22, active: true }
];
const activeYoungUsers = users.filter(user => user.active && user.age < 30);
console.log(activeYoungUsers); 
// [{ name: 'Alice', age: 25, active: true }, { name: 'Charlie', age: 22, active: true }]

筛选并修改元素

使用map和filter组合可以在筛选的同时转换元素：

const products = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Phone', price: 699 },
  { id: 3, name: 'Tablet', price: 499 }
];
const expensiveProductNames = products
  .filter(product => product.price > 500)
  .map(product => product.name);
console.log(expensiveProductNames); // ['Laptop', 'Phone']

性能考虑

对于大型数组，filter方法通常比手动循环更高效，因为它是原生实现的。但在某些特殊情况下，提前终止循环可能更优：

const bigArray = Array(1000000).fill().map((_, i) => i);
const result = [];
for (let i = 0; i < bigArray.length; i++) {
  if (bigArray[i] > 500) break; // 提前终止
  if (bigArray[i] % 2 === 0) {
    result.push(bigArray[i]);
  }
}