当前位置: 首页 > 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是一个功能强大的程序,可以帮助恢复丢失或损坏的数据的视频。只要您以相同的格式提供示例视频,并在功能强大的技术的支持下,只需单击几下即可收获…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...