【学习笔记23】JavaScript数组的遍历方法

news2025/7/16 4:33:01

笔记首发

1、forEach

  • 语法: 数组.forEach(function(item, index, origin){})
  • 参数:
    1. item: 数组实际每一项的
    2. index: 数组每一项对应的下标
    3. origin:原数组
  • 作用: 遍历数组
  • 返回值: 返回值是undefined,哪怕你手写了return,也是undefined
        var arr = [1, 2, 3, 4, 5];
        
        arr.forEach(function(item, index, origin){
            console.log(item, index, origin);
        })

在这里插入图片描述

        var arr = [1, 2, 3, 4, 5];
        var newArr = arr.forEach(function(item, index, origin) {
            return item;
        })
        console.log(newArr);

在这里插入图片描述

2、map

  • 语法: 数组.map(function (item, index, origin) {})
  • 参数:
    1. 数组每一项实际的
    2. 数组每一项实际的值对应的下标
    3. 原数组
  • 作用: 映射数组
  • 返回值: 返回一个和原数组长度一样的数组, 返回的数组的每一个值, 取决参数的return怎么写
       var arr = [1, 2, 3, 4, 5];

        var newArr = arr.map(function (item, index, origin) {
            console.log(item, index, origin)
            return item * 2
        })
        console.log('newArr ---> ', newArr)

在这里插入图片描述

3、filter

  • 语法:数组.filter(function (item, index, origin) { })
  • 参数:
    1. 数组每一项实际的
    2. 数组每一项实际的值对应的下标
    3. 原数组
  • 作用: 过滤数组
  • 返回值: 过滤数组后的新数组, 过滤条件取决于参数的return怎么写
        var arr = [1, 2, 3, 4, 5];
        
        arr.filter(function (item, index, origin) {
            console.log(item, index, origin)
        });var newArr = arr.filter(function (item, index, origin) {
            return item > 3;
        });
         console.log('newArr ---> ', newArr)

在这里插入图片描述

4、find

  • 语法:数组.find(function (item, index, origin) { })
  • 参数:
    1. 数组每一项实际的
    2. 数组每一项实际的值对应的下标
    3. 原数组
  • 作用: 查找数据
  • 返回值: 在数组内找到的第一个数据(不是数组)
        var arr = [1, 2, 3, 4, 5];
        
        arr.find(function (item, index, origin) {
            console.log(item, index, origin)
        })var newArr = arr.find(function (item, index, origin) {
            return item > 3
        })
        console.log('newArr ---> ', newArr);

在这里插入图片描述

5、findIndex

  • 语法:数组.findIndex(function (item, index, origin) { })
  • 参数:
    1. 数组每一项实际的
    2. 数组每一项实际的值对应的下标
    3. 原数组
  • 作用: 查找数据第一次出现的下标
  • 返回值: 在数组内找到的第一个数据出现的下标
        var arr = [1, 2, 3, 4, 5];
        
        arr.findIndex(function (item, index, origin) {
            console.log(item, index, origin);
        });
        
        var newArr = arr.findIndex(function (item, index, origin) {
            return item > 3;
        });
        console.log('newArr ---> ', newArr);

在这里插入图片描述

6、every

  • 语法:数组.every(function(item, index, origin){ })
  • 参数:
    1. 数组每一项实际的
    2. 数组每一项实际的值对应的下标
    3. 原数组
  • 作用:判断数组内数据是否全都满足条件
  • 返回值: 一个布尔值
    1. true:数组内数据全都符合条件
    2. false:数组内起码有一个数据 不符合条件
        var arr = [1, 2, 3, 4, 5];
        console.log('原数组',arr);
        
        arr.every(function (item, index, origin) {
            console.log(item, index, origin)
        })
        var newArr = arr.every(function (item, index, origin) {
            return item > 0
        })
        console.log('返回值:', newArr);

在这里插入图片描述

7、some

  • 语法:数组.some(function (item, index, origin) {})
  • 参数:
    1. 数组每一项实际的
    2. 数组每一项实际的值对应的下标
    3. 原数组
  • 作用: 判断数组内数据是否,有一项满足条件的
  • 返回值: 一个布尔值
    1. true:表示数组内至少有一项满足条件
    2. false:数组内数据全都不满足条件
        var arr = [1, 2, 3, 4, 5];
