JS的一些方便遍历数组的API函数

这些函数有的时候在学到后面的内容会遇到,看一些前端的视频的时候突然出现这些函数看到有点懵,现在就整合一下,然后以后看到这些函数就知道是干什么的了

1、箭头函数

没学完js的必须得先了解箭头函数

//它两一样
function fn(){console.log('damn')
}() => { console.log('damn') }//它三一样,一个参数可以省略(),多个参数不可以,没有参数也不可以
function fn(a){console.log(a)
}(a) => { console.log(a) }a => { console.log(a) }//只有一个return的时候可以省略{},甚至可以省略return
function fn(x){return x+1
}(x) => return x+1x => x+1//返回一个对象的时候,如果省略return的形式要用一个()包住return的值
//不然会把对象的{}误认为是函数体
function fn(){return { name: xxx , age: 18 }
}() => return { name: xxx , age: 18 }() => ({ name: xxx , age: 18 })//箭头函数里有多个语句的时候就不可以一行显示,也不可以随便省略{}、return
function fn(a,b,c){c = a + breturn c + 1
}(a,b,c) => {c = a + breturn c + 1
}

2、for-each

这是最简单的了,就是普通遍历数组

普通for循环:

let arr = [1,2,3,4]
for( let i=0; i<arr.length; i++ ) { ...每遍历到一个要干什么 
}

for...in... 和 for...of...循环:

let arr = [1,2,3,4]
for(let i in arr ){console.log(i)  //i是字符串类型的数字索引  所以打印arr[i+1]会得一个undefined
}
for(let i of arr){console.log(i)  //i是值
}for(let i =0;i<arr.length;i++){console.log(i)  //i是数字索引
}let obj ={name:'boy'
}
for(let i in obj){console.log(i)  //i是字符串键名
}

那么for-each循环

let arr = ['a', 'b', 'c', 'd']
//forEach是函数,直接【数组名.forEach()】,然后里面写一个函数
arr.forEach(function (val, idx, arr) { //最多可以设置三个参数console.log(val + ', index = ' + idx) // val是当前元素,index当前元素索引,arr数组console.log(arr)
})
//输出:
a, index = 0
(4) ["a", "b", "c", "d"]
b, index = 1
(4) ["a", "b", "c", "d"]
c, index = 2
(4) ["a", "b", "c", "d"]
d, index = 3
(4) ["a", "b", "c", "d"]//或者一个参数的时候,这个参数就代表数组里遍历到的每一个成员
arr.forEach(item => { //此时item代表arr数组每一个成员console.log(item)
})
//输出:['a','b','c','d']

3、map方法生成一个原数组修改过后的新数组

比如我要获得一个原数组每个成员*2的结果

用forEach方法,就要设一个新数组,然后遍历原数组,并把每次修改的结果装到新数组里

用map方法,直接用一个新数组接收一下,然后对原数组直接操作即可

具体对象数组例子:

(操作,在原数组的基础上,让price价格后面加上“元”,并多加一个属性“number:888”,)

(当然这里可以用“...item”代表数组里所有属性)

简写:

4、filter方法

遍历到数组每个成员,根据return的是true还是false,来决定返不返回当前遍历到的这个成员

return 的是true,当前这个成员就装进新数组

否则就丢掉不要

5、reduce方法得到一个数组最后的计算结果

老方法计算一个数组的总数:

现在用reduce计算:

reduce( )完整有2个参数,一个是一个return结果的函数,第二个是第一次计算的初始值

第一个函数参数里,完整要传4个参数:reduce( prev, current, index, arr )

分别代表( 上一次运算的结果, 当前遍历到的成员, 下标, 数组名字 ),其中后面两个参数可有可无

第二个参数一定不要漏了,一般初始值都是0,乘除的初始值一般是1

求最大值

求平均值

6、every方法:类似&&判断

里面传一个函数参数,进行一个判断并返回,如果数组每一个成员都符合这个判断条件,结果就是true;否则只要有一个成员不符合条件,就返回false

结果true

结果false

结果false

结果true

7、some方法:类似 || 判断

跟every( )相反,有一个符合要求就true,全都不符合才是false

结果true

结果false

8、include方法

字面意思,往里面传一个参数(而不是回调函数了),数组里有这个参数就true,没有就false

注意,只能对普通类型有效,对象这些没用

结果true

结果false

对数组、对象的结果无法判断

结果false

那怎么去比较一个数组里包不包含某个子数组?

用every( )配合include( )就行了,every可以遍历到子数组每一个成员,然后include可以查看子数组遍历到的成员在原数组里有没有,如果有一个没有就返回给every一个false,然后every最终判断为false

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

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

相关文章

图文并茂!在Oracle VM VirtualBox上安装Ubuntu虚拟机的详细步骤指南

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

202303 CSP认证 | LDAP

LDAP 好好好&#xff0c;难度直线上升&#xff0c;是一道又有了字符串处理味道的第三题 第一把写官网40分&#xff0c;acwing TLE且只通过了一道数据…本文是自己这题奋斗过程 的一个记录 先贴个40分的代码&#xff1a; #include<bits/stdc.h> using namespace std; t…

Servlet两种配置

通过xml配置 <servlet><servlet-name>MyServlet</servlet-name><servlet-class>MyServlet</servlet-class> </servlet> <servlet-mapping><servlet-name>MyServlet</servlet-name><url-pattern>/MyServlet</ur…

U盘变本地磁盘?数据恢复有妙招!

一、U盘异变本地磁盘现象 在日常工作和生活中&#xff0c;U盘作为便携式的存储设备&#xff0c;广受大家喜爱。然而&#xff0c;有时我们会遇到一个奇怪的现象&#xff1a;原本应该显示为可移动磁盘的U盘&#xff0c;在插入电脑后却变成了“本地磁盘”。这种情况不仅让人困惑&…

