当前位置：首页 > JavaScript

js实现筛选数组

2026-01-30 22:23:31JavaScript

筛选数组的方法

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

使用Array.prototype.filter()方法
filter()方法创建一个新数组，包含通过测试的所有元素。

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

使用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]

使用Array.prototype.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]

使用Array.prototype.find()或findIndex()
find()返回第一个符合条件的元素，findIndex()返回其索引，适用于查找特定元素。

js实现筛选数组

const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 输出: 2

筛选复杂对象数组

对于对象数组，可以根据对象的属性值筛选：

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];
const adults = users.filter(user => user.age >= 25);
console.log(adults); // 输出: [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]

多条件筛选

可以通过逻辑运算符（如&&、||）组合多个条件：

const products = [
  { name: 'Laptop', price: 1000, stock: 5 },
  { name: 'Phone', price: 500, stock: 0 },
  { name: 'Tablet', price: 300, stock: 10 }
];
const availableProducts = products.filter(
  product => product.price < 800 && product.stock > 0
);
console.log(availableProducts); // 输出: [{ name: 'Tablet', price: 300, stock: 10 }]

动态筛选条件

可以将筛选条件抽象为函数，实现动态筛选：

const numbers = [1, 2, 3, 4, 5];
const isEven = num => num % 2 === 0;
const filteredNumbers = numbers.filter(isEven);
console.log(filteredNumbers); // 输出: [2, 4]

以上方法覆盖了从简单到复杂的筛选需求，可以根据具体场景选择合适的方式。