JavaScript中数组高阶函数的使用

news2024/9/20 14:45:57

一.数组高阶函数---forEach

它可以用来遍历数组中的每个元素,并对每个元素执行指定的操作。forEach函数接受一个回调函数作为参数,该回调函数在遍历数组的每个元素时被调用。

forEach函数的基本语法

array.forEach(callback(currentValue, index, array), thisArg);

参数说明:

  • callback:必需。表示要对每个元素执行的回调函数。
  • currentValue:必需。表示当前正在处理的元素的值。
  • index:可选。表示当前正在处理的元素的索引。
  • array:可选。表示正在遍历的数组。
  • thisArg:可选。表示在执行回调函数时要使用的this值。

演示

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

 结果

 

我们定义了一个数组numbers,然后使用forEach函数遍历该数组。回调函数接收一个参数number,代表数组中的每个元素,然后我们在回调函数中使用console.log打印每个元素的值。

除了打印元素,你还可以在回调函数中执行其他操作,例如修改元素的值、累加计算等等。forEach函数对数组中的每个元素依次执行回调函数,但并不返回新的数组。如果你需要对每个元素进行转换或筛选操作,并返回新的数组,可以考虑使用mapfilter函数。

 

 二.数组高阶函数---map

map是一个用于数组的高阶函数,它可以对数组中的每个元素执行指定的操作,并返回一个新的数组,新数组的元素是操作的结果。

map函数的基本语法

array.map(callback(currentValue, index, array), thisArg);

参数说明:

  • callback:必需。表示要对每个元素执行的回调函数。
  • currentValue:必需。表示当前正在处理的元素的值。
  • index:可选。表示当前正在处理的元素的索引。
  • array:可选。表示正在遍历的数组。
  • thisArg:可选。表示在执行回调函数时要使用的this值。

 演示

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers);

结果

 

我们定义了一个数组numbers,然后使用map函数遍历该数组。回调函数接收一个参数number,代表数组中的每个元素,并将每个元素乘以2作为回调函数的返回值。最后,我们将返回的新数组赋值给doubledNumbers并打印出来。

map函数遍历数组中的每个元素,并将每个元素传递给回调函数,然后将回调函数的返回值存储在新数组中。该方法不会修改原始数组,而是返回一个新的数组,其中包含应用了回调函数的结果。

你可以根据需要在回调函数中执行各种操作,例如对元素进行转换、筛选、提取特定属性等等。

 

三.数组高阶函数---filter

filter是一个用于数组的高阶函数,它可以根据指定的条件筛选出数组中符合条件的元素,并返回一个新的数组。

基本语法

array.filter(callback(currentValue, index, array), thisArg);

参数说明:

  • callback:必需。表示要对每个元素执行的回调函数,用于判断元素是否符合条件。
  • currentValue:必需。表示当前正在处理的元素的值。
  • index:可选。表示当前正在处理的元素的索引。
  • array:可选。表示正在遍历的数组。
  • thisArg:可选。表示在执行回调函数时要使用的this值。

 演示

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);

结果

 

我们定义了一个数组numbers,然后使用filter函数遍历该数组。回调函数接收一个参数number,代表数组中的每个元素,并使用条件number % 2 === 0来判断元素是否为偶数。只有符合条件的元素才会被保留在新数组中。最后,我们将返回的新数组赋值给evenNumbers并打印出来。

filter函数遍历数组中的每个元素,并将每个元素传递给回调函数,根据回调函数的返回值来决定是否保留该元素。返回的新数组包含满足条件的元素,而不包含不满足条件的元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/691068.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java操作influxdb时,出现HTTP status code: 401; Message: unauthorized access

使用java操作influxdb出现HTTP status code: 401; Message: unauthorized access 在这里插入图片描述之前创建客户端是这样的 然后关闭客户端连接 后来我尝试吧influxDB null去掉,每次都创建新的连接 然后就行了哦,咱也不知道为啥,反正就…

Web概述

1.1 程序开发架构 1.1.1C/S体系结构介绍 C/S是Client/Server的缩写,即客户端/服务器结构。在这种结构中,服务器 通常采用高性能的机或工作站,并采用大型数据库系统(如Oracle或SQLServer)客户端 则需要安装专用的客户…

深入浅出设计模式 - 代理模式

博主介绍: ✌博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家✌ Java知识图谱点击链接:体系化学习Java(Java面试专题) 💕💕 感兴趣的同学可以收…

qt中c++获取图片qml实时显示的方式1——继承QQuickPaintedItem

通过c opencv获取rtsp视频流,或者视频源,在qml上进行实时视频显示。 一、在QML中通过QQuickPaintedItem动态加载图片 在QML中,可以使用QQuickPaintedItem来创建自定义的可绘制项。通过继承QQuickPaintedItem类,我们可以在QML中动…

这些面试攻略给你2023测试面试带来最强力的支持

在boss和拉钩上投了有几十份简历,其中70%未读状态,30%已读,已读的一半回复要求发送附件简历,然后这周接到面试的有七、八家公司,所以,当前这个大环境真的难 这半个月来,每天安排三到四场面试&a…

自学黑客(网络安全),一般人我劝你还是算了吧(自学网络安全学习路线--第八章 恶意软件概念及防范)【建议收藏】

