详解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,都可以实现遍历数组操作。这里就不赘述了。

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

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

相关文章

STM32 SPI

SPI介绍 SPI是Serial Pepheral interface缩写&#xff0c;串行外围设备接口。 SPI接口是一种高速的全双工同步通信总线&#xff0c;已经广泛应用在众多MCU、存储芯片、AD转换器和LCD之间。大部分STM32有3个SPI接口&#xff0c;本实验使用的是SPI1。 SPI同一时刻既能发送数据&…

vue3+vite+ts 发布自定义组件到npm

vue3vite 发布自定义组件到npm 初始化项目编写组件配置打包组件上传到npm测试组件库 初始化项目 // 创建项目 pnpm create vite vue-test-app --template vue-ts// 运行项目 cd vite vue-test-app pnpm install pnpm run dev编写组件 1、根目录下创建packages目录作为组件的开…

Android 9.0 设备蓝牙、位置、WIFI、NFC功能默认关闭

Android 9.0 设备蓝牙、位置、WIFI、NFC功能默认关闭 近来陆陆续续处理了一些需要将蓝牙、位置、WIFI、NFC功能默认为关闭状态的需求&#xff0c;于是今天在这里总结一下这些修改点的具体修改方法&#xff0c;具体修改参照如下&#xff1a; 蓝牙、位置、WIFI功能默认关闭&…

独立成分分析matlab代码

独立成分分析matlab代码 在文章 信号去噪之独立成分分析&#xff08;ICA&#xff09; 中以python代码为例&#xff0c;有读者朋友问matlab代码&#xff0c;以下给出示例&#xff1a; python: import numpy as np from sklearn.decomposition import FastICA import matplotl…

MindNode v5.0.1(思维导图软件)

思维导图软件哪个比较好呢&#xff1f;MindNode for mac一款功能简单&#xff0c;界面简洁&#xff0c;不用看教程都会用的思维导图软件。mindnode mac可随时随地记录自己的想法&#xff0c;让您从灵感入手&#xff0c;将奇思妙想铺陈在画布上&#xff0c;让一切井井有条。 Mi…

企业实现员工聊天和转账行为的实时监管

如何解决企业营销团队的管理问题&#xff1f; 在当今竞争激烈的市场环境中&#xff0c;企业营销团队的管理显得尤为重要。营销团队是企业发展的重要支柱&#xff0c;然而&#xff0c;一些常见的问题如员工飞单、私单、辱骂删除客户、离职带走公司客户以及工作不认真、工作量无…

【Linux网络】典型NAS存储方式:NFS网络共享存储服务

一、关于存储的分类 二、NFS的介绍 nfs的相关介绍&#xff1a; 1、原理 2、nfs的特点 3、nfs软件学习 4、共享配置文件的书写格式 关于权限&#xff0c;学习&#xff1a; 5、关于命令的学习&#xff1a; 三、实验操作 1、nfs默认共享权限&#xff08;服务端设置&#…

腐蚀监测常用技术及作用

上次我们介绍了设备状态监测中的红外热像技术>>热成像仪的工作原理及在工业设备状态监测中的应用&#xff0c;这次我们一起来探讨腐蚀监测技术方面的内容。 在工业领域中&#xff0c;腐蚀监测技术是腐蚀控制的重要部分和可靠而有效的手段。通过对设备的腐蚀情况进行监测和…

.babyk勒索病毒解析:恶意更新如何威胁您的数据安全

导言&#xff1a; 在数字时代&#xff0c;威胁不断进化&#xff0c;其中之一就是.babyk勒索病毒。这种病毒采用高级加密算法&#xff0c;将用户文件锁定&#xff0c;并要求支付赎金以获取解密密钥。本文91数据恢复将深入介绍.babyk勒索病毒的特点、如何应对被加密的数据&#…

运行软件报错mfc140.dll丢失?分享mfc140.dll丢失的解决方法

