JS:filter()方法解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: JS:filter()方法解析

filter() 方法会创建了一个新的数组,其中包含了旧数组中所有通过某个测试的元素,该方法是以函数形式提供的。


让我们来看看语法:


let new = array.filter((v, i, a) => {
    // 如果满足条件,元素会返回给new
    // 如果不满足条件则跳过该元素
});
// new - 新建的数组
// array - 被过滤的数组
// v - 当前被处理的值,也就是value
// i - 当前被处理值的索引,也就是index
// a - 原始数组,也就是array
复制代码


可以认为 filter() 方法是一个循环,专门用于过滤数组中的某些值。

请看下面的例子:


let nums = [11, 12, 13, 14, 15, 16];
let evenNums = [];
for(var i = 0; i < nums.length; i++) {
    if (nums[i] % 2 === 0) evenNums.push(nums[i]);
}
// evenNums = [12,14,16]
复制代码

这段代码测试了nums数组中所有的值,只有偶数值被接受并push到了evenNums数组中。


虽然这样写是可以的,但有一个更简单的方法来实现同样的结果。

我们使用 filter() 方法重写前面的函数:


let nums = [11,12,13,14,15,16];
let evenNums = nums.filter(value => value % 2 === 0); 
// evenNums = [12,14,16]
复制代码

看,没有任何循环。


我们可以用一个干净漂亮的函数来创建同样的数组。因为我们只用数组中的值value,所以只把值传递给 filter() 方法就可以了。


现在我们看一个更加复杂的例子——一个对象数组,下面是我们需要使用的数据:


let data = [ 
    { 
        country: 'Netherlands',
        population: 17122267,  
    },
    {  
        country: 'Germany' , 
        population: 83694772, 
    },
    {  
        country: 'United Kingdom',
        population: 67767045, 
    },  
    {
        country: 'Belgium' , 
        population: 11572813, 
    }
];
复制代码


So now what?


我们想要创建一个新的数组,其中只包含人口小于5000万的国家,我们需要测试数据并返回正确的数据,那些 data.population 小于5000万的国家的数据。


let smallCountries = data.filter(v => v.population > 50000000);
复制代码


只需要这一行代码就能确保小人口的国家进入我们的新数组。

尽管我们的数据更加复杂,但是过滤的过程相对没有变化。

在运行过我们的过滤函数后,我们得到了这个:


// smallCountries = [
// {country: "Netherlands", population: 17122267},
// {country: "Belgium", population: 11572813},
// ];
复制代码


就到这里了,感谢你的阅读!

目录
相关文章
|
8天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
5天前
|
人工智能
歌词结构的巧妙安排:写歌词的方法与技巧解析,妙笔生词AI智能写歌词软件
歌词创作是一门艺术,关键在于巧妙的结构安排。开头需迅速吸引听众,主体部分要坚实且富有逻辑,结尾则应留下深刻印象。《妙笔生词智能写歌词软件》提供多种 AI 功能,帮助创作者找到灵感,优化歌词结构,写出打动人心的作品。
|
7天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
11天前
|
存储 算法 Java
解析HashSet的工作原理,揭示Set如何利用哈希算法和equals()方法确保元素唯一性,并通过示例代码展示了其“无重复”特性的具体应用
在Java中,Set接口以其独特的“无重复”特性脱颖而出。本文通过解析HashSet的工作原理,揭示Set如何利用哈希算法和equals()方法确保元素唯一性,并通过示例代码展示了其“无重复”特性的具体应用。
30 3
|
6天前
|
人工智能
写歌词的技巧和方法全解析:开启你的音乐创作之旅,妙笔生词智能写歌词软件
怀揣音乐梦想,渴望用歌词抒发情感?掌握关键技巧,你也能踏上创作之旅。灵感来自生活点滴,主题明确,语言简洁,韵律和谐。借助“妙笔生词智能写歌词软件”,AI辅助创作,轻松写出动人歌词,实现音乐梦想。
|
4天前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
84 59
|
4天前
|
搜索推荐 Java Spring
Spring Filter深度解析
【10月更文挑战第21天】Spring Filter 是 Spring 框架中非常重要的一部分,它为请求处理提供了灵活的控制和扩展机制。通过合理配置和使用 Filter,可以实现各种个性化的功能,提升应用的安全性、可靠性和性能。还可以结合具体的代码示例和实际应用案例,进一步深入探讨 Spring Filter 的具体应用和优化技巧,使对它的理解更加全面和深入。
|
5天前
|
安全 Java
Java多线程通信新解:本文通过生产者-消费者模型案例,深入解析wait()、notify()、notifyAll()方法的实用技巧
【10月更文挑战第20天】Java多线程通信新解:本文通过生产者-消费者模型案例,深入解析wait()、notify()、notifyAll()方法的实用技巧,包括避免在循环外调用wait()、优先使用notifyAll()、确保线程安全及处理InterruptedException等,帮助读者更好地掌握这些方法的应用。
8 1
|
11天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
12天前
|
存储 JavaScript 前端开发
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
54 2

推荐镜像

更多