从复杂到简单，数组过滤的详细指南

2024-01-29 23:10:12

JavaScript 数组过滤是一种强大的工具，允许我们从数组中提取满足特定条件的元素。通过使用 filter() 方法，我们可以轻松地对数组进行过滤，从而获得所需的子集。

单条件过滤

单条件过滤是最基本也是最常见的过滤方式。我们只需指定一个条件，数组过滤函数就会根据此条件从数组中提取满足条件的元素。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 过滤出数组中大于 5 的元素
const filteredNumbers = numbers.filter((number) => number > 5);

console.log(filteredNumbers); // [6, 7, 8, 9, 10]

多条件过滤

当我们需要根据多个条件对数组进行过滤时，可以使用逻辑运算符将多个条件组合在一起。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 过滤出数组中大于 5 且小于 8 的元素
const filteredNumbers = numbers.filter((number) => number > 5 && number < 8);

console.log(filteredNumbers); // [6, 7]

复杂过滤

有时，我们需要根据更复杂的条件对数组进行过滤。我们可以使用箭头函数来实现复杂的过滤条件。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 过滤出数组中满足以下条件的元素：
// 1. 大于 5
// 2. 是偶数
// 3. 可以被 3 整除
const filteredNumbers = numbers.filter(
  (number) => number > 5 && number % 2 === 0 && number % 3 === 0
);

console.log(filteredNumbers); // [6]

过滤对象数组

数组过滤函数还可以用于过滤对象数组。我们只需在过滤条件中指定对象的属性和值即可。

const users = [
  { name: "John", age: 25, gender: "male" },
  { name: "Jane", age: 30, gender: "female" },
  { name: "Mark", age: 28, gender: "male" },
  { name: "Mary", age: 22, gender: "female" },
];

// 过滤出数组中年龄大于 25 岁的用户
const filteredUsers = users.filter((user) => user.age > 25);

console.log(filteredUsers); 
// [
//   { name: "John", age: 25, gender: "male" },
//   { name: "Jane", age: 30, gender: "female" },
//   { name: "Mark", age: 28, gender: "male" }
// ]

过滤数组中的唯一元素

有时，我们需要从数组中过滤出唯一的元素。我们可以使用 Set 数据结构来实现此目的。

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

// 将数组转换为 Set
const uniqueNumbers = new Set(numbers);

// 将 Set 转换为数组
const filteredNumbers = Array.from(uniqueNumbers);

console.log(filteredNumbers); // [1, 2, 3, 4, 5]