论文解读之Attention-based Deep Multiple Instance Learning

前言 多实例学习是由监督学习演变而来的&#xff0c;我们都知道&#xff0c;监督学习在训练的时候是一个实例&#xff08;或者说一个样本、一条训练数据&#xff09;对应一个确定的标签。而多实例的特点就是&#xff0c;我们在训练的时候的输入是多个实例对应一个确定的标签&a…

JUC之CAS比较并交换

CAS 原子类引入 加入原子整型类的操作后&#xff0c;无锁化的操作 CAS 比较并交换 硬件级别的保证 源码分析 引出UnSafe类 UnSafe源码分析 unsafe中的do-while保证自旋 public final int getAndAddInt(Object var1, long var2, int var4) {int var5;do {var5 this…

JSON基础知识

目录 一、定义二、作用三、特点四、语法JSON具有以下这些形式&#xff1a;4.1 对象(JSONObject)&#xff1a;4.2 数组(JSONArray)&#xff1a;4.3 值4.4 字符串4.5 数值 五、常用的JSON解析方式5.1 org.json解析5.1.1 常用api5.1.2 get方法与opt方法对比5.1.3 使用示例5.1.3 参…

jS 正则

概念 正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中&#xff0c;正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。 创建正则表达式 两种方法&#xff1a;字面量方式、构造…

Spring-3

目录 Spring AOP和AspectJ AOP 在Spring AOP 中&#xff0c;关注点和横切关注的区别 Spring 框架中的单例 Bean 是线程安全的吗 Spring 是怎么解决循环依赖的&#xff1f; 事务隔离级别 事务的传播级别 Spring 事务实现方式 Spring框架的事务管理有哪些优点 事务注解的…

2、高级语言的语法描述

常用的高级程序设计语言 程序语言的定义 语法 一组规则&#xff0c;用它可以形成和产生合适的程序 词法规则&#xff1a;单词符号的形成规则。 单词符号的形成规则单词符号是语言中具有独立意义的最基本结构 一般包括:常数、标识符、基本字、算符、界符等 描述工具:有限自动机…

膨胀 卷积

1.作用 Dilated convolution、Atrous convolution 增大感受野保持原输入大小 2.膨胀因子 描述的是相邻元素之间的距离 r 2 3.gridding effect 不合理的多个膨胀卷积之前&#xff0c;设计的膨胀因子不合理导致&#xff0c;在增大感受野的同时丢失了细节信息。 丢失&…

7.测试教程-自动化测试selenium-2

文章目录 1.webdriver API1.1元素的定位1.2id定位1.3name 定位1.4tag name 定位和class name 定位1.5CSS 定位(常用)1.5.1概念1.5.2实操1.5.3语法 1.6XPath 定位1.6.1概念1.6.2实操1.6.3语法 1.7link text定位1.8Partial link text 定位1.9一个简单的测试实战1.10CSS定位和XPat…

sqllab第二十六A关通关笔记

知识点&#xff1a; 布尔注入 只能爆破出不带空格的语句信息database() version() 等空格、注释都被过滤了错误不回显了 感觉和26关应该差不多 构造payload:id0||11 发现可以绕过 尝试进行错误注入 构造payload:id||exp(710)1 发现页面没有有价值的回显信息&#xff1b;…

一个可商用私有化部署的基于JAVA的chat-gpt网站

目录 介绍一、核心功能1、智能对话2、AI绘画3、知识库4、一键思维导图5、应用广场6、GPTS 二、后台管理功能1、网站自定义2、多账号登录支持3、商品及会员系统4、模型配置5、兑换码生成6、三方商户用户打通 结语 介绍 java语言的私有化部署的商用网站还是比较少的 这里给大家介…

Go语言gin框架中加载html/css/js等静态资源

Gin框架没有内置静态文件服务&#xff0c;但可以使用gin.Static或gin.StaticFS中间件来提供静态文件服务。 效果图如下&#xff1a; 一、gin 框架加载 Html 模板文件的方法 方式1&#xff1a;加载单个或多个html文件&#xff0c;需要指明具体文件名 r.LoadHTMLFiles("vie…

手写简易操作系统(十)--中断概述

前情提要 我们还是总结一下前面做了什么 1、计算机启动&#xff0c;BIOS将MBR导入到内存&#xff0c;并跳转到相应位置执行 2、MBR将Loader导入到内存&#xff0c;并跳转执行 3、Loader中开启保护模式&#xff0c;准备好GDT表&#xff0c;开启内存分页&#xff0c;从此之后…

9成省份“鸿蒙化”,它真起来了?

自去年9月华为宣布鸿蒙原生应用全面启动以来&#xff0c;鸿蒙正以不可阻挡之势&#xff0c;快速在全国千行百业的移动应用领域推进。不仅有支付宝、快手、淘宝、京东等超200家头部互联网企业加入鸿蒙生态&#xff1b;2024年以来&#xff0c;上海、浙江、广西等多省市政务民生、…

C++_day6

思维导图&#xff1a; 2试编程 封装一个动物的基类&#xff0c;类中有私有成员: 姓名&#xff0c;颜色&#xff0c;指针成员年纪 再封装一个狗这样类&#xff0c;共有继承于动物类&#xff0c;自己拓展的私有成员有:指针成员:腿的个数(整型 int count)&#xff0c;共有成员函数…

2024全新红娘交友系统定制版源码 | 相亲交友小程序源码 全开源可二开

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 全新红娘交友系统定制版源码 | 相亲交友小程序源码 全开源可二开 定制版红娘交友平台小程序源码&#xff0c;很牛逼的东西&#xff0c;虽然是小程序&#xff0c;但是有700多M大&…