Underscore.js _.filter 函数

Underscore.js 是什么？

Underscore.js 是 JavaScript 中的一个库，它包含许多函数，如 map、filter、chain 等，这些函数直接应用于 对象 或 数组。

在本文中，我们将讨论 Underscore.js 的一个函数，它被称为 filter 函数。

_.filter() 函数

_.filter() 函数用于检查并过滤那些满足特定条件的元素。它将这些元素存储在一个新变量中。此函数应用于数组，并创建一个只包含满足条件元素的新数组。此函数通常在给定数组大小过大时使用。

语法

此函数有两个必需参数和一个可选参数

initialList： 这是列表，例如数组或对象，从中过滤必要的元素。

predicate： 这是一个函数，它会检查每个元素的条件，并将满足给定条件的元素放入结果数组中。

[context]： 此参数包含一些文本，在使用此函数时将打印出来，它是一个可选参数。

计算后，filter 函数将返回一个新数组，其中包含满足条件的元素。新数组将存储在指定的变量中。

现在，我们将通过一些示例来理解 _.filter() 函数

示例 1

在此示例中，我们将在包含正整数值的数组上使用 _.filter() 函数。我们将根据给定条件从数组中过滤奇数值。

JavaScript 代码

输出

[ 1, 3, 5, 7, 9 ]

说明

在上面的代码中，我们首先导入了 库。然后我们对整数数组应用了 _.filter() 方法，并在条件部分，我们放置了一个函数，该函数检查数组的每个元素并返回奇数值。因此，数组的所有值都将传递到函数中，奇数值将存储在一个名为 oddNumber 的新变量数组中。最后，我们打印了只包含奇数值的结果数组。

示例 2

在此示例中，我们将在包含单词列表的数组上使用 _.filter() 方法。我们将根据单词的长度过滤数组值。

JavaScript 代码

输出

[ 'hypertext' ]

说明

在上面的代码中，我们导入了库。然后我们创建了一个单词列表，并对该列表应用了 _.filter() 函数。在条件中，我们只返回长度等于 9 的元素。我们只在结果数组中得到一个元素，我们使用 console.log() 语句打印了它。

示例 3

我们将对包含数字列表的数组应用 _.filter() 函数，并将使用给定条件过滤大于一百的数组值。

JavaScript 代码

输出

[ 134, 330 ]

说明

在上面的代码中，我们首先导入了库。然后我们使用了一个单独的函数，它将用作 _.filter() 方法的条件。如果数字大于 100，此函数将返回该数字。我们对整数列表应用了 _.filter() 方法，并在条件部分调用了 greaterThanHundred 函数。因此我们得到了包含大于 100 的元素的结果数组。

示例 4

我们将对包含单词列表的数组使用 _.filter() 方法。我们将应用此方法来过滤包含子字符串 'pt' 的元素。

JavaScript 代码

输出

[ 'JavaScript' ]

说明

在上面的代码中，我们首先导入了库。然后我们创建了一个包含单词的列表，我们将对它应用 _.filter() 方法。现在我们创建了一个函数和一个参数，如果该参数是任何元素的子字符串，则返回列表。

在此函数中，我们对列表应用了 _.filter() 方法，该方法获取每个列表元素并使用 toLowerCase() 函数将其转换为小写单词。然后它使用 indexOf() 函数来查找参数是否存在为子字符串。如果函数返回值大于等于零，则表示该参数是给定单词的子字符串，我们将把该单词返回到结果数组中。

在上面的示例中，我们将得到存在 'pt' 单词的元素，而 'JavaScript' 是满足条件的元素。

示例 5

我们将对对象数组使用 _.filter() 方法，并只过滤出活跃用户。

JavaScript 代码

输出

[ { name: 'Alex', active: true }, { name: 'Robert', active: true } ]

说明

在上面的代码中，我们首先导入了 Lodash 库。然后我们创建了一个名为 users 的对象列表，我们将对它应用 _.filter() 方法。对象数组表示具有名称和活跃状态的用户。

我们对 users 对象应用了 _.filter() 方法，该方法遍历数组中存在的每个用户，并应用谓词函数，该函数检查用户是否活跃。如果用户活跃，则将其显示在结果数组中。

结论

我们已经在这篇文章中理解了 Underscore.js _.filter 函数。此函数用于根据给定条件过滤数组的元素。它返回包含过滤元素的新数组。当我们想从数组中获取特定元素时，此方法非常有用。我们通过示例学习了它，消除了所有疑问。

常见问题解答 (FAQs)

1. Underscore.js 中的 _.filter 是什么？

它是 Underscore.js 库中的一个函数，它允许您遍历列表（例如数组或对象）并仅保留与您指定的条件匹配的项。它与 JavaScript 内置的 filter() 非常相似。

2. _.filter 与 JavaScript 原生 filter() 有何不同？

它们之间的区别是：

• JavaScript 中的 filter() 仅适用于数组。
• filter 适用于数组和对象。此外，它与旧浏览器兼容。

3. 如何使用 _.filter()？

我们可以这样使用 _.filter 函数：

输出

[2, 4]

4. 我可以在对象上使用 _.filter 而不是数组吗？

是的，与 JavaScript 内置的 filter() 方法仅适用于数组不同，_.filter 也可以在对象上工作。它遍历对象的值。例如：

输出

[2, 3]

5. _.filter 内部的回调函数叫什么？

它被称为谓词。它决定每个项是否应该保留（如果它返回 true）或被排除（如果它返回 false）。

6. 我可以使用箭头函数与 _.filter 吗？

是的，您可以将 箭头函数 与 _.filter 一起使用。现代代码通常这样使用箭头函数方法：

7. _.filter 找到匹配项时会停止吗？

不会。它总是检查列表中的每个项目。如果您想在第一次匹配后停止，您应该使用类似 _.find 的东西。

8. 如果 _.filter 中没有匹配项会发生什么？

如果没有任何匹配项，您将得到一个空数组。这意味着没有任何项目通过您的测试。