JavaScript中的find()与filter()的区别

find() 和 filter() 方法都是 JavaScript 中用于 搜索 和 操作 数组的高阶数组方法。然而，它们有不同的用途和返回值。

什么是 Find()？

find() 方法用于查找数组中第一个满足给定条件的元素。它接受一个 回调 函数作为参数，该函数会被应用于数组中的每个元素，直到找到第一个满足条件的元素。如果在数组中找不到这样的元素，find() 方法将返回该元素，或者 undefined。

find() 用法示例

输出

2

在上面的示例中，find() 方法用于查找 numbers 数组中的第一个偶数。

什么是 Filter()？

filter() 方法用于创建一个新数组，其中包含所有满足给定条件的元素。它也接受一个回调函数作为参数，该函数会被应用于数组中的每个元素。如果回调函数对某个元素返回 true，则该元素将被包含在新数组中。如果返回 false，则该元素将被排除。

filter() 用法示例

输出

[ 2, 4 ]

在上面的示例中，filter() 方法用于创建一个新数组，其中只包含 numbers 数组中的所有偶数。

find() 和 filter() 方法之间的主要区别

find() 和 filter() 方法之间存在许多关键区别。一些主要区别如下：

返回值

find() 方法返回数组中第一个满足提供的测试函数的元素，而 filter() 方法返回一个新数组，其中包含所有满足提供的测试函数的元素。

执行

find() 方法对数组中的每个元素执行一次回调函数，直到找到匹配项为止，而 filter() 方法对数组中的每个元素都执行回调函数，并创建一个包含回调函数返回 true 的所有元素的新数组。

输出

find() 方法返回单个元素，而 filter() 方法返回一个元素数组（如果没有任何元素满足测试函数，则可能为空）。

使用场景

当您想在数组中查找一个满足特定条件的单个元素时，find() 方法很有用；而当您想创建一个包含数组中所有满足特定条件的元素的新数组时，filter() 方法很有用。

以下是一些展示这些区别的附加示例：

示例 1

输出

2

在第一个示例中，find() 方法用于查找 numbers 数组中的第一个偶数。由于数组中只有一个偶数，find() 方法返回数字 2。

示例 2

输出

[2, 4]

在第二个示例中，filter() 方法用于创建一个新数组，其中包含 numbers 数组中的所有偶数。结果数组是 [2, 4]。

示例 3

输出

Undefined

在第三个示例中，find() 方法用于查找 numbers 数组中第一个大于 5 的数字。由于数组中没有大于 5 的数字，find() 方法返回 undefined。

示例 4

输出

[4, 5]

在第四个示例中，filter() 方法用于创建一个新数组，其中包含 numbers 数组中所有大于 3 的数字。结果数组是 [4, 5]。

结论

总之，find() 方法用于查找满足给定条件的第一个元素，而 filter() 方法用于创建一个包含满足给定条件的所有元素的新数组。