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},
// ];
复制代码


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

目录
相关文章
|
3天前
|
监控 安全 网络安全
深入解析PDCERF:网络安全应急响应的六阶段方法
PDCERF是网络安全应急响应的六阶段方法,涵盖准备、检测、抑制、根除、恢复和跟进。本文详细解析各阶段目标与操作步骤,并附图例,助读者理解与应用,提升组织应对安全事件的能力。
109 89
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
安全 Ubuntu Shell
深入解析 vsftpd 2.3.4 的笑脸漏洞及其检测方法
本文详细解析了 vsftpd 2.3.4 版本中的“笑脸漏洞”,该漏洞允许攻击者通过特定用户名和密码触发后门,获取远程代码执行权限。文章提供了漏洞概述、影响范围及一个 Python 脚本,用于检测目标服务器是否受此漏洞影响。通过连接至目标服务器并尝试登录特定用户名,脚本能够判断服务器是否存在该漏洞,并给出相应的警告信息。
176 84
|
17天前
|
数据可视化 项目管理
个人和团队都好用的年度复盘工具:看板与KPT方法解析
本文带你了解高效方法KPT复盘法(Keep、Problem、Try),结合看板工具,帮助你理清头绪,快速完成年度复盘。
73 7
个人和团队都好用的年度复盘工具:看板与KPT方法解析
|
1天前
|
人工智能 监控 数据可视化
提升开发效率:看板方法的全面解析
随着软件开发复杂度提升,并行开发模式下面临资源分配不均、信息传递延迟及缺乏全局视图等瓶颈问题。看板工具通过任务状态实时可视化、流量效率监控和任务依赖管理,帮助团队直观展示和解决这些瓶颈。未来,结合AI预测和自动化优化,看板工具将更高效地支持并行开发,成为驱动协作与创新的核心支柱。
|
14天前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
41 13
|
2月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
191 52
|
1月前
|
存储 Java 开发者
浅析JVM方法解析、创建和链接
上一篇文章《你知道Java类是如何被加载的吗?》分析了HotSpot是如何加载Java类的,本文再来分析下Hotspot又是如何解析、创建和链接类方法的。
|
2月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。

推荐镜像

更多