JS中filter()方法的使用

devtools/2024/11/9 16:45:56/

在JavaScript中,filter() 方法是一个数组方法,它创建一个新数组,其包含通过所提供函数实现的测试的所有元素。换句话说,filter() 方法遍历数组,对数组中的每个元素执行一个测试(由提供的函数实现),并返回一个新数组,该数组包含所有通过测试的元素。

filter() 方法不会改变原数组,而是返回一个新数组。

语法

 

javascript复制代码

const newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
  • callback:用来测试每个元素的函数。它接收三个参数:
    • element:当前遍历到的元素。
    • index(可选):当前遍历到的索引(如果提供了)。
    • array(可选):正在操作的数组(如果提供了)。
  • thisArg(可选):执行 callback 时用作 this 的值。

示例

过滤出数组中的所有偶数
 

javascript复制代码

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // 输出: [2, 4, 6]
使用箭头函数简化
 

javascript复制代码

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4, 6]
过滤出对象数组中满足条件的对象
 

javascript复制代码

const products = [
{ name: 'Apple', category: 'fruit' },
{ name: 'Carrot', category: 'vegetable' },
{ name: 'Banana', category: 'fruit' }
];
const fruits = products.filter(product => product.category === 'fruit');
console.log(fruits);
// 输出: [{ name: 'Apple', category: 'fruit' }, { name: 'Banana', category: 'fruit' }]

注意事项

  • filter() 方法不会改变原数组。
  • 如果没有元素通过测试,则返回一个空数组。
  • 回调函数 callback 只会被那些已经被赋值的索引调用;对于那些已经被删除或者从未被赋值的索引,不会调用 callback
  • 回调函数 callback 可以被设置为 null,此时,将返回一个新数组,包含所有原数组中的元素(等同于不调用 filter() 方法)。然而,通常不会这样使用。

http://www.ppmy.cn/devtools/108084.html

相关文章

win11下wsl使用开发pg拓展并安装到docker全程记录

折腾了大半天,记录下rust开发pg拓展并安装到生产docker全程: 使用pgrx开发过程省略,注意和生产pg版本对上,我的是pg14 开发的终点是cargo pgrx package ,我的项目叫first,那么项目目录下 /target/release/first-pg14/usr/share/postgresql/14/extension/ 会生成一个sql和一个c…

实现多云对象存储支持:Go 语言实践

实现多云对象存储支持:Go 语言实践 在现代云原生应用开发中,对象存储已成为不可或缺的组件。然而,不同的云服务提供商有各自的对象存储服务和 SDK。本文将介绍如何在 Go 语言中实现一个灵活的对象存储系统,支持多个主流云服务提供…

Linux:如何使用 Crontab

今天想了解一下Linux Crontab。嗯,在Windows上,可以看做和定时任务差不多。 “要在特定时间进行特定工作。” 如果是这样,可以使用crontab,轻松使用Linux。 1. 基本 (crontab basic) 先看一下基本的crontab使用方法吧。在Linu…

1306. 跳跃游戏 III

1. 题目 见1306. 跳跃游戏 III 2. 解题思路 这题和跳跃游戏1不太一样,这题不是看能不能达到尾部,而是看能不能达到指定的位置。 我们分析下来就是从一个位置出发,有没有达到某一个目标的路径。 那其实就可以符合DFS的解法,求可…

Selenium分布式测试和操作监听

前言 在使用selenium进行自动化测试时,测试过程中会不断的打开关闭浏览器,测试时需要单独使用一台设备进行测试。还有就是一台设备的执行效果也不是很高,针对这些问题,来介绍一下Selenium Grid的使用方法。本篇文章介绍使用docke…

【一嗨租车-注册安全分析报告-滑动验证加载不正常导致安全隐患】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞…

HybridRAG:VectorRAG+GraphRAG在时序向量图谱数据库AbutionGraph中的一体化实现(LLM-RAG最新技术方案)

AbutionGraph-时序/向量/图谱数据库的一体化GraphRAG实现方案介绍,利用图向量&向量图谱存储,可以轻松地保存向量和文本/摘要并自动完成合并更新,实现一键相似度检索知识库,简化HybridRAG(VectorRAGGraphRAG&#x…

【项目一】基于pytest的自动化测试框架day1

day1不涉及编写代码,只简单梳理接口测试相关的概念。 day1接口测试的本质:功能测试的一部分测试用例的设计与实现接口调试与自动化:从postman到持续集成补充概念 day1 接口测试的本质:功能测试的一部分 接口测试是功能测试的一部…