JavaScript数组常见实例方法:forEach、filter、map、reduce、find、every等

博客背后的故事

其实我23年7月就学过这些数组方法了,但是为什么24年3月才做笔记呢?这就要讲一个小故事了(不想听故事的同学自行拖动滚动条)

24年年初我和两个队友合作开发一个小程序。JavaScript中数组的实例方法我已经学了很久了,基本上忘完了,所以需要对数组进行遍历操作的时候,我还是暴力for循环。但我队友却能如鱼得水地使用forEach、filter等方法,导致我为了看懂她的代码还需要去翻翻资料

所以我决定通过一篇博客来复习数组中的实例方法

有时候我会思考,我到底要不要在CSDN上做笔记?网课提供的配套资料已经很详细了,自己再去做笔记是不是有点多此一举?

但我现在觉得,做笔记不仅仅是为了巩固知识、方便以后复习,通过博客的形式我还可以和大家分享我学习过程中的趣事以及总结出的经验,这本身就给学习增加了乐趣。我今天看到我的一篇博客下面有这样一条评论:“但是今天,这件事情给我了我一个教训:AI不能全信,官方文档不能不看!”你这句话666表情包,我有点想笑。”看到这条评论我也忍不住笑了,觉得很有趣。每次打开CSDN看到有新增粉丝和新增收藏的时候,心里也会满满成就感

forEach遍历数组:不返回,用于不改变值,经常用于查找打印输出值

语法:

例子:

 

注意: 1. forEach 主要是遍历数组,而不是对数组元素进行操作

2. 参数当前数组元素是必须要写的, 索引号可

filter过滤数组:筛选数组元素,并生成新数组

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

主要使用场景: 筛选数组符合条件的元素,并返回筛选之后的新数组

语法:

例子:

注意:

返回值:返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

参数:currentValue 必须写, index 可选

因为返回新数组,所以不会影响原数组

map迭代数组:返回新数组,新数组里面的元素是处理之后的值,经常用于处理数据

使用场景: map 可以处理数据,并且返回新的数组

map 也称为映射。映射是个术语,指两个元素的集之间元素相互“对应”的关系

reduce累计器:返回函数累计处理的结果,经常用于求和等

语法:

参数: 起始值可以省略,如果写就作为第一次的累计值

累计值参数: 1. 如果有起始值,则以起始值为准开始累计, 第一次的累计值 = 起始值

2. 如果没有起始值, 则累计值以数组的第一个数组元素作为起始值开始累计

3. 后面每次遍历就会用后面的数组元素累计到累计值里面(类似求和里面的 sum )

例子1:求和运算

例子2:员工涨薪计算成本

 

 

注意:如果遍历的是数组对象,一定要写起始值。否则默认以第一个数组元素作为起始值,也就是说起始值是个对象!进行运算操作会出大问题的!

join:用于把数组中的所有元素转换一个字符串

语法:

参数: 数组元素是通过参数里面指定的分隔符进行分隔的。join()里填的参数传入什么,数组转换后的字符串就以什么为分割,例如join(','),则打印:pink老师,red老师,blue老师

join在JS中使用得比较多,但后面学了vue之后就基本用不上了,以下是join在JS中的一个使用场景

数组常见方法——其他方法

 实例方法 find 查找元素, 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined(重点)

例子: 

const arr = [{name: '小米',price: 1999},{name: '华为',price: 3999},]// 找华为这个对象,并且返回这个对象const huawei = arr.find(function (item) {return item.name === '华为'})

实例方法every 检测数组所有元素是否都符合指定条件,如果所有元素都通过检测返回 true,否则返回 false(重点)

例子:

const arr1 = [10, 20, 30]const flag = arr1.every(item => item >= 20)console.log(flag)

实例方法some 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true,否则返回 false

实例方法 concat 合并两个数组,返回生成新数组

实例方法 sort 对原数组单元值排序

实例方法 splice 删除或替换原数组单元

实例方法 reverse 反转数组

 实例方法 findIndex 查找元素的索引值

