数组find与filter方法

原创已于 2022-10-15 21:15:58 修改 · 846 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-09-23 21:06:29 首次发布

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了JavaScript中数组的筛选方法find和filter，filter用于过滤出满足条件的所有元素，返回新的数组；find则查找第一个满足条件的元素，返回单一结果。适用场景上，filter适合获取所有匹配项，find适用于只关心第一个匹配项的情况。此外，还提到了findIndex和includes这两个相关方法，前者返回匹配元素的索引，后者判断数组是否包含特定值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组find与filter方法

数组的筛选

数组的筛选

进行数组筛选可以用两个方法，一个是find，一个是filter，下面就对两个方法进行介绍。

filter

filter从单词意思就可以知道是侧重于数组的过滤，根据条件筛选出返回满足条件的所有结果，结果的类型是一个数组，如果找不到的话将返回一个空数组。

	const arr = [1,1,2,2,3,2,4,1,2,1]

    const filterData = arr.filter(item=>item===1) // [1,1,1,1]
    const filterData = arr.filter(item=>item===5) // []

find

find从单词意思就可以知道是侧重于数组的查找，根据条件返回满足条件的第一个结果，结果的类型是查找出来结果的类型，如果找不到的话将返回undefined。

	const arr = [1,1,2,2,3,2,4,1,2,1]

    const findData = arr.find(item=>item===1) // 1
    const findData = arr.find(item=>item===5) // undefined

适用场景

filter适合获取一个数组中筛选出所有满足条件的结果，返回是一个数组。
find适合获取一个数组中满足条件的第一个结果，只关心有没有满足条件，不关心数组中有多少个满足。
当然其实filter也能满足find的基本场景，filter的结果通过取下标第0个的元素，但是显然这种场景更适合使用find，以前不知道find的时候，作者都是用的这个笨办法去查找。。。

引申

findIndex：find的孪生兄弟，这个方法是返回满足条件的第一个元素的索引，如果找不到将返回-1。

	const arr = [1,1,2,2,3,2,4,1,2,1]

    const index = arr.findIndex(item=>item===1) // 0
    const index = arr.findIndex(item=>item===5) // -1

include：include方法直接返回boolean，这个方法应该是最适合判断数组中是否包含某个值

	const arr = [1,1,2,2,3,2,4,1,2,1]
	const isInclude = arr.includes(2)   // true
	const isInclude = arr.includes(5)   // false