原文： How to Filter an Array in JavaScript – JS Filtering for Arrays and Objects
在创建一个动态交互项目时，你需要添加一些交互的特性。比如说，当用户点击按钮时会过滤一个长数组。
你也可能需要操作一个大数组，要求其只返回符合特定条件的元素。
在这篇文章中，你将会学习在 JavaScript 中过滤数组的两种主要方法。你也会学到如何过滤对象中的数组，并且返回一个过滤后的新数组。
如何通过for 循环过滤数组
在 2015 年 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方法过滤数组
filter() 方法是一个 ES6 方法，其提供了更干净的语法去过滤数组。它返回了一个新的数组，而且也并没有更改原数组。
// Syntax
myArray.filter(callbackFn)
在 callback 函数中，你可以访问每一个元素，元素的 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 Array.filter() 教程了解更多关于 JavaScript filter 方法，并且你也能了解在 JavaScript 中 find() 和 filter() 方法的区别。
在 JavaScript 中如何过滤一个对象
JavaScript 中的对象不像数组和字符串一样可迭代（你不能遍历它们）。这意味着你不能直接对一个对象使用 filter()、for 循环方法或者任何遍历方法。那么该如何在 JavaScript 中过滤一个对象呢？
你可以通过使用对象的静态方法，如 object .keys() ， Object.values() 或 Object.entries()，将对象转换为数组来实现这一点。然后可以使用 filter()方法对数组进行筛选，并返回一个由筛选过的元素组成的新数组。
假设有一个对象保存用户的详细信息，如姓名、年龄和职业。这些对象静态方法可以以数组的形式返回键、值或每个键-值对。
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 中的数组过滤提供了更好的语法。
你还学习了如何通过将对象转换为数组并使用 filter()方法在 JavaScript 中筛选对象。
感谢阅读，happy coding!
你可以通过访问我的网站访问我的 188 篇文章。你还可以通过搜索去浏览我特定的文章。