wordpress网站发布时间,外贸网站外贸网站建设行吗,网站开发团队工作总结,微商城运营的主要工作在构建动态和交互式程序时#xff0c;您可能需要添加一些交互式功能。例如#xff0c;用户单击按钮以筛选一长串项目。
您可能还需要处理大量数据#xff0c;以仅返回与指定条件匹配的项目。
在本文中#xff0c;您将学习如何使用两种主要方法在 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; iusers.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.danielsexample.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.danielsexample.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() 方法来过滤对象。
感谢您的阅读实际中还有许多其他的用法等待你探索
