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: "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() 方法来过滤对象。

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