​
        arr.some(function (item, index, origin) {
            console.log(item, index, origin)
        })
        var newArr = arr.some(function (item, index, origin) {
            return item > 300
        })
        console.log('返回值:', newArr);

在这里插入图片描述

8、reduce

  • 语法:数组.reduce(function (prve, item, index, origin) {}, init)
  • reduce方法的参数
    1. 如果传递第二个参数 init, 执行次数和数组长度相同
    2. 如果不传递第二个参数init, 默认第一值为数组第一项的值, 并且执行次数在数组长度上减1
  • 参数1的函数中4个形参的含义:
    1. 表示初始值或者数组第一项的值(具体是什么取决于是否传递init)
    2. 数组每一项实际的
    3. 数组每一项实际的值对应的下标
    4. 原数组
  • 作用: 累加(叠加)
  • 返回值: 循环运行结束后得到的
        var arr = [1, 2, 3, 4, 5];
​
        arr.reduce(function (prve, item, index, origin) {
            console.log(prve, item, index, origin)
        })var num = arr.reduce(function (prve, item, index, origin) {
            console.log(prve)
            return prve + item
        }, 'init--->')
​
​
        var num = arr.reduce(function (prve, item, index, origin) {
            return prve * item
        }, 1)
​
        console.log(num)

在这里插入图片描述

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

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

相关文章

springboot 使用shiro集成阿里云短信验证码

目录 1.阿里云短信验证码服务 2.发送短信验证码 3.多个realm配置 4.验证短信验证码 5.一些拓展思路 引言:短信验证码是通过发送验证码到手机的一种有效的验证码系统,主要用于验证用户手机的合法性及敏感操作的身份验证。在注册和修改密码时需要用到…

手摸手教会你在idea中配置Tomcat进行servlet/jsp开发(多图超详)

1. 下载安装idea,创建project,如果没有JDK可以通过idea指定文件夹并下载JDK。工程就是普通的Java工程,名字为webdemo 2.因为是Web项目,所以要对这个普通的项目进行WEB扶持^^,在项目名称webdemo上右键单间选择菜单项&qu…

Hive搭建

Hive系列第二章 第二章 Hive搭建 2.1 MySQL5.6安装 1、检查删除已有的 有就删除,没有就不用管。 rpm -qa | grep mysql rpm -e mysql-libs-5.1.73-8.el6_8.x86_64 --nodepsrpm -qa | grep mariadb rpm -e --nodeps mariadb-libs-5.5.56-2.el7.x86_642、删除mysql分…

Windows下Labelimg标注自己的数据集使用(Ubuntu18.04)Jetson AGX Orin进行YOLO5训练测试完整版教程

一、环境配置介绍 整个实现过程所涉及的文件目录,其中,自备表示自己需要准备的,生成表示无需自己准备。 使用yolov5时出现“assertionerror:no labels found in */*/*/JPEGImages.cache can not train without labels”问题 很多朋友都会遇…

SpringBoot+Vue项目医疗管理系统

文末获取源码 开发语言:Java 使用框架:spring boot 前端技术:JavaScript、Vue.js 、css3 开发工具:IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库:MySQL 5.7/8.0 数据库管理工具:phpstudy/Navicat JD…

待办事项是什么意思,怎么用?

待办事项是什么意思,为什么要用?待办事项工具怎么设置?这里一文给你讲清! 废话不多说,下面直接教你:梳理待办事项清单的方法,以及待办工具的操作实操步骤。想要快速提升工作效率的小伙伴&#…

第三十七篇 Vue中封装Swiper组件

在上一篇内容的结尾讲到了将swiper初始化从mounted生命周期转移到updated中来能够让swiper动起来,但同时是否会造其他的一个问题?什么问题呢?在每次data中的状态发什么改变,updated中的内容会又重新执行,这样会导致swi…

二维数组与二级指针是好朋友吗?

抛出问题 有一个二维数组,我想把它传给一个函数。于是我把函数接口定义出来了,如下: int array[2][3] {1,2,3,4,5,6}; void fun(int **array) {array[0][0] 5; } 当我试图直接把数组名传给函数时候,fun(array)编译会报错&…

