这篇文章主要介绍JavaScript Array.filter()怎么遍历数组中的元素，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

该filter()方法接受一个回调函数，并为它在目标数组内迭代的每个项目调用该函数。回调函数可以接受以下参数：

currentItem：这是当前正在迭代的数组中的元素。

index: 这是currentItem数组内部的索引位置。

array：这表示目标数组及其所有项目。

filter 方法创建一个新数组并返回所有满足回调中指定条件的项目。

在以下示例中，我将演示如何从 JavaScript 中的数组中过滤项目中使用filter()方法。

在这个例子中，我们过滤掉每个蹒跚学步的人（年龄介于 0 和 4 之间）。

letpeople=[{name:"aaron",age:65},{name:"beth",age:2},{name:"cara",age:13},{name:"daniel",age:3},{name:"ella",age:25},{name:"fin",age:1},{name:"george",age:43},]lettoddlers=people.filter(person=>person.age<=3)console.log(toddlers)/*[{age:2,name:"beth"},{age:3,name:"daniel"},{age:1,name:"fin"}]*/示例 2：如何根据特定属性过滤项目

在这个例子中，我们将只过滤掉开发人员的团队成员。

letteam=[{name:"aaron",position:"developer"},{name:"beth",position:"uidesigner"},{name:"cara",position:"developer"},{name:"daniel",position:"contentmanager"},{name:"ella",position:"cto"},{name:"fin",position:"backendengineer"},{name:"george",position:"developer"},]letdevelopers=team.filter(member=>member.position=="developer")console.log(developers)/*[{name:"aaron",position:"developer"},{name:"cara",position:"developer"},{name:"george",position:"developer"}]*/

在上面的例子中，我们过滤掉了开发人员。但是如果我们想过滤掉每个不是开发人员的成员呢？

我们可以这样做：

letteam=[{name:"aaron",position:"developer"},{name:"beth",position:"uidesigner"},{name:"cara",position:"developer"},{name:"daniel",position:"contentmanager"},{name:"ella",position:"cto"},{name:"fin",position:"backendengineer"},{name:"george",position:"developer"},]letnondevelopers=team.filter(member=>member.position!=="developer")console.log(nondevelopers)/*[{name:"beth",position:"uidesigner"},{name:"daniel",position:"contentmanager"},{name:"ella",position:"cto"},{name:"fin",position:"backendengineer"}]*/示例 3：如何访问 index 属性

这是一场比赛。本次比赛共有三名获胜者。第一名获得金牌，第二名获得银牌，第三名获得铜牌。

通过在每次迭代中使用filter和访问index每个项目的属性，我们可以将三个获胜者中的每一个过滤到不同的变量中。

letwinners=["Anna","Beth","Cara"]letgold=winners.filter((winner,index)=>index==0)letsilver=winners.filter((winner,index)=>index==1)letbronze=winners.filter((winner,index)=>index==2)console.log(Goldwinner:${gold},SilverWinner:${silver},BronzeWinner:${bronze})//"Goldwinner:Anna,SilverWinner:Beth,BronzeWinner:Cara"示例 4：如何使用数组参数

第三个参数（数组）最常见的用途之一是检查正在迭代的数组的状态。例如，我们可以检查数组中是否还有其他项。根据结果，我们可以指定不同的事情应该发生。

在这个例子中，我们将定义一个包含四个人的数组。但是，由于只能有三个获胜者，因此列表中的第四个人将不得不打折。

为了能够做到这一点，我们需要在每次迭代中获取有关目标数组的信息。

letcompetitors=["Anna","Beth","Cara","David"]functiondisplayWinners(name,index,array){letisNextItem=index+1<array.length?true:falseif(isNextItem){console.log(`TheNo${index+1}winneris${name}.`);}else{console.log(`Sorry,${name}isnotoneofthewinners.`)}}competitors.filter((name,index,array)=>displayWinners(name,index,array))/*"TheNo1winnerisAnna.""TheNo2winnerisBeth.""TheNo3winnerisCara.""Sorry,Davidisnotoneofthewinners."*/如何使用上下文对象

除了回调函数之外，该filter()方法还可以接收上下文对象。

filter(callbackfn,contextobj)

然后可以使用this关键字引用从回调函数内部引用此对象。

这将类似于example 1.我们将过滤掉所有年龄在 13 到 19 岁之间的人（青少年）。

但是，我们不会对回调函数内部的值进行硬编码。相反，我们将这些值 13 和 19 定义为range对象内部的属性，随后我们将其filter作为上下文对象（第二个参数）传入 。

letpeople=[{name:"aaron",age:65},{name:"beth",age:15},{name:"cara",age:13},{name:"daniel",age:3},{name:"ella",age:25},{name:"fin",age:16},{name:"george",age:18},]letrange={lower:13,upper:16}letteenagers=people.filter(function(person){returnperson.age>=this.lower&&person.age<=this.upper;},range)console.log(teenagers)/*[{age:15,name:"beth"},{age:13,name:"cara"},{age:16,name:"fin"}]*/

我们将range对象作为第二个参数传递给filter()。那时，它成为了我们的上下文对象。因此，我们能够分别使用this.upper和this.lower引用访问回调函数中的上限和下限。

以上是“JavaScript Array.filter()怎么遍历数组中的元素”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！