JS - find和filter函数的区别

86 阅读 0 评论 57 点赞

我是靠谱客的博主俏皮朋友，这篇文章主要介绍JS - find和filter函数的区别，现在分享给大家，希望可以做个参考。

find和filter函数的区别

find和filter都是数组的查找方法，但是会有一些细节的差别：
find

返回值是一个对象，只返回符合条件的第一项
找不到会返回undefined

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let tags = [
    { val: '进行中', isActive: true },
    {
        val: '进行中',
        isActive: false,
    },
    {
        val: '已参与',
        isActive: false,
    },
    { val: '已关闭', isActive: false },
]

let newTags = tags.find((item) => item.val == '进行中')

console.log("newTags",newTags);
结果是：newTags { val: '进行中', isActive: true } //只返回符合条件的第一项

filter

返回值是一个数组，数组里面是符合条件的每一个对象以逗号隔开，可以有多个
找不到会返回空数组 [ ]，不会返回undefined

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let tags = [
    { val: '进行中', isActive: true },
    {
        val: '进行中',
        isActive: false,
    },
    {
        val: '已参与',
        isActive: false,
    },
    { val: '已关闭', isActive: false },
]
let newTags = tags.filter((item) => item.val == '进行中')

console.log(newTags)
结果是：[ { val: '进行中', isActive: true }, { val: '进行中', isActive: false } ]

总结：
find和filter的返回值是大家比较容易搞混的，我们可以这样记：

find字面意思是寻找，但只会寻找第一个符合条件的，既然最终是返回一个，那么肯定就是找的的这一项；找不到就只能返回undefined。
filter字面意思是筛选，肯定是把所有符合条件的都找出来，这么多符合项肯定是要放在一个容器里面的，那这个容器就是一个数组，找不到自然是返回空数组呗。

如有错误，请多指出。