在构建动态和交互式程序时，您可能需要添加一些交互式功能。例如，用户单击按钮以筛选一长串项目。
您可能还需要处理大量数据，以仅返回与指定条件匹配的项目。
在本文中，您将学习如何使用两种主要方法在 JavaScript 中过滤数组。您还将学习如何过滤对象数组并返回过滤元素的新数组。
使用for loop过滤
推出 ES6 之前，许多开发人员依靠 for 循环方法来处理几乎所有的数组操作。但是代码可能会变得很长并且不容易理解，这导致了许多单独的 JavaScript 方法的发布，例如filter()该方法（您很快就会了解）。
但首先，为了完整起见，我们将看看如何使用 for 循环来做到这一点。
假设您有一个对象数组，其中包含用户的详细信息，例如姓名、年龄和职业。您可以决定筛选年龄与特定条件匹配的用户。
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' },
]现在，您可以使用年龄过滤对象数组，以返回一个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);这将返回一个包含三个满足指定条件的用户的数组。
完美输出。但是过滤数组的更好方法是使用 ES6 filter() 方法。
如何使用filter()方法筛选数组
该方法是一种 ES6 方法，它提供了一种更简洁的语法来筛选数组。它返回新数组中的新元素，而不更改原始数组。filter()
// Syntax
myArray.filter(callbackFn)在回调函数中，您可以访问每个元素、 和原始数组本身：index
myArray.filter((element, index, array) => { /* ... */ })现在，让我们执行相同的示例，通过按用户的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 方法可以很容易地直接执行更多操作，而无需创建尽可能多的变量，因为它非常适合与其他函数方法链接。
例如，您可以对过滤后的数组进行排序，并返回仅包含其名称的数组：
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 中过滤数组还有更多功能。
如何在 JavaScript 中过滤对象
JavaScript 的对象不像数组或字符串那样可迭代（你不能遍历它们）。这意味着您不能直接在对象上使用 for 循环方法或任何迭代方法。那么如何在 JavaScript 中过滤对象呢？filter()
为此，可以使用任何对象静态方法（如Object.keys() 或 Object.values()）将对象转换为数组。然后，您可以使用 filter() 方法过滤数组并返回过滤元素的新数组。Object.entries()
假设您有一个对象，其中包含用户的详细信息，例如姓名、年龄和职业。这些对象静态方法可以将键、值或每个键值对作为数组返回。
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);这将返回一个对象键数组：
['firstName', 'lastName', 'userName', 'email', 'comapny', 'address', 'age', 'hobby']您现在可以使用 filter() 方法过滤数组并返回一个新的过滤元素数组：
let filteredKeys = keysArray.filter(key => key.length > 5);
console.log(filteredKeys);这将返回一个长度大于 5 的键数组：
['firstName', 'lastName', 'userName', 'comapny', 'address', 'hobby']
但可以肯定的是，您将需要执行更有用的过滤器操作。例如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循环和filter()方法在 JavaScript 中过滤数组。 filter()为在 JavaScript 中过滤数组提供了更好的语法。
您还学习了如何在 JavaScript 中通过将对象转换为数组并使用 filter() 方法来过滤对象。
感谢您的阅读！实际中还有许多其他的用法，等待你探索！
