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

2021-08-27 11:15:24 浏览数 (4)

Array.filter()方法可以说是 JavaScript 中迭代数组的最重要和最广泛使用的方法。该方法的filter()工作方式非常简单。它需要根据某些条件/偏好从更大的项目集合（超集）中过滤出一个或多个项目（子集）。

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

JavaScriptArray.filter()方法

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

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

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

如何在 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"
}]
*/

示例 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"
	}
]

*/

示例 3：如何访问 index 属性

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

通过在每次迭代中使用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"

示例 4：如何使用数组参数

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

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

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

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关键字引用从回调函数内部引用此对象。

示例 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()阵列法过滤出项目（S）匹配回调表达并返回它们哪个。

除了回调函数之外，该filter方法还可以将上下文对象作为第二个参数。这将让你能够使用this.

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


JavaScript

0 人点赞