数组过滤器方法是 JavaScript 中使用最广泛的方法之一。
它允许我们快速过滤出具有特定条件的数组中的元素。
因此,在本文中,您将了解有关过滤器方法及其各种用例的所有内容。
所以让我们开始吧。
看看下面没有使用过滤器方法的代码:
在上面的代码中,我们正在查找具有我们正在使用方法的名称的所有员工。
for 循环代码看起来很复杂,因为我们需要手动循环数组并将匹配的员工推送到数组中。
但是使用数组过滤方法,我们可以简化上面的代码。
数组过滤方法的语法如下:
filter 方法不会更改原始数组,但会返回一个新数组,其中包含满足提供的测试条件的所有元素。
filter 方法将回调函数作为第一个参数,并为数组的每个元素执行回调函数。
在回调函数的每次迭代中,每个数组元素值都作为第一个参数传递给回调函数。
使用过滤器方法查看以下代码:
在这里,使用数组过滤方法,我们不需要手动循环遍历数组,也不需要事先创建数组来过滤掉匹配的员工。
filter 方法接受一个回调函数,数组的每个元素在循环的每次迭代中都作为第一个参数自动传递。
假设我们有以下数字数组:
而我们想要找出所有大于30的元素,那么我们可以使用如下所示的过滤方法:
所以在回调函数内部,在循环的第一次迭代中,数组中的第一个元素值 10 将作为参数值传递,并且 10 > 30 为 false,因此数字 10 不会被视为匹配项。
数组过滤方法返回一个数组,因此 10 不大于 30,它不会被添加到数组列表中。
然后在循环的下一次迭代中,数组中的下一个元素 40 将作为参数值传递给回调函数,当 40 > 30 为真时,将被视为匹配并添加到大批。
这将一直持续到数组中的所有元素都没有完成循环。
因此,只要回调函数返回一个值,该元素就不会被添加到过滤后的数组中。filter 方法返回一个数组,该数组仅包含回调函数为其返回值的那些元素。
您可以看到在循环的每次迭代中传递给回调函数的元素的当前值如果将值记录到控制台:
现在,看看下面的代码:
在上面的代码中,我们只找出那些值为.
回调函数可以如上所示编写,也可以使用箭头函数如下所示:
而如果箭头函数中只有一条语句,我们可以跳过return关键字,隐式返回值,如下图:
上面的代码可以进一步简化为:
要了解它是如何工作的,请查看我的这篇文章。
除了数组的实际元素外,传递给 filter 方法的回调函数还接收以下参数:
- 我们正在循环的数组中当前元素的
- 我们循环播放的原版
看看下面的代码:
正如您在上面看到的,数组过滤器方法对于过滤掉数组中的数据很有用。
但是过滤器方法在一些实际用例中也很有用,例如从数组中删除重复项,分离两个数组之间的公共元素等。
从数组中删除元素
filter 方法最常见的用例是从数组中删除特定元素。
在这里,我们从名称为 的数组中删除用户。
因此,在回调函数中,我们正在检查保留名称与存储在变量中的名称不匹配的用户的条件。
从数组中查找唯一或重复项
该方法返回第一个匹配元素的索引,因此,在上面的代码中,我们正在检查我们正在循环的元素的当前索引是否与第一个匹配元素的索引匹配,以找出唯一和重复元素.
查找两个数组之间的不同值
在这里,我们使用 filter 方法循环,在回调函数中,我们正在检查数组是否包含我们使用 array方法循环的当前元素。
如果该元素不匹配,则条件为真,该元素将被添加到数组中。
您还可以使用数组方法来实现相同的功能:
- 所有现代浏览器和 Internet Explorer (IE) 版本 9 及更高版本
- Microsoft Edge 版本 12 及更高版本
谢谢阅读!
到此这篇数组方法filter(数组方法slice)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/rfx/48952.html