当前位置: 首页 > news >正文

详解JS遍历数组的十八种方法

for循环

let arr=[1,2,3]
for(let i=0;i<arr.length;i++){console.log(arr[i])
}

for循环可以遍历数组,它一共有三个参数,第一个参数可以当成数组索引值,想要遍历时候可以设置初始值为0,然后以数组长度为判断依据,如果不大于该数组长度,则调用该函数体,然后+1.

for in

  let arr=[1,2,3]for(item in arr){console.log(arr[item],item)}

for in为ES5推出的一种方法,用来遍历数组和对象,其中它的item是它当前索引,不建议使用它来遍历数组,因为它会把新增隐性原型也遍历出来。
例:

  let arr=[1,2,3]arr.__proto__.a=1for(item in arr){console.log(arr[item],item)}

打印结果:1 ‘0’ 2 ‘1’ 3 ‘2’ 1 ‘a’
会发a当作索引,1当作值遍历出来。

for of

  let arr=[1,2,3]for(item of arr){console.log(item);//1 2 3}

ES6新增,建议使用,其中of左侧为它遍历出来的具体属性值。

forEach

  let arr=[1,2,3]arr.forEach((item,index,myself)=>{console.log(item,index,myself)// 1 0 (3) [1, 2, 3]// 2 1 (3) [1, 2, 3]// 3 2 (3) [1, 2, 3]})

ES5方法:forEach一共有三个可选参数,其中item为元素值,index为索引值,myself为数组本身,可以根据自身需要处理forEach方法。

map

  let arr=[1,2,3]arr=arr.map((item,index,myself)=>{console.log(item,index,myself);return item*2;})console.log(arr);//2 4 6

参数类型和参数作用和forEach一样,不同点在于map有return,可以返回一个新的数组,而forEach不能。

map和forEach区别

  • map可以使用return,并且可以返回一个数组。forEach不可以使用return,只能处理数组,不能返回数组。
  • forEach和map都不能使用break;终止,只有for循环可以。

相同点:

  • 参数个数和功能一样。
  • 都不会改变原来数组

filter

  let arr=[1,2,3]arr=arr.filter(item=>{return item<2;})console.log(arr);//1

也能遍历数组,它主要功能是筛选,条件放在return中,比如上述代码条件为arr里元素<2,则只返回[1]数组。

find

  let arr=[1,2,3]arr=arr.find(item=>{return item<3;})console.log(arr);//1

返回第一个符合条件的元素。如果数组为空,则不执行该函数。没有符合的返回undefined。

findIndex

let arr = [1, 2, 3]
arr = arr.findIndex(item => {return item > 2;
})
console.log(arr); //2

返回第一个符合条件的元素索引,没有则返回-1.

indexOf和lastIndexOf

indexOf是从前往后遍历
last则是从后往前遍历,如果有参数相同的元素,则返回第一个符合条件的元素下标,没有则返回-1

let arr = [1, 2, 3]
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(4));//-1

every

let arr = [1, 2, 3]let newArr1 = arr.every(item => {return item > 2;})console.log(newArr1);//false

遍历后判断,返回值为true、false,如果所有遍历对象都符合条件,则返回true,否则返回false。

some

let arr = [1, 2, 3];
arr=arr.some(item=>{return item<2;
})
console.log(arr);//true

有符合条件的返回true,不需所有都符合条件

includes

let arr = [1, 2, 3]
console.log(arr.includes(1));

ES6新增方法,用于判断遍历数组后是否有该元素,如果有则返回true,没有则返回false

reduce和reduceRight

累加器,判断一个数组所有数字相加得几。

迭代器机制

ES6新增一种迭代器机制,三个方法keys、values、entries,都可以实现遍历数组操作。这里就不赘述了。

相关文章:

详解JS遍历数组的十八种方法

for循环 let arr[1,2,3] for(let i0;i<arr.length;i){console.log(arr[i]) }for循环可以遍历数组&#xff0c;它一共有三个参数&#xff0c;第一个参数可以当成数组索引值&#xff0c;想要遍历时候可以设置初始值为0&#xff0c;然后以数组长度为判断依据&#xff0c;如果不…...

Python程序设计基础2

第1关:HUT开学了: # 请在此添加代码 Name = input() # 输入学生的姓名 ########## Begin ########## print("|++++++++++++++++++++++|") print("| |") print("| Welcome to HUT |") print("| …...

域名服务器有哪些类型

域名服务器有哪些类型 随着现在网络的不断发展&#xff0c;越来越多的企业开始使用网络建站&#xff0c;以此来进行营销和推广&#xff0c;而网站在建设过程中需要使用域名和空间&#xff0c;那么域名服务器是什么&#xff1f;下面由给大家说一下。 主域名服务器 负责维护一…...

5.什么是Spring的依赖注入(DI)?IOC和DI的区别是什么

很多人把IOC和DI说成一个东西&#xff0c;笼统来说的话是没有问题的&#xff0c;但是本质上还是有所区别的,希望大家能够严谨一点&#xff0c; IOC和DI是从不同的角度描述的同一件事&#xff0c;IOC是从容器的角度描述&#xff0c;而DI是从应用程序的角度来描述&#xff0c;也…...

Python开源自动化工具Playwright安装及介绍

一个非常强大的自动化项目叫 playwright-python 它支持主流的浏览器&#xff0c;包含&#xff1a;Chrome、Firefox、Safari、Microsoft Edge 等&#xff0c;同时支持以无头模式、有头模式运行&#xff0c;并提供了同步、异步的 API&#xff0c;可以结合 Pytest 测试框架 使用&…...

Nginx生产环境安装配置

不建议使用nginx-1.18.0.tar.gz&#xff0c;因为扫出很多漏洞 上传nginx-1.24.0.tar.gz [rootzonghe01 data]# ll -rw-r--r-- 1 root root 1112471 Oct 26 15:57 nginx-1.24.0.tar.gz [rootzonghe01 data]# pwd /data解押 [rootzonghe01 data]# tar -zxvf nginx-1.24.0.tar…...

「项目阅读系列」go-gin-example star 6.5k!(1)

文章目录 准备工作适宜人群项目信息 项目结构代码阅读主要模块代码主函数模块router 路由模块auth 授权模块数据库 修改文章请求分析其他依赖 总结 准备工作 适宜人群 初学 go 语法&#xff0c;希望了解 go 项目的构建过程和方式。 项目信息 go-gin-example 项目是使用 gin…...

基于轻量级yolov5的瓷砖瑕疵检测系统

该专栏仅支持购买本专栏的同学学习使用,不支持以超级会员、VIP等形式使用,请谅解!【购买专栏后可选择其中一个完整源码项目】 本文是我新开设的专栏《完整源码项目实战》 的第十二篇全源码文章,包含数据集在内的所有资源,可以实现零基础上手入门学习。前面系列文章链接如下…...

Linux:系统基本信息扫描(2)

#网络地址:ip a------------------------------------------------------------- ip a echo "主机名:-------------------------------------------------------" hostnamectl sleep 0.5s echo "#系统基本信息:--------------------------------------------…...

什么是虚拟DOM(Virtual DOM),说说工作原理

虚拟DOM&#xff08;Virtual DOM&#xff09;是一种将页面的状态抽象为JavaScript对象表示的概念&#xff0c;用于提高Web应用程序的性能和渲染效率。 虚拟DOM的工作原理如下&#xff1a; 1&#xff1a; 初始渲染&#xff1a;首先&#xff0c;通过JavaScript对象&#xff08;…...

Kafka的重要组件,谈谈流处理引擎Kafka Stream

系列文章目录 上手第一关&#xff0c;手把手教你安装kafka与可视化工具kafka-eagle Kafka是什么&#xff0c;以及如何使用SpringBoot对接Kafka 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析&#xff0c;打破面试难关 防止消息丢失与消息重复——Kafka可…...

基于yolov5模型的200种鸟类检测识别分析系统

该专栏仅支持购买本专栏的同学学习使用,不支持以超级会员、VIP等形式使用,请谅解!【购买专栏后可选择其中一个完整源码项目】 本文是我新开设的专栏《完整源码项目实战》 的第十三篇全源码文章,包含数据集在内的所有资源,可以实现零基础上手入门学习。前面系列文章链接如下…...

JavaScript的学习,就这一篇就OK了!(超详细)

目录 Day27 JavaScript(1) 1、JS的引入方式 2、ECMAScript基本语法 3、ECMAScript 基本数据类型​编辑 3.1 数字类型 3.2 字符串 3.3 布尔值 3.4 空值&#xff08;Undefined和Null&#xff09; 3.5 类型转换 3.6 原始值和引用值 4、运算符 5、流程控制语句 5.1 分…...

hive sql 取当周周一 str_to_date(DATE_FORMAT(biz_date, ‘%Y%v‘), ‘%Y%v‘)

select str_to_date(DATE_FORMAT(biz_date, %Y%v), %Y%v)方法拆解 select DATE_FORMAT(now(), %Y%v), str_to_date(202346, %Y%v)...

【React】React 基础

1. 搭建环境 npx create-react-app react-basic-demo2. 基本使用 JSX 中使用 {} 识别 JavaScript 中的表达式&#xff0c;比如变量、函数调用、方法调用等。 if、switch、变量声明等属于语句&#xff0c;不是表达式。 列表渲染使用 map 。 事件绑定用&#xff1b;on 事件名称…...

CentOS7 设置 nacos 开机启动

1、新增服务文件 vim /lib/systemd/system/nacos.service2、增加如下内容 [Unit] Descriptionnacos Afternetwork.target[Service] Typeforking ExecStart/usr/local/nacos/bin/startup.sh -m standalone ExecReload/usr/local/nacos/bin/shutdown.sh ExecStop/usr/local/nac…...

使用低代码可视化开发平台快速搭建应用

目录 一、JNPF可视化平台介绍 二、搭建JNPF可视化平台 【表单设计】 【报表设计】 【流程设计】 【代码生成器】 三、使用JNPF可视化平台 1.前后端分离&#xff1a; 2.多数据源&#xff1a; 3.预置功能&#xff1a; 4.私有化部署&#xff1a; 四、总结 可视化低代码…...

数据分析思维与模型:多维度拆解分析法

多维度拆解分析法"&#xff08;Multi-Dimensional Analysis and Decomposition Method&#xff09;是一种用于深入分析和解决复杂问题的方法论。这种方法侧重于从多个角度或维度来考察问题&#xff0c;以便于更全面地理解和解决它们。它通常包括以下几个步骤&#xff1a; …...

Goby 漏洞发布|大华智慧园区综合管理平台 poi 文件上传漏洞

漏洞名称&#xff1a;大华智慧园区综合管理平台 poi 文件上传漏洞 English Name&#xff1a;Dahua Smart Park Integrated Management Platform poi file upload vulnerability CVSS core:9.0 影响资产数&#xff1a;7113 漏洞描述&#xff1a; 大华智慧园区综合管理平台是…...

视频修复软件 Aiseesoft Video Repair mac中文版功能

AIseesoft Video RepAIr mac是一款专业的视频修复软件&#xff0c;主要用于修复损坏或无法播放的视频文件。AIseesoft Video RepAIr是一个功能强大的程序,可以帮助恢复丢失或损坏的数据的视频。只要您以相同的格式提供示例视频,并在功能强大的技术的支持下,只需单击几下即可收获…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...