JavaScript Array filter() 方法

JavaScript 中的 filter() 方法是 Array 对象的一个高阶函数，用于过滤数组中的元素并返回一个新的数组。在开发 web 前端应用程序时，filter() 方法是非常常用的，可以帮助我们快速筛选出符合条件的元素，提高开发效率。

语法

filter() 方法的语法如下：

const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

• callback 是一个回调函数，用来测试每个元素是否符合条件的函数，该函数接受三个参数：
  • element：当前正在处理的元素
  • index（可选）：当前正在处理的元素的索引
  • array（可选）：调用 filter() 方法的数组
• thisArg（可选）：执行 callback 函数时使用的 this 值

示例

假设有一个数组 numbers，我们想要筛选出所有大于等于 10 的元素，可以使用 filter() 方法：

const numbers = [5, 10, 15, 20, 25];

const filteredNumbers = numbers.filter(num => num >= 10);

console.log(filteredNumbers); // [10, 15, 20, 25]

在上面的示例中，我们定义了一个名为 numbers 的数组，然后使用 filter() 方法筛选出所有大于等于 10 的元素，最终得到了 [10, 15, 20, 25] 的新数组。

更复杂的例子

除了简单的数字筛选，filter() 方法还可以处理更复杂的条件。例如，假设有一个存储用户信息的数组 users，我们想要筛选出所有年龄大于 18 且性别为女性的用户：

// www.javascriptcn.com code example
const users = [
  { name: 'Alice', age: 25, gender: 'female' },
  { name: 'Bob', age: 17, gender: 'male' },
  { name: 'Cathy', age: 22, gender: 'female' },
  { name: 'David', age: 30, gender: 'male' }
];

const filteredUsers = users.filter(user => user.age > 18 && user.gender === 'female');

console.log(filteredUsers);
// [
//   { name: 'Alice', age: 25, gender: 'female' },
//   { name: 'Cathy', age: 22, gender: 'female' }
// ]

在这个例子中，我们使用 filter() 方法筛选出了年龄大于 18 且性别为女性的用户，最终得到了包含 Alice 和 Cathy 两个用户对象的数组。

总结

filter() 方法是 JavaScript 中非常实用的数组方法之一，能够帮助我们快速筛选出符合条件的元素，提高开发效率。结合回调函数和条件判断，我们可以处理各种复杂的筛选需求。希望本文能够帮助你更好地理解和运用 filter() 方法。