简介
lodash.dropwhile 是一款由 JavaScript 实用程序库 Lodash 提供的功能强大的 npm 包，它可以用于从数组左侧开始删除元素，直到元素通过迭代函数为假时停止。它非常适合在前端开发中使用，让我们在本文中深入探索它的使用方法。
起步
要使用 lodash.dropwhile 包，首先我们需要安装它。通过运行以下命令，可以将它添加到您的项目中：
--- ------- ----------------
接下来，让我们在您的项目中引入它：
----- --------- - ---------------------------
使用方法
lodash.dropwhile 可以接受两个参数。第一个参数是包含要从中删除元素的数组，第二个参数是一个迭代函数。它遍历您提供的数组，对于每个元素，它在迭代函数中将此元素传递为参数。如果函数返回 true，则该元素将从数组中删除，否则它会在此时停止。
让我们使用一个简单的示例来了解它的使用方法。假设您有一个数组，其中包含数字 1 至 5。您只想保留在数组中值大于 3 的元素。您可以使用以下代码实现该功能：
----- --- - --- -- -- -- -- ----- ------ - -------------- --- -- - -- -- ------------------- -- --- --
这里我们传递了一个函数，其返回值为 true，只有在当前元素小于等于 3 时才返回 true。因此，当函数遇到数字 4 时，它停止删除数组中的元素，并返回剩余数组。
您还可以使用箭头函数使代码更简洁：
----- --- - --- -- -- -- -- ----- ------ - -------------- - -- - -- -- ------------------- -- --- --
此外，我们还可以使用下标进行迭代：
----- --- - --- -- -- -- -- ----- ------ - -------------- --- -- -- - -- -- ------------------- -- --- --
在上面的示例中，我们使用了迭代函数的第二个参数，该参数表示当前元素在数组中的下标。我们传递了函数，它将删除数组中前三个元素，因为它们具有最初的下标 0、1 和 2。
深入了解
对于更高级的用例，lodash.dropwhile 中还有更多选项可供探索。以下是一些例子，它们可以使您的工作流更加灵活。
- 立即退出：默认情况下，
lodash.dropwhile将在迭代函数返回false时停止迭代，并返回一组新结果。有时您可能需要更立即退出，以便在找到第一个条件不匹配的元素时停止。要实现这一点，您可以使用lodash.takeWhile函数进行迭代，统计经过修改的数组arr的长度并根据这个新长度newLength切割数组arr，如下所示：
----- --- - --- -- -- -- --
--- --------- - -
---------------- --- -- -
-- -- -- -- -
-----------
------ ----
- ---- -
------ -----
-
--
----- ------ - ------------ ----------
------------------- -- --- --在上面的示例中，我们使用了 _.slice 函数，该函数将返回修改后的 arr 数组，其中第一个参数是要切割的数组，第二个参数是从数组开始处切割的位置。
- 相反，只切出符合条件的元素：在一个数组中删除与迭代函数给定的条件不符合的所有元素之后，您可能需要获取所有符合条件的元素。为了做到这一点，迭代函数必须被重写，以便当第一个符合条件的元素被找到时，返回
false，使迭代尽早停止。为了实现这个目标，您可以使用以下代码：
----- --- - --- -- -- -- -- --- ------ - -- ----- ---------- - ---------------- --- -- - - -- -- ----------- - --- - ------ - ------------ -- ----------- - ------------------- -- --- -- --
在上面的示例中，我们使用了 _.findIndex 函数，该函数返回数组中从左到右找到的第一个符合条件的元素的下标。如果数组不满足条件，则返回 -1。然后，我们使用 _.slice 函数来切割数组并仅返回符合条件的元素。
总结
lodash.dropwhile 是一款强大、充满功能的 npm 包，它允许您控制从数组中删除元素的方式。您可以使用它来删除数组中未通过条件的元素，并仅返回满足条件的元素。通过本文中的示例代码，我们希望您已经学会了如何使用它在自己的项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/58866