JavaScript Array.filter()教程--如何遍历数组中的元素

迪鲁宾
204 阅读4分钟

Array.filter() 方法可以说是JavaScript中最重要和最广泛使用的遍历数组的方法。

filter() 方法的工作方式非常简单。它需要根据一些条件/偏好，从一个更大的项目集合（超集合）中过滤出一个或多个项目（子集）。

我们每天都会这样做，无论是阅读、选择朋友或配偶、选择看什么电影，等等。

JavaScript的Array.filter() 方法

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

  • currentItem:这是当前被迭代的数组中的元素。
  • index:这是currentItem ，在数组中的索引位置。
  • array:表示目标数组及其中的所有项目。

过滤器方法创建一个新的数组，并返回所有通过回调中指定条件的项目。

如何在JavaScript中使用filter() 方法

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

filter() 例1：如何过滤数组中的项目

在这个例子中，我们过滤掉了所有刚学会走路的人（年龄在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"
}]
*/

filter() 例2：如何根据一个特定的属性来过滤掉项目

在这个例子中，我们将只过滤出团队成员中的开发者：

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() 例3：如何访问索引属性

这是一个比赛。在这个比赛中，有三个获胜者。第一个将获得金牌，第二个将获得银牌，第三个将获得铜牌。

通过使用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"

filter() 例四：如何使用数组参数

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

在这个例子中，我们要定义一个有四个人的数组。然而，由于只能有三个赢家，所以列表中的第四个人将不得不被打折。

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

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."
*/

哎呀，对不起，David!

如何使用上下文对象

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

filter(callbackfn, contextobj)

这个对象可以在回调函数中使用this 关键字引用来引用。

filter() 例子5：如何访问上下文对象？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 的引用来访问我们的上限和下限范围。

收尾工作

filter() 数组方法过滤出与回调表达式相匹配的项目，并返回它们。

除了回调函数之外，filter 方法还可以接收一个上下文对象作为第二个参数。这将使你能够使用this ，从回调函数中访问其任何属性。

我希望你从这篇文章中得到一些有用的东西。

如果你想了解更多关于Web开发的知识，请随时访问我的博客

谢谢你的阅读，再见。

avatar
文章
阅读
粉丝