小伙伴们&#xff0c;你是否也有过这样的经历&#xff1a;每当碰到诸如" mfc140.dll 丢失 "之类的烦人错误时&#xff0c;你是不是会一头雾水&#xff0c;完全不知道从何下手去解决&#xff1f;不要担心&#xff0c;接下来咱就给你提供这样一篇实用教程&#xff0c;教…

【完全攻略】Gradio:建立机器学习网页APP

目录 前言一、Gradio介绍以及安装1-1、Gradio介绍1-2、安装 二、快速开始&#xff08;初步了解&#xff09;2-1、简单小栗子2-2、多输入多输出2-3、简易聊天机器人 三、关键技术3-1、带有样例的输入3-2、提示弹窗3-3、描述内容3-4、风格3-5、流式输出3-6、进度条3-7、分享APP 总…

4 redis的HyperLogLog入门原理

一、HyperLogLog&#xff08;字符串类型&#xff09; 需求&#xff1a;大型网站(不在大厂基本上用不到) 每个网页每天的 UV 数据(独立访客)&#xff0c;统计如何实现&#xff1f;(尽量少的占用存储空间) Redis 提供了 HyperLogLog 数据结构就是用来解决这种统计问题的。Hyper…

Django学习日志09

choices参数的使用 """对于以上可能被我们列举完的字段我们一般都是选择使用choices参来做""" class UserInfo(models.Model):username models.CharField(max_length64)password models.CharField(max_length32)# 先写一个映射关系gender_cho…

idea中把spring boot项目打成jar包

打jar包 打开项目&#xff0c;右击项目选中Open Module Settings进入project Structure 选中Artifacts&#xff0c;点击中间的加号&#xff08;Project Settings->Artifacts->JAR->From modules with dependencies &#xff09; 弹出Create JAR from Modules&#…

[AutoSar]CP autosar 面试题

目录 关键词前言面试官提问答案 关键词 嵌入式、C语言、autosar、面试题 前言 以前面试中的一些常提到的问题&#xff0c;在这里整理一下&#xff0c;希望对要去面试的道友有所帮助。 其中问题的答案后续有时间会再更新整理。 面试官提问 1.Autosar 概述&#xff1a; 解释 …

pytest-rerunfailures插件之测试用例失败重跑

环境前提&#xff1a; 只有同时满足一下先决条件才能使用pytest-rerunfailures ①python的版本不能过低&#xff1b; ②pytest 5.0或更高版本&#xff1b; 背景&#xff1a; 平时在做接口测试的时候&#xff0c;经常会遇到网络抖动或者环境问题导致测试用例运行失败&#x…

2024年csdn最新最全的Postman接口测试: postman实现参数化

什么时候会用到参数化 比如&#xff1a;一个模块要用多组不同数据进行测试 验证业务的正确性 Login模块&#xff1a;正确的用户名&#xff0c;密码 成功&#xff1b;错误的用户名&#xff0c;正确的密码 失败 postman实现参数化 在实际的接口测试中&#xff0c;部分参数…

Delayed 延时任务

延时任务与定时任务的区别 延时任务&#xff0c;可以理解为定时任务的一种&#xff0c;但是他们是有区别的。 延时任务&#xff1a;将程序代码延时执行&#xff0c;执行完毕&#xff0c;即为结束。 定时任务&#xff1a;周期性执行任务。代码执行完毕后&#xff0c;并不意味着…

零基础安装分布式数据服务注册系统

一、先安装VM虚拟机&#xff0c;安装最新的ubuntu22系统&#xff0c; 先安装mysql&#xff0c; sudo apt install mysql-server sudo mysql_secure_installation 根据自己需求选择 密码安全级别时&#xff0c;选择n 删除匿名用户&#xff1f;&#xff08;按y|Y表示是&…

C++实现线程安全的vector

C++实现线程安全的vector,我们需要确保在任何时候只有一个线程可以修改vector。这通常通过使用互斥锁(例如 std::mutex)来实现。以下是一个简单的实现示例: #include <vector> #include <mutex>template<typename T> class ThreadSafeVector {public: