JavaScript Array.filter()教程 如何遍歷數組中的元素

Array.filter()方法可以說是 JavaScript 中迭代數組的最重要和最廣泛使用的方法。該方法的filter()工作方式非常簡單。它需要根據某些條件/偏好從更大的項目集合（超集）中過濾出一個或多個項目（子集）。

我們每天都這樣做，無論是閱讀、選擇朋友或配偶、選擇看什么電影等等。

JavaScriptArray.filter()方法

該filter()方法接受一個回調函數，并為它在目標數組內迭代的每個項目調用該函數。回調函數可以接受以下參數：

• ?currentItem?：這是當前正在迭代的數組中的元素。
• ?index?: 這是?currentItem?數組內部的索引位置。
• ?array?：這表示目標數組及其所有項目。

filter 方法創(chuàng)建一個新數組并返回所有滿足回調中指定條件的項目。

如何在 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：如何根據特定屬性過濾項目

在這個例子中，我們將只過濾掉開發(fā)人員的團隊成員。

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

在上面的例子中，我們過濾掉了開發(fā)人員。但是如果我們想過濾掉每個不是開發(fā)人員的成員呢？

我們可以這樣做：

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：如何使用數組參數

第三個參數（數組）最常見的用途之一是檢查正在迭代的數組的狀態(tài)。例如，我們可以檢查數組中是否還有其他項。根據結果??，我們可以指定不同的事情應該發(fā)生。

在這個例子中，我們將定義一個包含四個人的數組。但是，由于只能有三個獲勝者，因此列表中的第四個人將不得不打折。

為了能夠做到這一點，我們需要在每次迭代中獲取有關目標數組的信息。

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方法還可以將上下文對象作為第二個參數。這將讓你能夠使用this.

我希望你從這篇文章中得到一些有用的東西。