在构建动态和交互式程序时,您可能需要添加一些交互式功能。例如,用户单击按钮以筛选一长串项目。
您可能还需要处理大量数据,以仅返回与指定条件匹配的项目。
在本文中,您将学习如何使用两种主要方法在 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() 方法来过滤对象。
感谢您的阅读!实际中还有许多其他的用法,等待你探索!