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

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

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

JavaScriptArray.filter()方法

該filter()方法接受一個(gè)回調(diào)函數(shù)，并為它在目標(biāo)數(shù)組內(nèi)迭代的每個(gè)項(xiàng)目調(diào)用該函數(shù)?；卣{(diào)函數(shù)可以接受以下參數(shù)：

• ?currentItem?：這是當(dāng)前正在迭代的數(shù)組中的元素。
• ?index?: 這是?currentItem?數(shù)組內(nèi)部的索引位置。
• ?array?：這表示目標(biāo)數(shù)組及其所有項(xiàng)目。

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

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

在以下示例中，我將演示如何從 JavaScript 中的數(shù)組中過(guò)濾項(xiàng)目中使用filter()方法。

filter() 

示例 1：如何從數(shù)組中過(guò)濾項(xiàng)目

在這個(gè)例子中，我們過(guò)濾掉每個(gè)蹣跚學(xué)步的人（年齡介于 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：如何根據(jù)特定屬性過(guò)濾項(xiàng)目

在這個(gè)例子中，我們將只過(guò)濾掉開(kāi)發(fā)人員的團(tuán)隊(duì)成員。

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

在上面的例子中，我們過(guò)濾掉了開(kāi)發(fā)人員。但是如果我們想過(guò)濾掉每個(gè)不是開(kāi)發(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：如何訪問(wèn) index 屬性

這是一場(chǎng)比賽。本次比賽共有三名獲勝者。第一名獲得金牌，第二名獲得銀牌，第三名獲得銅牌。

通過(guò)在每次迭代中使用filter和訪問(wèn)index每個(gè)項(xiàng)目的屬性，我們可以將三個(gè)獲勝者中的每一個(gè)過(guò)濾到不同的變量中。

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

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

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

為了能夠做到這一點(diǎn)，我們需要在每次迭代中獲取有關(guān)目標(biāo)數(shù)組的信息。

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

如何使用上下文對(duì)象

除了回調(diào)函數(shù)之外，該filter()方法還可以接收上下文對(duì)象。

filter(callbackfn, contextobj)

然后可以使用this關(guān)鍵字引用從回調(diào)函數(shù)內(nèi)部引用此對(duì)象。

示例 5：如何訪問(wèn)上下文對(duì)象 this

這將類似于example 1. 我們將過(guò)濾掉所有年齡在 13 到 19 歲之間的人（青少年）。

但是，我們不會(huì)對(duì)回調(diào)函數(shù)內(nèi)部的值進(jìn)行硬編碼。相反，我們將這些值 13 和 19 定義為range對(duì)象內(nèi)部的屬性，隨后我們將其filter作為上下文對(duì)象（第二個(gè)參數(shù)）傳入  。

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對(duì)象作為第二個(gè)參數(shù)傳遞給filter()。那時(shí)，它成為了我們的上下文對(duì)象。因此，我們能夠分別使用this.upper和this.lower引用訪問(wèn)回調(diào)函數(shù)中的上限和下限。

總結(jié)

除了回調(diào)函數(shù)之外，該filter方法還可以將上下文對(duì)象作為第二個(gè)參數(shù)。這將讓你能夠使用this.

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