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、对数组进行操作的方法都不会改变原数组,而是以返回值的形式返回新数组

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

集万千优点于一身的Haproxy集群,你还不了解?

一、HAProxy介绍 HAProxy是法国开发者威利塔罗(Willy Tarreau)在2000年使用C语言开发的一个开源软件,是一款具备高并发(一万以上)、高性能的TCP和HTTP负载均衡器,支持基于cookie的持久性,自动故障切换,支持正则表达式及web状态统…

怎么做不限扫码次数的文件活码?文件可长期扫描展现下载

如何制作不限扫码次数的文件二维码呢?将文件转二维码后分享给其他人,是现在非常方便的一种文件传输方式。很多小伙伴在制作文件二维码的时候,比较担心的一个问题,就是二维码可以扫码的次数,担心达不到自己预期的效果&a…

C++ 打印输出十六进制数 指定占位符前面填充0

C 打印十六进制数据&#xff0c;指定数据长度&#xff0c;前面不够时&#xff0c;补充0. 代码如下&#xff1a; #include <iostream> #include <iomanip> #include <cmath>using namespace std;int main() {unsigned int id 0xc01;unsigned int testCaseId…

Docker部署SimpleMindMap结合内网穿透实现公网访问本地思维导图

文章目录 1. Docker一键部署思维导图2. 本地访问测试3. Linux安装Cpolar4. 配置公网地址5. 远程访问思维导图6. 固定Cpolar公网地址7. 固定地址访问 SimpleMindMap 是一个可私有部署的web思维导图工具。它提供了丰富的功能和特性&#xff0c;包含插件化架构、多种结构类型&…

【C++】inline内联函数 VS #define宏

文章目录 1. 内联概念2. 内联特点3. 宏的优缺点 1. 内联概念 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开&#xff0c;无函数建立栈帧的开销&#xff0c;内联函数提升程序运行的效率。 在release模式下&#xff0c;默认展开生效。 在…

时序报告Report_timing_summary之一步精通配置选项使用

目录 一、前言 二、配置选项概览图 三、配置选项 3.1 Options 3.1.1 report 3.1.2 path limits 3.1.3 path display 3.2 Advanced 3.2.1 report 3.2.3 miscellaneous 3.3 Timer Settings 3.4 共有部分 四、工程示例 4.1 工程设计代码 4.2 约束文件 4.3 Option…

Stable Diffusion WebUI 中英文双语插件(sd-webui-bilingual-localization)并解决了不生效的情况

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文介绍一款中英文对照插件 sd-webui-bilingual-localization&#xff0c;该插件可以让你的 Stable Diffusion WebUI 界面同时显示中文和英文&#xff0c;让我…

【C++】手撕string类(超实用!)

前言 一、标准库中的string类 1.1 string类介绍 1.2 string的常用接口 1.2.1 常用的构造函数 1.2.2 容量操作接口 &#xff08;1&#xff09;size &#xff08;2&#xff09;capacity &#xff08;3&#xff09;empty &#xff08;4&#xff09;clear &#xff08…

stm32学习记录-5.2PWM输出控制sg90舵机角度

源码连接&#xff1a;https://gitee.com/HL12334/stm32-learning-code 前提知识&#xff1a; 1.定时器中断 1.关键概念 1.1pwm输出 1.常用术语 OC&#xff08;output compare&#xff09;输出比较CNT&#xff08;counter&#xff09;&#xff0c;定时器中用于计数的寄存器…

【Leetcode每日一刷】数组|双指针篇:977. 有序数组的平方、76. 最小覆盖子串(附滑动窗口法详解)

力扣每日刷题 一、977. 有序数组的平方1.1题目1.2、解题思路1.3、代码实现——C 二、76. 最小覆盖子串2.1&#xff1a;题目2.2、解题思路2.3&#xff1a;代码实现——c2.4&#xff1a;易错点 一、977. 有序数组的平方 1.1题目 [题目链接]( 1.2、解题思路 题型&#xff1a;双…

