JS数组筛选指南

1. 引言

在 JavaScript 中，数组是一种非常常用的数据结构，它可以存储多个值，而且可以进行各种操作。数组的筛选是其中一个常见操作，它允许我们从一个数组中选择符合条件的元素，从而得到一个新的子数组。本文将详细介绍如何使用 JavaScript 对数组进行筛选，包括基本筛选、高级筛选和自定义筛选函数。

2. 基本筛选

2.1. `filter()` 方法

JavaScript 的数组原生提供了 filter() 方法，它可以根据指定的条件筛选出符合条件的元素，并返回一个新的数组。

const numbers = [1, 2, 3, 4, 5, 6];

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

2.2. `map()` 方法结合筛选

有时候，我们不仅需要筛选出符合条件的元素，还需要对这些元素进行处理。这时可以使用 map() 方法结合筛选操作。

const numbers = [1, 2, 3, 4, 5, 6];

const doubledEvenNumbers = numbers
  .filter((num) => num % 2 === 0)
  .map((num) => num * 2);
console.log(doubledEvenNumbers); // 输出 [4, 8, 12]

3. 高级筛选

3.1. 多条件筛选

有时候我们需要根据多个条件对数组进行筛选，可以通过在 filter() 方法中使用逻辑运算符来实现。

const products = [
  { name: 'iPhone', price: 999, color: 'black' },
  { name: 'iPad', price: 799, color: 'white' },
  { name: 'iMac', price: 1799, color: 'silver' },
];

const expensiveProducts = products.filter(
  (product) => product.price > 1000 && product.color === 'black'
);
console.log(expensiveProducts);
// 输出 [{ name: 'iMac', price: 1799, color: 'silver' }]

3.2. 对象数组筛选

如果数组的元素是对象，我们可以根据对象的属性值进行筛选。

const products = [
  { name: 'iPhone', price: 999, color: 'black' },
  { name: 'iPad', price: 799, color: 'white' },
  { name: 'iMac', price: 1799, color: 'silver' },
];

const blackProducts = products.filter((product) => product.color === 'black');
console.log(blackProducts);
// 输出 [{ name: 'iPhone', price: 999, color: 'black' }]

4. 自定义筛选函数

如果需求比较复杂，我们可以使用自定义的筛选函数来进行数组的筛选。自定义筛选函数接受三个参数：当前元素、当前索引和数组本身，根据需要返回 true 或 false 表示是否筛选当前元素。

const numbers = [1, 2, 3, 4, 5, 6];

const divisibleByThree = numbers.filter((num) => {
  return num % 3 === 0;
});
console.log(divisibleByThree); // 输出 [3, 6]