JavaScript 中的数组过滤

在构建动态和交互式程序时，您可能需要添加一些交互式功能。例如，用户单击按钮以筛选一长串项目。

您可能还需要处理大量数据，以仅返回与指定条件匹配的项目。

在本文中，您将学习如何使用两种主要方法在 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: "[e-mail]",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: "[e-mail]",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() 方法来过滤对象。

感谢您的阅读！实际中还有许多其他的用法，等待你探索！