数据中台驱动:高效交付之道

如何保证数据中台高效交付&#xff1f; 在数据行业中&#xff0c;项目交付难题尤为突出&#xff0c;尤其在数据中台领域。数据中台项目交付面临诸多挑战&#xff0c;若不妥善解决&#xff0c;将会降低服务质量&#xff0c;影响企业数字化建设的顺利开展&#xff0c;甚至影响项目…

21 卷积层里的多输入多输出通道【李沐动手学深度学习v2课程笔记】

目录 1. 多输入输出通道&相应代码实现 1.1 多输入 1.2 多输出 1.3 1x1 卷积层 1.4 小结 1. 多输入输出通道&相应代码实现 1.1 多输入 为了加深理解&#xff0c;我们实现一下多输入通道互相关运算。 简而言之&#xff0c;我们所做的就是对每个通道执行互相关操作&a…

电磁兼容(EMC):一文读懂压敏电阻选型

目录 1 MOV 外观结构 2 MOV 常见品牌 3 MOV命名规则 4 MOV 工作原理 5 MOV基本特点 6 MOV典型应用 7 MOV电气参数说明 8 MOV 选型注意事项 8.1 压敏电压V1mA 8.2 峰值脉冲电流 IP&#xff0c;钳位电压VC 8.3 漏电流IR 8.4 结电容 9 有绝缘耐压测试要求时选型 10 …

预处理详解

目录 一&#xff1a;预定义符号 二&#xff1a;#define定义常量 三&#xff1a;#define定义宏 四&#xff1a;带有副作用的宏定义 五&#xff1a;宏的替换规则 六&#xff1a;宏函数的对比 七&#xff1a;# 和 ## 7.1 #运算 7.2 ##预算符 八&#xff1a;命名约定 九&…

mac电脑版MATLAB R2023b for Mac中文激活版

MATLAB R2023b for Mac&#xff1a;科学计算的终极工具 软件下载&#xff1a;MATLAB R2023b for Mac中文激活版下载 &#x1f52c; 探索科学&#xff0c;无限可能 MATLAB R2023b for Mac&#xff0c;助您深入挖掘科学计算的奥秘。从数据分析、算法设计到可视化展示&#xff0c;…

物联网导论

物联网起源 物联网&#xff1a;是一个基于互联网、传统电信网等信息承载体&#xff0c;让所有能够被独立寻址的普通物理对象实现互联互通的网络。它具有普通对象设备化、自治终端互联化和普适服务智能化三个重要特征。 按照规定的协议&#xff0c;将具有感知、通信、计算等功…

T2 小美的平衡矩阵(25分) - 美团编程题 题解

考试平台&#xff1a; 牛客网 题目类型&#xff1a; 30道单选题&#xff08;60分&#xff09; 2 道编程题 &#xff08;15分 25分&#xff09; 考试时间&#xff1a; 2024-03-09 &#xff08;两小时&#xff09; 题目描述 小美拿到了一个n*n的矩阵&#xff0c;其中每个元素是…

简单BFF架构设计

又到周五了有了一个小时的闲暇时间简单写点东西&#xff0c;介绍一个简单的BFF的架构。BFF:Backends For Frontends,其实现在是个比较常见的前端架构设计的方案&#xff0c;其最大的优势便在于前端可以高度自由的在Node层做一些server端才可以做的东西&#xff0c;比如SSR、登录…

【JavaEE进阶】Spring中事务的实现

文章目录 &#x1f343;前言&#x1f334;事务简介&#x1f6a9; 什么是事务?&#x1f6a9;为什么需要事务?&#x1f6a9;事务的操作 &#x1f340;Spring 中事务的实现&#x1f6a9;Spring 编程式事务&#x1f6a9;Spring声明式事务Transactional&#x1f6a9;Transactional…

Using WebView from more than one process

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 未经允许不得转载 目录 一、导读二、概览三、问题过程源码追踪…