JavaScript中Array.filter的使用详解

UANOQ • 2025-02-24 00:33 • 编程

一、简介

Array.filter是ES6新增的高阶函数，它接收一个回调函数，该函数作用于数组的每一个元素，返回true则保留该元素，返回false则过滤掉该元素，最终返回一个新的数组。

二、语法

array.filter(function(currentValue, index, arr), thisValue)

currentValue：当前遍历到的数组元素
index：当前遍历到的数组元素的下标
arr：被遍历的数组
thisValue：可选，指定回调函数中的this对象

三、应用场景

在实际开发中，Array.filter广泛应用于从数组中获取指定条件的元素，例如：

从一个对象数组中筛选出满足指定条件的对象
从一个字符串数组中筛选出指定字符开头的字符串
从一个数字数组中筛选出大于某个特定数字的元素

四、实例一：筛选对象数组

假设有一个人员信息对象数组，需要筛选出所有年龄大于等于18岁且性别为女性的人员：

const persons = [
  { name: '张三', age: 20, gender: '男' },
  { name: '李四', age: 17, gender: '女' },
  { name: '王五', age: 18, gender: '女' },
  { name: '赵六', age: 22, gender: '男' },
]

const females = persons.filter(person => person.age >= 18 && person.gender === '女')

console.log(females) // [{ name: '王五', age: 18, gender: '女' }]

用filter函数遍历persons数组，将符合条件的元素放入新的数组females中，并返回females数组。

五、实例二：筛选字符串数组

假设有一个字符串数组，需要筛选出所有以字母a开头的字符串：

const strs = ['apple', 'banana', 'avocado', 'kiwi', 'apricot']

const aStrs = strs.filter(str => str.startsWith('a'))

console.log(aStrs) // ['apple', 'avocado', 'apricot']

利用filter函数遍历strs数组，用startsWith方法判断元素是否以字母a开头，将符合条件的元素放入新数组aStrs中，最终返回aStrs数组。

六、实例三：筛选数字数组

假设有一个数字数组，需要筛选出所有大于等于70的元素：

const scores = [90, 60, 80, 70, 50, 85]

const highScores = scores.filter(score => score >= 70)

console.log(highScores) // [90, 80, 70, 85]

利用filter函数遍历scores数组，将大于等于70的元素放入新数组highScores中，并返回highScores数组。

七、结语

Array.filter是一个非常灵活实用的函数，能够帮助我们快速地从数组中提取所需元素，同时也可以通过自定义回调函数进行更为复杂的筛选操作。希望大家可以善用Array.filter，提高开发效率。

原创文章，作者：UANOQ，如若转载，请注明出处：https://www.506064.com/n/361062.html