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

news2024/11/16 8:40:58

博客背后的故事

其实我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.coloradmin.cn/o/1502322.html

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

相关文章

阿波罗登月需要解决飞行控制问题,数学家卡尔曼在维纳控制的基础上提出了卡尔曼滤波

说到登月,很多人只想到和火箭以及航天器相关的技术,其实登月离不开信息技术的革命。因为从飞行控制到远程通信,都需要解决很多过去从未遇到过的难题。 登月首先要保证在月球上着陆的地点准确,而且要保证返回火箭和飞船能够在月球轨…

sizeof和strlen的详细万字解读

sizeof和strlen的对比 sizeof不是函数 侧面证明sizeof不是函数 如果是函数 应该需要有括号 不能落下来 strlen 只针对字符串 包含头文件 string.h 并且这个是个函数 随机数值 sizeof里面有表达式的话 表达式里面是不参与计算的 下面的s求出的是4 就是因为是不参与计算的 不…

opencv dnn模块 示例(24) 目标检测 object_detection 之 yolov8-pose 和 yolov8-obb

前面博文【opencv dnn模块 示例(23) 目标检测 object_detection 之 yolov8】 已经已经详细介绍了yolov8网络和测试。本文继续说明使用yolov8 进行 人体姿态估计 pose 和 旋转目标检测 OBB 。 文章目录 1、Yolov8-pose 简单使用2、Yolov8-OBB2.1、python 命令行测试2.2、opencv…

图机器学习(3)-面向节点的人工特征工程

0 问题引入 地铁导航图 计算机是看不懂这些图,计算机只能看懂向量、矩阵。 传统图机器学习只讨论连接特征。 构造一个新的特征 x 1 x 2 x_1x_2 x1​x2​,有利于分开这种数据。 人需要去翻译这些计算机不懂的特征,变成计算机可以懂…

数据结构之栈详解(C语言手撕)

🎉个人名片: 🐼作者简介:一名乐于分享在学习道路上收获的大二在校生 🙈个人主页🎉:GOTXX 🐼个人WeChat:ILXOXVJE 🐼本文由GOTXX原创,首发CSDN&…

「2024指南」tf卡格式化了数据怎么恢复?

咨询:我把TF卡插入了我的安卓手机并将其设为内部存储,然后保存了大量重要资料。不久后,我无意中将TF卡拔出。当我再次插入时,手机提示必须格式化TF卡。我不小心点击了格式化选项,导致里面所有重要的资料都不见了。请问…

Java基础语法深入讲解

Java是一种面向对象的编程语言,由Sun Microsystems公司于1995年发布。它被设计为具有跨平台兼容性,这得益于Java虚拟机(JVM)的架构,允许开发者“一次编写,到处运行”(Write Once, Run Anywhere&…

基于YOLOv8深度学习的智能道路裂缝检测与分析系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测、目标分割

《博主简介》 小伙伴们好,我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推…

Maven基础简介

作者简介: zoro-1,目前大二,正在学习Java,数据结构,spring等 作者主页: zoro-1的主页 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖💖 Maven简介 Maven是什么 Maven…

day12_SpringCloud(Gateway,Nacos配置中心,Sentinel组件)

文章目录 1 Gateway组件1.1 Gateway简介1.2 Gateway入门1.3 网关路由流程图1.4 路由工厂1.5 过滤器1.5.1 过滤器简介1.5.2 内置过滤器1.5.3 路由过滤器1.5.4 默认过滤器1.5.5 全局过滤器1.5.6 过滤器执行顺序 2 Nacos配置中心2.1 统一配置管理2.2 Nacos入门2.2.1 Nacos中添加配…

有趣的数学 博弈论初探

1、简述 博弈论是数学的一个分支,专注于分析此类博弈。博弈论可以分为两个主要分支学科:经典博弈论和组合博弈论。经典博弈论研究玩家同时移动、下注或制定策略的游戏。 从数学意义上讲,游戏是指玩家根据定义的规则做出理性决策,试…

js小案例-省市级联

运行效果&#xff1a; 代码演示&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>省市级联</title><style type"text/css">.regist_bg {width: 100%;height: 600px;padding-top: 40px…

四元数(Quaternion)的一些性质

四元数(Quaternion)是用于三维旋转和定向的四部分组成的超复数&#xff0c;超复数简单理解就是比abi这样的复数更复杂的复数&#xff0c;其中abi这样的复数我们也可以叫做二元数&#xff0c;表示复平面的一点&#xff0c;对于熟悉欧拉公式的朋友就知道&#xff0c;也可以看成是…

请编程输出无向无权图各个顶点的度 ← 邻接矩阵存图

【题目描述】 请编程输出无向无权图各个顶点的度。【测试样例示意图】【算法代码】 #include <bits/stdc.h> using namespace std; const int maxn100; int mp[maxn][maxn]; //无向无权图的邻接矩阵 int V,E; //顶点数、边数 int sx,ex; //起点编号、终点编号int main()…

通过Electron打包前端项目为exe

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;爱蹦跶的大A阿 &#x1f525;当前正在更新专栏&#xff1a;《JavaScript保姆级教程》、《VUE》、《Krpano》 ✨ 正文 1、 拉取electron官网上的demo&#xff0c;拉下来之后安装依赖&#xff0c;项目跑起来之后&#xff0c;就…

Python并发编程:非阻塞IO

非阻塞IO&#xff08;non-blocking IO&#xff09; Linux下&#xff0c;可以通过设置socket使其变为non-blocking&#xff0c;当对一个non-blocking socket执行读操作时&#xff0c;流程是这个样子 从图中可以看出&#xff0c;当用户进程发出read操作时&#xff0c;如果kernel…

2024超声波清洗机测评推荐、希亦、苏泊尔、德国综合对比哪个牌子好

清洁眼镜的重要性不言而喻&#xff0c;干净的眼镜不仅可以提供清晰的视野&#xff0c;还可以保护眼睛免受有害物质的侵害。并且现在有非常多的盆骨都是离不开眼镜的&#xff0c;像近视的朋友需要经常佩戴眼镜来配合自己看远处实现&#xff0c;经常爬山的朋友需要墨镜来协助我们…

基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程(五)——多条件搜索并分页展示

前后端数据交互 书接上文&#xff0c;我们上节课通过前后端数据交互实现了分页查询和单条件搜索分页查询的功能&#xff0c;最后留了个小尾巴&#xff0c;就是把其他两个搜索条件&#xff08;email,address&#xff09;也加进来&#xff0c;实现多条件搜索并分页展示。这节课我…

OWASP Top 10 网络安全10大漏洞——A03:2021-注入

10大Web应用程序安全风险 2021年top10中有三个新类别、四个类别的命名和范围变化&#xff0c;以及一些合并。 A03:2021-注入 Injection从第一的位置滑落至第三位置。94% 的应用程序针对某种形式的注入进行了测试&#xff0c;最大发生率为 19%&#xff0c;平均发生率为 3%&a…

Mint_21.3 drawing-area和goocanvas的FB笔记(五)

FreeBASIC SDL图形功能 SDL - Simple DirectMedia Layer 是完整的跨平台系统&#xff0c;有自己的窗口、直接捕获键盘、鼠标和游戏操纵杆的事件&#xff0c;直接操作音频和CDROM&#xff0c;在其surface上可使用gfx, openGL和direct3D绘图。Window3.0时代&#xff0c;各种应用…