Array.filter()
方法可以說是 JavaScript 中迭代數(shù)組的最重要和最廣泛使用的方法。該方法的filter()
工作方式非常簡單。它需要根據(jù)某些條件/偏好從更大的項目集合(超集)中過濾出一個或多個項目(子集)。
我們每天都這樣做,無論是閱讀、選擇朋友或配偶、選擇看什么電影等等。
JavaScriptArray.filter()方法
該filter()
方法接受一個回調(diào)函數(shù),并為它在目標(biāo)數(shù)組內(nèi)迭代的每個項目調(diào)用該函數(shù)?;卣{(diào)函數(shù)可以接受以下參數(shù):
- ?
currentItem
?:這是當(dāng)前正在迭代的數(shù)組中的元素。 - ?
index
?: 這是?currentItem
?數(shù)組內(nèi)部的索引位置。 - ?
array
?:這表示目標(biāo)數(shù)組及其所有項目。
filter 方法創(chuàng)建一個新數(shù)組并返回所有滿足回調(diào)中指定條件的項目。
如何在 JavaScript 中使用filter()方法
在以下示例中,我將演示如何從 JavaScript 中的數(shù)組中過濾項目中使用filter()
方法。
filter()
示例 1:如何從數(shù)組中過濾項目
在這個例子中,我們過濾掉每個蹣跚學(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ù)特定屬性過濾項目
在這個例子中,我們將只過濾掉開發(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:如何使用數(shù)組參數(shù)
第三個參數(shù)(數(shù)組)最常見的用途之一是檢查正在迭代的數(shù)組的狀態(tài)。例如,我們可以檢查數(shù)組中是否還有其他項。根據(jù)結(jié)果??,我們可以指定不同的事情應(yīng)該發(fā)生。
在這個例子中,我們將定義一個包含四個人的數(shù)組。但是,由于只能有三個獲勝者,因此列表中的第四個人將不得不打折。
為了能夠做到這一點,我們需要在每次迭代中獲取有關(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."
*/
如何使用上下文對象
除了回調(diào)函數(shù)之外,該filter()
方法還可以接收上下文對象。
filter(callbackfn, contextobj)
然后可以使用this
關(guān)鍵字引用從回調(diào)函數(shù)內(nèi)部引用此對象。
示例 5:如何訪問上下文對象 this
這將類似于example 1
. 我們將過濾掉所有年齡在 13 到 19 歲之間的人(青少年)。
但是,我們不會對回調(diào)函數(shù)內(nèi)部的值進行硬編碼。相反,我們將這些值 13 和 19 定義為range
對象內(nèi)部的屬性,隨后我們將其filter
作為上下文對象(第二個參數(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
對象作為第二個參數(shù)傳遞給filter()
。那時,它成為了我們的上下文對象。因此,我們能夠分別使用this.upper
和this.lower
引用訪問回調(diào)函數(shù)中的上限和下限。
總結(jié)
filter()
陣列法過濾出項目(S)匹配回調(diào)表達并返回它們哪個。除了回調(diào)函數(shù)之外,該filter
方法還可以將上下文對象作為第二個參數(shù)。這將讓你能夠使用this
.
我希望你從這篇文章中得到一些有用的東西。