总结:数组方法之间的共性

以下是个人总结,如有错误欢迎指正

1、数组中大多数方法都会有这两个参数值:当前数组元素(常用item)、当前数组索引号(常用index),且数组元素必传,数组索引可传可不传

2、对数组进行操作的方法都不会改变原数组,而是以返回值的形式返回新数组

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

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

相关文章

Docker下Jenkins打包java项目并部署

docker 构建Jenkins sudo docker run --namezen_haslett --userjenkins --privilegedtrue --volume/home/cyf/server/jenkins/jenkins_home:/var/jenkins_home -v /usr/lib/jvm/java-17-openjdk-amd64:/usr/lib/jvm/java-17-openjdk-amd64 -v /usr/lib/maven/apache-mav…

VIM编译器的安装

文章目录 前言一、VIM软件安装二、遇到问题三、VIM使用1.文档创建命令touch2.VIM编译器输入模式3.VIM编译器指令模式3.VIM编译器底行模式4.VIM编译器使用小技巧 前言 💦 我们如果要在终端模式下进行文本编辑或者修改文件就可以使用 VIM 编辑器,VIM 编辑…

treeview控件的应用

1.分类 treeview控件的基本应用,可以用于商品分类、文件分类等等。 2.辅助决策 treeview可以组成决策树,用来帮助人们做选择。比如说今天中午吃什么菜? 如果我来选择的话,那就是:不吃辣-鲁菜-糖醋鲤鱼。 3.求解算…

AD1102 小封装的3.7V锂电池转干电池使用的充放电管理芯片 替代传统干电池、镍氢电池

AD1102是一款锂电池充放电管理专用芯片。充电工作时,可以为 3.7V锂电池进行充电,电流最高可配置 1A。放电工作时,采用开关频率1MHz同步降压转换器进行放电,放电电流可以达到 3A。内部集成欠压保护、短路保护、过温保 护功能。 …

二 centos 7.9 磁盘挂载

上一步 一 windso10 笔记本刷linux cent os7.9系统-CSDN博客 笔记本有两个盘,系统装在128G的系统盘上,现在把另外一个盘挂载出来使用 lsblk 发现磁盘已经分好了,直接挂载就好了,参考文章:Centos7.9 挂载硬盘_centos7.9挂载硬盘-CSDN博客 永久挂载 lsblk -f分区格式化 mkfs…

XUbuntu22.04之reboot关机无效, 定制重启和关机(二百二十)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

2024届 C++ 刷题 笔试强训 Day 01

选择题 01 以下for循环的执行次数是&#xff08;&#xff09; for(int x 0, y 0; (y 123) && (x < 4); x); A 是无限循环 B 循环次数不定 C 4次 D 3次 解题思路&#xff1a; 我们直接来看本道题中最关键的部分&#xff1a;(y 123) && (x < 4)。 (y…

漏洞挖掘 | 公益SRC上榜技巧

目录 1、寻找漏洞 2、挖掘漏洞 3、提交报告 4、上榜吉时 5、快速上分 6、小技巧&#xff1a;冲榜拿分制胜点-拉开人与人之间的差距 1、寻找漏洞 寻找漏洞的2种办法&#xff1a; 1)谷歌语法 注意&#xff1a;用谷歌语法找站的时候&#xff0c;要加点中文&#xff0c;不然搜…

STL之set容器代码详解

1 基础概念 所有元素都会在插入时自动被排序 本质&#xff1a; set/multiset属于关联式容器&#xff0c;底层结构是用二叉树实现。 set和multiset区别&#xff1a; set不允许容器中有重复的元素&#xff1b; multiset允许容器中有重复的元素 。 2 代码示例 Talk is chea…

Graphpad Prism10.2.1(395) 安装教程 (含Win/Mac版)

GraphPad Prism GraphPad Prism是一款非常专业强大的科研医学生物数据处理绘图软件&#xff0c;它可以将科学图形、综合曲线拟合&#xff08;非线性回归&#xff09;、可理解的统计数据、数据组织结合在一起&#xff0c;除了最基本的数据统计分析外&#xff0c;还能自动生成统…

