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ù)組并返回所有滿(mǎn)足回調(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
這將類(lèi)似于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é)
filter()
陣列法過(guò)濾出項(xiàng)目(S)匹配回調(diào)表達(dá)并返回它們哪個(gè)。除了回調(diào)函數(shù)之外,該filter
方法還可以將上下文對(duì)象作為第二個(gè)參數(shù)。這將讓你能夠使用this
.
我希望你從這篇文章中得到一些有用的東西。