文章目录 一、自学网络安全学习的误区和陷阱二、学习网络安全的一些前期准备三、自学网络安全学习路线一、恶意软件分类1、分类依据2、获取远程控制权类3、维持远程控制权类4、完成特定业务逻辑类 二、恶意软件运行症状1、查看网络连接2、查看系统进程3、查看隐藏文件 三、恶意…

PACS/RIS医学影像管理系统源码 提供先进图像处理和算法

PACS(医学影像存档与通信系统)主要应用于医学影像的存储、传输和显示。它可以使医生突破胶片的局限,对病人的影像进行全方位的处理和观察,以便得出更准确的诊断。同时,PACS可以节省大量的胶片,降低成本。医…

定积分与几何应用

定积分与几何应用 何谓定积分? ∫ a b f ( x ) d x \int_a^bf(x)dx ∫ab​f(x)dx需满足 a a a、 b b b有限(不是无穷)且 f ( x ) f(x) f(x)有界 定积分的计算主要依靠NL公式即牛顿莱布尼茨公式 定积分是否存在于原函数是否存在无关 定积分计…

骑士周游问题及优化

文章和代码已经归档至【Github仓库:https://github.com/timerring/java-tutorial 】或者公众号【AIShareLab】回复 java 也可获取。 文章目录 骑士周游问题算法优化意义经典算法面试题-骑士周游问题马踏棋盘算法介绍 骑士周游问题的解决步骤和思路分析 骑士周游问题…

什么是哈希表

哈希表 目录 哈希表哈希函数哈希碰撞拉链法线性探测法常见的三种哈希结构总结 首先什么是 哈希表,哈希表(英文名字为Hash table,国内也有一些算法书籍翻译为散列表,大家看到这两个名称知道都是指hash table就可以了)。…

Unity3D:Hierarchy 窗口

推荐:将 NSDT场景编辑器 加入你的3D工具链 3D工具集: NSDT简石数字孪生 Hierarchy 窗口 打开 Unity 新项目时的默认 Hierarchy 窗口视图 Hierarchy 窗口显示场景中的每个游戏对象,如模型、摄像机或预制件。 可以使用 Hierarchy 窗口对场景中…

Nginx | 苹果电脑Mac安装和验证Nginx服务过程记录

common wx:CodingTechWork,一起学习进步。 引言 本文主要总结如何在Mac电脑上进行Nginx服务的安装,重点讲解使用brew命令进行安装和验证的过程及问题记录。 安装步骤 安装过程记录 查看nginx信息 首先使用命令brew info nginx进行本机ng…

网络规划工具

对于各种规模的企业和组织来说,应对安全威胁和可靠的网络性能至关重要。战略性地投资有效的网络监控解决方案可以节省时间和成本,减少停机时间并提高员工的生产力,还可以让管理员专注于重要的事情。重要的是要了解,随着业务的增长…

JAVA大作业——网络在线对战游戏——坦克大战

目录 大作业要求 实机演示 主机环回地址布置连接演示 多人联机对战演示 WASD控制坦克移动和按J键发射炮弹攻击 攻击到敌人后会爆炸并且消灭敌人 按下C键设置IP主机连接 大作业要求 简单的小游戏 要求1:能够实现例如贪吃蛇、坦克大战、俄罗斯方块等小游戏&#x…

红帽:多云和AI时代,开放混合云是最优选择

随着云计算市场群雄割据的格局逐渐定型,混合多云的环境已经成为大势所趋。而近年来AI人工智能技术的高速发展,则进一步为技术创新注入了澎湃动力。 那么问题就来了:在这个多云和AI大行其道的时代,企业应该选择什么样的云平台&…

删除PDF页面的10个操作工具方法分享

PDF被广泛用于各种目的,包括共享学术文件、专业报告,甚至个人文件。然而,有时您可能会发现需要从PDF中删除一些页面。虽然有很多付费软件可供选择,但也有很多免费删除PDF页面的方法。在这篇文章中,我们将讨论10种免费删…

这所广东的985录取平均分387分,复录比高达3.5,单科线55分!

一、学校及专业介绍 中山大学(Sun Yat-sen University),简称“中大”,位于广东省,位列国家“双一流”、“985工程”、“211工程”,学校由广州、珠海、深圳三个校区,博士后科研流动站44个&#x…

CentOS7安装部署OpenVidu

1:安装Docker 参考:Centos7 安装 Docker_zzhongcy的博客-CSDN博客 2:安装OpenVidu 2.1、OpenVidu 简介 OpenVidu Server(openvidu-server):是openvidu平台的大脑,负责信号层。Kurento Media Server(kms)…

软件测试技能,JMeter压力测试教程,批量注册测试账号(计数器的使用)(十二)

一、前言 当我们jmeter压测的时候,需要准备一批测试账号,可以先批量注册一些用户,这些用户名称按固定格式 注册的用户不能重复并且需要自增,那么可以使用计数器来实现 二、添加注册请求 我想批量注册100个账号,账号…

【uniapp微信小程序footer】不满一屏固定显示在底部,超出一屏随页面滚动

<template><view class"wrapper"><view class"main">...</view><view class"footer">xx智慧农场</view></view > </template> <style>page {height: 100%;}.wrapper {height: 100%;}.ma…