基于51单片机 模拟简易自动自助售货机设计 智能售卖机系统

1、本设计基于STC89C51/52&#xff08;与AT89S51/52、AT89C51/52通用&#xff0c;可任选&#xff09;&#xff0c;拍的时候要备注&#xff0c;不备注默认发STC89C52RC2、使用单片机设计&#xff0c;设有8个按键&#xff0c;3个硬币模拟按键&#xff08;5元、1元、5角&#xff0…

Day31-计算机基础1

Day31-计算机基础1 1. 网络基础介绍1.1 什么是网络&#xff1f;1.2 为什么要有网络&#xff1f;1.3 运维人员需要学习哪些网络知识&#xff1f;1.4 按作用范围对网络分类 2.网络设备知识2.1 网络传输介质及传输信号2.2 网卡设备2.3 中继器&#xff08;RP repeater&#xff09;2…

JavaScript 实现飞机大战

文章目录 一些关键点概览&#xff1a;核心模块的具体实现示例&#xff1a;飞机类&#xff08;Plane&#xff09;的基本结构&#xff1a;子弹类&#xff08;Bullet&#xff09;的基本结构&#xff1a;敌机类&#xff08;Enemy&#xff09;的基本结构&#xff1a; 基于前面定义的…

SQL盲注-实战布尔盲注

环境&#xff1a;win10 靶场&#xff1a;sqli-labs-master 本实验仅供学习参考&#xff01;&#xff01;&#xff01; 1 布尔盲注 盲注就是在 SQL 注入过程中&#xff0c; SQL 语句执行后&#xff0c;查询到的数据不能 回显到前端页面。此时&#xff0c;我们需要利用一些方…

滤波器:工作原理和分类及应用领域?|深圳比创达电子EMC

滤波器在电子领域中扮演着重要的角色&#xff0c;用于处理信号、抑制噪声以及滤除干扰。本文将详细介绍滤波器的工作原理、分类以及在各个应用领域中的具体应用。 一、滤波器的定义和作用 滤波器是一种电子设备&#xff0c;用于选择性地通过或阻塞特定频率范围内的信号。其主…

iOS增量报告生成方案

一&#xff0c;iOS覆盖率报告生成逻辑 iOS覆盖率报告生成与Android有很大的不同&#xff0c;主要的生成逻辑如下&#xff1a; 1&#xff0c;将profraw文件&#xff0c;通过命令xcrun llvm-profdata merge -sparse转换成profdata; 2&#xff0c;再将profdata文件&#xff0c;通…

牛客论坛笔记~

文章目录 Redisspring整合redis实现点赞帖子的赞用户的赞 关注功能热帖排行redis存储验证码、登录凭证、用户信息 kafka阻塞队列kafka![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d35be55986344b548710985cd8ecbd87.png)触发事件处理事件 Redis高级网站数据统计…

如何使用 ArcGIS Pro 制作三维地形图

伴随硬件性能的提高和软件算法的优化&#xff0c;三维地图的应用场景会越来越多&#xff0c;这里为大家介绍一下在ArcGIS Pro怎么制作三维地形图&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的DEM和影像数据&#xff0c;除了DEM和影像数据…

java(框架) springboot-1 基础使用+mybaits使用

学习视频&#xff1a;b站黑马java教程 tomcat spring-boot工程内嵌了tomcat服务器 所有请求经过DispatcherServlet(实现servlet接口的类)(核心控制器/前端控制器)处理&#xff0c;再通过DispatcherServlet转发给各个controller。 最后通过DispatcherServlet给浏览器响应数据…

垃圾收集器底层算法

垃圾收集器底层算法 三色标记 在并发标记的过程中&#xff0c;因为标记期间应用线程还在继续跑&#xff0c;对象间的引用可能发生变化&#xff0c;多标和漏标的情况就有可能发生&#xff0c;这里我们引入“三色标记”来给大家解释下把Gcroots可达性分析遍历对象过程中遇到对象…