在構建動態(tài)和交互式程序時，您可能需要添加一些交互式功能。例如，用戶單擊按鈕以篩選一長串項目。

您可能還需要處理大量數(shù)據(jù)，以僅返回與指定條件匹配的項目。

在本文中，您將學習如何使用兩種主要方法在 JavaScript 中過濾數(shù)組。您還將學習如何過濾對象數(shù)組并返回過濾元素的新數(shù)組。

使用for loop過濾

推出 ES6 之前，許多開發(fā)人員依靠 for 循環(huán)方法來處理幾乎所有的數(shù)組操作。但是代碼可能會變得很長并且不容易理解，這導致了許多單獨的 JavaScript 方法的發(fā)布，例如filter()該方法（您很快就會了解）。

但首先，為了完整起見，我們將看看如何使用 for 循環(huán)來做到這一點。

假設您有一個對象數(shù)組，其中包含用戶的詳細信息，例如姓名、年齡和職業(yè)。您可以決定篩選年齡與特定條件匹配的用戶。

let users = [{ name: 'John', age: 25, occupation: 'gardener' },{ name: 'Lenny', age: 51, occupation: 'programmer' },{ name: 'Andrew', age: 43, occupation: 'teacher' },{ name: 'Peter', age: 81, occupation: 'teacher' },{ name: 'Anna', age: 47, occupation: 'programmer' },{ name: 'Albert', age: 76, occupation: 'programmer' },
]

現(xiàn)在，您可以使用年齡過濾對象數(shù)組，以返回一個age大于40且occupation等于programmer：

let filteredUsers = [];
for (let i= 0; i<users.length; i++) {if (users[i].age > 40 && users[i].occupation === 'programmer' ) {filteredUsers = [...filteredUsers, users[i]];}
}
console.log(filteredUsers);

這將返回一個包含三個滿足指定條件的用戶的數(shù)組。

完美輸出。但是過濾數(shù)組的更好方法是使用 ES6 filter() 方法。

如何使用filter()方法篩選數(shù)組

該方法是一種 ES6 方法，它提供了一種更簡潔的語法來篩選數(shù)組。它返回新數(shù)組中的新元素，而不更改原始數(shù)組。filter()

// Syntax
myArray.filter(callbackFn)

在回調函數(shù)中，您可以訪問每個元素、 和原始數(shù)組本身：index

myArray.filter((element, index, array) => { /* ... */ })

現(xiàn)在，讓我們執(zhí)行相同的示例，通過按用戶的age和occupation過濾用戶：

let filteredUsers = users.filter((user) => {return user.age > 40 && user.occupation === 'programmer';
});console.log(filteredUsers);

這將返回確切的輸出，但您會注意到您的代碼非常干凈。同樣重要的是要知道，你可以用一行代碼重寫上面的代碼，并去掉return語句：

let filteredUsers = users.filter(user => user.age > 40 && user.occupation === 'programmer');
console.log(filteredUsers);

兩個代碼塊都將輸出過濾后的用戶：

filter 方法可以很容易地直接執(zhí)行更多操作，而無需創(chuàng)建盡可能多的變量，因為它非常適合與其他函數(shù)方法鏈接。

例如，您可以對過濾后的數(shù)組進行排序，并返回僅包含其名稱的數(shù)組：

let filteredUserNames = users.filter(user => user.age > 40 && user.occupation === 'programmer').sort((a, b) => a.age - b.age).map(user => user.name);console.log(filteredUserNames); // ['Anna', 'Lenny', 'Albert'

使用 JavaScript filter()?方法在 JavaScript 中過濾數(shù)組還有更多功能。

如何在 JavaScript 中過濾對象

JavaScript 的對象不像數(shù)組或字符串那樣可迭代（你不能遍歷它們）。這意味著您不能直接在對象上使用 for 循環(huán)方法或任何迭代方法。那么如何在 JavaScript 中過濾對象呢？filter()

為此，可以使用任何對象靜態(tài)方法（如Object.keys() 或 Object.values()）將對象轉換為數(shù)組。然后，您可以使用 filter()?方法過濾數(shù)組并返回過濾元素的新數(shù)組。???????Object.entries()

假設您有一個對象，其中包含用戶的詳細信息，例如姓名、年齡和職業(yè)。這些對象靜態(tài)方法可以將鍵、值或每個鍵值對作為數(shù)組返回。

const userDetails = {firstName: "Jane",lastName: "Daniels",userName: "jane.daniels",email: "jane.daniels@example.com",comapny: "Example Inc.",address: "1234 Example Street",age : 25,hobby: "Singing"
};let keysArray = Object.keys(userDetails);console.log(keysArray);

這將返回一個對象鍵數(shù)組：

['firstName', 'lastName', 'userName', 'email', 'comapny', 'address', 'age', 'hobby']

您現(xiàn)在可以使用 filter()?方法過濾數(shù)組并返回一個新的過濾元素數(shù)組：

let filteredKeys = keysArray.filter(key => key.length > 5);console.log(filteredKeys);

這將返回一個長度大于 5 的鍵數(shù)組：

['firstName', 'lastName', 'userName', 'comapny', 'address', 'hobby']

但可以肯定的是，您將需要執(zhí)行更有用的過濾器操作。例如reduce()，您可以篩選包含大型對象名稱的對象鍵值對。然后，您可以首先獲取鍵，篩選它們，并使用該方法將篩選的鍵添加到具有篩選鍵及其值的對象：???????

const userDetails = {firstName: "Jane",lastName: "Daniels",userName: "jane.daniels",email: "jane.daniels@example.com",comapny: "Example Inc.",address: "1234 Example Street",age : 25,hobby: "Singing"
};const userNames = Object.keys(userDetails).filter((key) => key.includes("Name")).reduce((object, key) => {return Object.assign(object, {[key]: userDetails[key]});}, {});console.log(userNames);

這將返回一個對象，其中包含篩選的鍵及其值：

{firstName: "Jane",lastName: "Daniels",userName: "jane.daniels"
}

結束語

在本文中，您學習了如何使用for循環(huán)和filter()方法在 JavaScript 中過濾數(shù)組。 ??????????????filter()為在 JavaScript 中過濾數(shù)組提供了更好的語法。

您還學習了如何在 JavaScript 中通過將對象轉換為數(shù)組并使用 filter() 方法來過濾對象。

感謝您的閱讀！實際中還有許多其他的用法，等待你探索！