您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍JavaScript Array.filter()怎么遍历数组中的元素，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
该filter()方法接受一个回调函数，并为它在目标数组内迭代的每个项目调用该函数。回调函数可以接受以下参数：
currentItem：这是当前正在迭代的数组中的元素。
index: 这是currentItem数组内部的索引位置。
array：这表示目标数组及其所有项目。
filter 方法创建一个新数组并返回所有满足回调中指定条件的项目。
在以下示例中，我将演示如何从 JavaScript 中的数组中过滤项目中使用filter()方法。
在这个例子中，我们过滤掉每个蹒跚学步的人（年龄介于 0 和 4 之间）。
let people = [
{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},
]
let toddlers = people.filter(person => person.age <= 3)
console.log(toddlers)
/*
[{
age: 2,
name: "beth"
}, {
age: 3,
name: "daniel"
}, {
age: 1,
name: "fin"
}]
*/在这个例子中，我们将只过滤掉开发人员的团队成员。
let team = [
{
name: "aaron",
position: "developer"
},
{
name: "beth",
position: "ui designer"
},
{
name: "cara",
position: "developer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
},
{
name: "george",
position: "developer"
},
]
let developers = team.filter(member => member.position == "developer")
console.log(developers)
/*
[{
name: "aaron",
position: "developer"
}, {
name: "cara",
position: "developer"
}, {
name: "george",
position: "developer"
}]
*/在上面的例子中，我们过滤掉了开发人员。但是如果我们想过滤掉每个不是开发人员的成员呢？
我们可以这样做：
let team = [
{
name: "aaron",
position: "developer"
},
{
name: "beth",
position: "ui designer"
},
{
name: "cara",
position: "developer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
},
{
name: "george",
position: "developer"
},
]
let nondevelopers = team.filter(member => member.position !== "developer")
console.log(nondevelopers)
/*
[
{
name: "beth",
position: "ui designer"
},
{
name: "daniel",
position: "content manager"
},
{
name: "ella",
position: "cto"
},
{
name: "fin",
position: "backend engineer"
}
]
*/这是一场比赛。本次比赛共有三名获胜者。第一名获得金牌，第二名获得银牌，第三名获得铜牌。
通过在每次迭代中使用filter和访问index每个项目的属性，我们可以将三个获胜者中的每一个过滤到不同的变量中。
let winners = ["Anna", "Beth", "Cara"]
let gold = winners.filter((winner, index) => index == 0)
let silver = winners.filter((winner, index) => index == 1)
let bronze = winners.filter((winner, index) => index == 2)
console.log(Gold winner: ${gold}, Silver Winner: ${silver}, Bronze Winner: ${bronze})
// "Gold winner: Anna, Silver Winner: Beth, Bronze Winner: Cara"第三个参数（数组）最常见的用途之一是检查正在迭代的数组的状态。例如，我们可以检查数组中是否还有其他项。根据结果，我们可以指定不同的事情应该发生。
在这个例子中，我们将定义一个包含四个人的数组。但是，由于只能有三个获胜者，因此列表中的第四个人将不得不打折。
为了能够做到这一点，我们需要在每次迭代中获取有关目标数组的信息。
let competitors = ["Anna", "Beth", "Cara", "David"]
function displayWinners(name, index, array) {
let isNextItem = index + 1 < array.length ? true : false
if (isNextItem) {
console.log(`The No${index+1} winner is ${name}.`);
} else {
console.log(`Sorry, ${name} is not one of the winners.`)
}
}
competitors.filter((name, index, array) => displayWinners(name, index, array))
/*
"The No1 winner is Anna."
"The No2 winner is Beth."
"The No3 winner is Cara."
"Sorry, David is not one of the winners."
*/除了回调函数之外，该filter()方法还可以接收上下文对象。
filter(callbackfn, contextobj)然后可以使用this关键字引用从回调函数内部引用此对象。
这将类似于example 1. 我们将过滤掉所有年龄在 13 到 19 岁之间的人（青少年）。
但是，我们不会对回调函数内部的值进行硬编码。相反，我们将这些值 13 和 19 定义为range对象内部的属性，随后我们将其filter作为上下文对象（第二个参数）传入 。
let people = [
{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},
]
let range = {
lower: 13,
upper: 16
}
let teenagers = people.filter(function(person) {
return person.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()怎么遍历数组中的元素”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。