C++ 中explicit的作用及用法

目录 Cexplicit(官网的说法) Cexplicit 清楚的说法(建议英文不好的从这里开始食用哦) Cexplicit使用的例子(建议喜欢自己敲代码实验的从这里开始食用哦) 总结 Cexplicit(官网的说法&#xff…

神经网络和深度学习-梯度下降Gradient Descent(下)

梯度下降gradient descent 我们接着用数学公式来看一下梯度下降 首先是梯度 ∂cos⁡t∂ω\frac{\partial \cos t}{\partial \omega} ∂ω∂cost​ 然后我们对权重进行更新 ωω−α∂cos⁡t∂ω\omega\omega-\alpha \frac{\partial \cos t}{\partial \omega} ωω−α∂ω∂c…

python基础之容器类型公共方法

文章目录一、简介1.高级数据类型的公共方法:2.python的内置函数:3.python包含的内置函数:二、遍历字典的列表一、简介 1.高级数据类型的公共方法: 列表元组字典或者字符串都能够共同使用的方法; 2.python的内置函数…

【kafka】七、kafka数据可靠性保证

数据可靠性保证 为保证producer发送的数据,能可靠的发送到指定的topic,topic的每个partition收到producer发送的数据后,都需要向producer发送ack(acknowledgement确认收到),如果producer收到ack&#xff0c…

基于AntBlazor的学生在线练习系统实现过程的简单总结

前言 疫情当前,作为一名教师,如何能让学生进行有效练习成了一个难题。如果使用 “问卷星”等线上调查问卷式的网站来做练习测试,是无法及时有效的进行,更谈不上对学生练习情况进行跟踪。鉴于以上现实情况和问题&#xff…

神经网络和深度学习-用pytorch实现线性回归

用pytorch实现线性回归 用pytorch的工具包来实现线性模型的训练过程 准备数据集 设计模型 构造损失函数和优化器(使用pytorch API) 训练过程:前馈、反馈、更新 准备数据 在PyTorch中,计算图是小批处理的,所以X和…

MATLAB | 世界杯来用MATLAB画个足球玩叭~

世界杯教你用MATLAB画个超逼真的足球, 需要准备Partial Differential Equation Toolbox工具箱,同时因为用到了polyshape类所以至少需要R2017b版本。 绘制讲解 数据来源及说明 我是真的不想写注释了太麻烦了,给大家讲一下我的思路希望能够看…

判断一个时间段是否经过了另一个时间段

场景: IOT设备存在离线与恢复时间记录,每一次离线和恢复记为一个周期即一条数据, 现在需要统计出在某个时段存在离线记录的数据,如果目前未恢复,没有恢复时间,恢复时间置为9999-01-01 00:00:00 原始数据如下(t_offline_record):…

OPengl学习——初识opengl

文章目录1、网站罗列2、一些词语解析1.入门概念2.Opengl Vs DirectX3、QOpenGLWidget4、引用**OpenGL(Open Graphics Library)*是一个跨编程语言、跨平台的编程图形程序接口,它将计算机的资源抽象称为一个个OpenGL的对象,对这些资…

3.5、点对点协议 PPP

3.5、点对点协议 PPP 3.5.1、基本介绍 点对点协议 PPP(Point-to-Point Protocol) 是目前使用最广泛的点对点数据链路层协议。 用户计算机只有获取到 ISP 所分配的合法 IP 地址后,才能成为因特网上的主机 用户计算机与 ISP 进行通信时,所使用的数据链路…

【学习笔记21】JavaScript数组的基本方法

笔记首发 一、push:末位新增 语法: 数组.push(数据)作用: 向数组末尾添加数据返回值: 追加数据后, 数组最新的长度 var arr [10, 20, 30, 40];console.log(原始数组: , arr); ​var num arr.push(500);console.log(push新增后数组: , arr);console.log(push的返回…

进程的初识

目录预备知识 -> 操作系统操作系统的定义操作系统的定位进程进程的概念进程调度的过程进程的管理描述组织PCB描述进程的特征进程调度的相关属性进程的状态优先级上下文记账信息预备知识 -> 操作系统 操作系统的定义 操作系统是一个搞管理的软件 对上,要对硬…