js中filter,map,forEach,indexOf的用法和区别详解

2024-04-07 19:20

本文主要是介绍js中filter,map,forEach,indexOf的用法和区别详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在JavaScript中,filter(), map(), forEach(), 和 indexOf() 是数组对象常用的方法,它们各自具有特定的用途。以下是关于这些方法的详细解释和它们之间的区别:

1. filter()

filter() 方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

用法

let newArray = arr.filter(function(currentValue, index, arr) {// 返回 true 或 false
});

或者,使用箭头函数:

let newArray = arr.filter(currentValue => {// 返回 true 或 false
});

示例

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4, 6]

2. map()

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

用法

let newArray = arr.map(function(currentValue, index, arr) {// 返回一个新值
});

或者,使用箭头函数:

let newArray = arr.map(currentValue => {// 返回一个新值
});

示例

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6]

3. forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。

用法

arr.forEach(function(currentValue, index, arr) {// 执行某些操作
});

或者,使用箭头函数:

arr.forEach(currentValue => {// 执行某些操作
});

示例

let numbers = [1, 2, 3];
numbers.forEach(num => console.log(num)); // 输出: 1, 2, 3

4. indexOf()

indexOf() 方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1。

用法

let index = arr.indexOf(searchElement[, fromIndex]);

示例

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let index = numbers.indexOf(4); // 输出: 3
let fromIndexIndex = numbers.indexOf(4, 4); // 输出: 5
let notFoundIndex = numbers.indexOf(6); // 输出: -1

区别

  • 返回值filter()map() 返回一个新数组;forEach() 没有返回值(它主要用于执行某些操作,而不是生成新数组);indexOf() 返回元素的索引或-1(如果元素不存在)。
  • 用途filter() 用于筛选数组中的元素;map() 用于转换数组中的每个元素;forEach() 用于遍历数组并执行操作;indexOf() 用于查找数组中元素的索引。
  • 链式调用:由于 filter(), map(), 和 forEach() 都返回数组,因此它们可以链式调用其他数组方法。而 indexOf() 返回一个数字,因此不能链式调用其他数组方法。

希望这些解释和示例能帮助您更好地理解JavaScript中这些方法的用法和区别!

这篇关于js中filter,map,forEach,indexOf的用法和区别详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/883452

相关文章

MyBatis中$与#的区别解析

《MyBatis中$与#的区别解析》文章浏览阅读314次,点赞4次,收藏6次。MyBatis使用#{}作为参数占位符时,会创建预处理语句(PreparedStatement),并将参数值作为预处理语句... 目录一、介绍二、sql注入风险实例一、介绍#(井号):MyBATis使用#{}作为参数占位符时,会

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

Spring Boot spring-boot-maven-plugin 参数配置详解(最新推荐)

《SpringBootspring-boot-maven-plugin参数配置详解(最新推荐)》文章介绍了SpringBootMaven插件的5个核心目标(repackage、run、start... 目录一 spring-boot-maven-plugin 插件的5个Goals二 应用场景1 重新打包应用

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Linux系统性能检测命令详解

《Linux系统性能检测命令详解》本文介绍了Linux系统常用的监控命令(如top、vmstat、iostat、htop等)及其参数功能,涵盖进程状态、内存使用、磁盘I/O、系统负载等多维度资源监控,... 目录toppsuptimevmstatIOStatiotopslabtophtopdstatnmon

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件