JS中循环遍历数组的几种常用方式总结

article/2025/9/10 8:37:08

在这里插入图片描述

第一种：for循环，也是最常见的

最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);}

打印结果：
在这里插入图片描述

第二种：优化版for循环

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
let len = arr.length
for (let i = 0; i < len; i++) {console.log(arr[i]);}

简要说明：使用临时变量，将长度缓存起来，避免重复计算数组长度，当数组较大时优化效果才会比较明显
缺点：不能在for循环中操作list的大小，比如除去或新加一个元素。
这种方法基本上是所有循环遍历方法中性能最高的一种

第三种：forEach（）

在这里插入图片描述

对于forEach方法除非使用try/catch，否则无法中途停止循环，break或者return都无法使循环中途停止。而for…of循环可以与break，continue和return配合使用，中途停止循环：

1.）forEach() 遍历普通数组

const arr = [11, 22, 33, 44, 55, 66, 77, 88];
arr.forEach(item => {//forEach循环console.log(item);});

打印结果：
在这里插入图片描述

2.）forEach() 遍历对象类型数组

const arrObj = [{id: 1,name: "张三"},{id: 2,name: "李四"},{id: 3,name: "王五"}];
arrObj.forEach(item => {console.log(item.id + "-------" + item.name);
});

打印结果：
在这里插入图片描述

简要说明: 数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱。原因如下：

一般情况下，普通的 for 循环确实比 forEach 循环有更好的性能，这是因为 forEach 本质上是一个函数调用的过程，而函数调用会带来额外的开销。
具体来说，forEach 循环在每次迭代时都需要执行一次回调函数，并且要对回调函数的执行上下文进行绑定，这样就需要创建和销毁大量的函数堆栈，导致额外的系统开销。而普通的 for 循环则不需要执行函数调用操作，在每次迭代中直接访问元素，极大地提高了代码的执行速度。

第四种：map（）

定义和用法

1. map即是 “映射”的意思 ，原数组被“映射”成对应新数组
2. map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
3. map() 不会改变原始数组。
4. map() 不会对空数组进行检测。
5. map支持return

在这里插入图片描述

 const arr = [11, 22, 33, 44, 55, 66, 77, 88];var newArr = arr.map((value, index) => {console.log(value + "----" + index);return value * 10;});console.log(newArr);

打印结果：
在这里插入图片描述
简要说明: 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

forEach（）和map（）区别：

  1. forEach()和map()方法通常用于遍历Array元素
  2. forEach：返回undefined；用来遍历数组中的每一项，不影响原数组
  3. map：返回一个包含已转换元素的新数组；支持return，相当于与原数组克隆了一份，把克隆的每项改变了，也不影响原数组

第五种：filter遍历

定义和用法

filter用于对数组进行过滤。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter() 不会对空数组进行检测；不会改变原始数组

语法
array.filter(function(currentValue,index,arr), thisValue)

在这里插入图片描述

let arr = [56, 15, 48, 3, 7];let newArr = arr.filter(function (value, index, array) {return value % 2 === 0;
});console.log(newArr)
// [56, 48]

第六种：for…of 方法

作为ES6新增的循环方法，个人觉得相当好用，而且方便。这个方法避开了for-in循环的所有缺陷。而且，它可以正确响应break、continue和return语句。

//循环数组
let arr = ['123','qwewq','sfds'];
for(let item of arr){console.log(item);    //item指的的就是数组每一项的值。不是索引。
}
//输出
//'123'
//'qwewq'
//'sfds'

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。但是for of也有一个致命伤，就像例子看到的，没有索引。对，这是优点也是缺点。遍历数组对象，直接就是item.属性(或者item[属性]),而不用像for循环那样arr[index].属性(arrindex)。但是你有的时候真的就得用到index。不好意思，只能把数组转成Map()。但我觉得真的需要用到index，还是换成forEach吧。

简要说明: 这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环

第七种：for…in 方法

for in循环是用来遍历对象的。要知道JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。（注意：遍历时不仅能读取对象自身上面的成员属性，也能遍历出对象的原型属性）

语法
let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指对象的属性名
console.log(prop, obj[prop]);
}
// 输出:
// a,1
// b,2
// c,3

for in同样可以用来循环数组,但是不推荐这么做。由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for in循环可以直接循环出Array的索引，但得到的是String而不是Number，所以一旦你想用这个index去进行计算，就会出错。而且因为会遍历原型属性，所以可能得出的结果不会是你想要的(具体细节不多说，需要了解的自己查询，反正很多坑)。虽然可以用hasOwnProperty()方法避免这个缺陷，但是何必呢，循环方法那么多，换一个就是了。

for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}

为什么用for … in?
在这里插入图片描述
简要说明: 这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中
它的效率是最低的

关于for …of和for …in区别
https://blog.csdn.net/weixin_42695446/article/details/84531600

第八种：find方法

  • 遍历数组，找到第一个符合条件的项，并返回该项；不会继续遍历数组；否则返回undefined
  • 不会改变数组
[1,4,-5,10].find((n) => n < 0 )
//-5

上面代码找出数组中第一个小于0的成员

[1,5,10,15].find(function(value,index,arr){return value > 9
})
//10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

第九种：findIndex方法

  • 遍历数组找到第一个符合条件的项，并返回该项的索引值；不会继续遍历数组；否则返回-1。
  • 不会改变数组
[1,5,10,15].findIndex(function(value,index,arr){return value > 9
})
//2

findIndex() 当中的回调函数也是接收三个参数，与find() 相同。
在这里插入图片描述
在这里插入图片描述

第十种：Array.some() 方法

1）如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测。
2）如果没有满足条件的元素，则返回false。
3）返回值是布尔值

注意：

1) some() 不会对空数组进行检测。
2) some() 不会改变原始数组。

 var ages = [3, 18, 17, 16]var checkoutVal = function checkout (age) {console.log(age >= 18) // false true  有一个满足条件的会停止检测剩余的元素return age >= 18}console.log(ages.some(checkoutVal)) // true

let someArr = [2,3,4];
let someResult = someArr.some((item, index)=>{return item > 3
});
console.log(someResult);
// 结果为: true

第十一种：Array.every() 方法 （所有的，每一个）

1）如果数组中有一个元素不满足，则整个表达式返回false；且剩余的元素不会再进行检测
2）如果所有元素都满足条件，则返回true。
3）返回值是布尔值

注意：

1) some() 不会对空数组进行检测。
2) some() 不会改变原始数组。

  var ages = [3, 18, 17, 16]const fn = (currentValue) => currentValue < 40console.log(ages.every(fn)) // true  值全都符合函数条件

let everyArr = [2,3,4];
let everyResult = everyArr.every((item, index)=>{return item > 0
});
console.log(everyResult);
// 结果为: true

Array.some() 和Array.every() 的区别？？？

在这里插入图片描述

第十二种：reduce() 方法

1）接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
2）第二个参数作为第一次调用的a的值

// reducer
let reduceArr = [0,1,2,3,4]
let reduceResult = reduceArr.reduce((a, b)=>{return a + b;
});
console.log(reduceResult);
// 结果: 10

上述列举了几种方式都有一一做过对比分析，基本上可以得出的结论是:
普通for循环才是最优雅的，优化后的for循环最快

注意：
数组方法无法中途停止循环，所以都不可以使用break和continue；
for循环之类的不可以return，但是能正常使用break和continue；


http://chatgpt.dhexx.cn/article/8HmnjkHI.shtml

相关文章

3D人脸识别技术，正在全面入侵我们的日常生活

3D人脸识别技术，正在全面入侵我们的日常生活

最近“人脸识别技术”因丰巢智能柜“刷脸取件”被小学生用一张面部打印照片破解的bug事件刷屏引发热议，整个过程无需本人在场便被轻易破解实在令人震惊，虽然目前该功能已经下线，但刷脸背后技术是否安全、面部信息泄露等问题仍是大众最为关心的问题。 事实上，现在人们听到“…
阅读更多...
3D人脸识别——点云转化为可训练的图片

3D人脸识别——点云转化为可训练的图片

1.场景介绍 3D人脸点云不容易直接训练&#xff0c;需要将其转化为二维图片。大部分论文是这样做的&#xff1a;首先求出每个点所在平面的法向量&#xff0c;发向量与水平面和竖直平面的夹角组成两个通道&#xff0c;深度图是一个通道。然后&#xff0c;将这三个通道归一到[0~25…
阅读更多...
人脸识别

人脸识别

自20世纪下半叶&#xff0c;计算机视觉技术逐渐地发展壮大。同时&#xff0c;伴随着数字图像相关的软硬件技术在人们生活中的广泛使用&#xff0c;数字图像已经成为当代社会信息来源的重要构成因素&#xff0c;各种图像处理与分析的需求和应用也不断促使该技术的革新。计算机视…
阅读更多...
人脸识别技术

人脸识别技术

2D人脸识别技术早在安防、监控、门禁、考勤中就已有应用&#xff0c;其硬件结构相当于一颗RGB摄像头&#xff0c;通过捕捉人脸图像&#xff0c;从图像中提取对应的特征&#xff0c;依据尺度特征不变的原理&#xff0c;和已经录入的图像库进行对比判定。目前基于神经网络的人脸识…
阅读更多...
什么是人脸识别？

什么是人脸识别？

什么是人脸识别&#xff1f; 人脸识别是一种用于识别陌生人或从特定人的脸中认证特定人的身份的方法。它是计算机视觉的一个分支&#xff0c;但是人脸识别是专门的&#xff0c;并且在某些应用程序中带有社交功能&#xff0c;并且存在一些欺骗的漏洞。 人脸识别如何工作&#…
阅读更多...
揭秘“2020年度AI生产力创新奖”：清微智能3D人脸识别模组

揭秘“2020年度AI生产力创新奖”：清微智能3D人脸识别模组

“2020年度AI生产力创新奖“作为2020年行业内的最后一个奖项&#xff0c;在年前的最后两周才正式公布。姗姗来迟的评选结果&#xff0c;也从一个侧面证明了该奖项评比的激烈程度。清微智能与百度、京东、浪潮等企业一起&#xff0c;共同斩获IOT与智慧城市领域的”AI生产力创新奖…
阅读更多...
android 脸部识别之3D,这两款安卓手机也支持3D结构光人脸识别

android 脸部识别之3D,这两款安卓手机也支持3D结构光人脸识别

1、oppo Find X-4999元(8128G) oppo Find X为滑屏(双轨潜望结构)设计&#xff0c;3D结构光模组隐藏在内部&#xff0c;当需要解锁时会自动探出&#xff0c;不用时又会自动收回。 OPPO Find X的O-Face 3D结构光可以在人面部投射15,000个识别点&#xff0c;以此来为用户的面部构建…
阅读更多...
android 脸部识别之3D,Android Q新功能曝光了：原生支持3D人脸识别

android 脸部识别之3D,Android Q新功能曝光了：原生支持3D人脸识别

原标题&#xff1a;Android Q新功能曝光了&#xff1a;原生支持3D人脸识别 【PConline资讯】如今不少机型已经支持3D人脸识别&#xff0c;像iPhoneX、iPhoneXR、iPhoneXSMax、华为Mate20Pro、OPPOFindX、小米8透明探索版等等。 值得注意的是&#xff0c;目前原生Android并没有提…
阅读更多...
嵌入式3D人脸识别（笔记）

嵌入式3D人脸识别（笔记）

3D人脸识别在人脸识别中所占比例58%&#xff08;2020年&#xff09;&#xff0c;3D是趋势。 3D人脸误识率1/100万&#xff0c;2D人脸误识率1/1万。 应用人脸活体、高精度识别。 几种深度相机比较&#xff1a; 双目&#xff1a;运算量大&#xff0c;受光照影响&#xff08;过…
阅读更多...
AI深度 | 3D人脸识别和双目结构光惯导

AI深度 | 3D人脸识别和双目结构光惯导

文/纽豪斯 发布/AI智道 一文看尽双目摄像、结构光、ToF和激光雷达技术&#xff1b;一文深入了解小觅智能、奥比中光、华捷艾米、的卢深视、Pico和镭神智能&#xff1b;AI赋能2大趋势、4大核心技术。 前言 纽豪斯刚刚完成《AI深度&#xff08;上&#xff09; | 3D人脸识别和结构…
阅读更多...
3D人脸识别——人脸点云前处理

3D人脸识别——人脸点云前处理

1. 获取点云与显示点云 博主做项目是用realsense系列获取深度信息的&#xff0c;获得对齐的RGB图和深度图。 获取数据的代码如下&#xff1a; ## License: Apache 2.0. See LICENSE file in root directory. ## Copyright(c) 2017 Intel Corporation. All Rights Reserved.###…
阅读更多...
3d人脸识别算法opencv_10行代码实现人脸识别

3d人脸识别算法opencv_10行代码实现人脸识别

什么是人脸识别 人脸识别，是基于人的脸部特征信息进行身份识别的一种生物识别技术。用摄像机或摄像头采集含有人脸的图像或视频流，并自动在图像中检测和跟踪人脸，进而对检测到的人脸进行脸部识别的一系列相关技术，通常也叫做人像识别、面部识别。 目前的人脸识别技术已经非…
阅读更多...
3D人脸识别准确率提升，成未来发展趋势

3D人脸识别准确率提升，成未来发展趋势

https://www.toutiao.com/a6678896218048823811/ 随着技术升级&#xff0c;生物识别技术已经被应用到越来越多的行业当中&#xff0c;渗透人们生活的方方面面&#xff0c;你的面部、眼睛、步态乃至表情都在告诉识别系统&#xff1a;你是谁。而近些年越来越火的人脸识别更是在证…
阅读更多...
2D与3D人脸识别详解

2D与3D人脸识别详解

人脸是人体最重要的生物特征之一，而人脸研究主要集中在人脸识别方面，人脸的表达模型分为2D人脸和3D人脸。2D人脸识别研究的时间相对较长，方法流程也相对成熟，在多个领域都有使用，但由于2D信息存在深度数据丢失的局限性，无法完整的表达出真实人脸，所以在实际应用中存在着…
阅读更多...
一文读懂3D人脸识别十年发展及未来趋势

一文读懂3D人脸识别十年发展及未来趋势

来源丨机器之心 人脸识别 是机器学习社区研究最多的课题之一&#xff0c;以 3D 人脸识别为代表的相关 ML 技术十年来都有哪些进展&#xff1f; 这篇文章给出了 答案。 近年来&#xff0c;人脸识别的研究已经转向使用 3D 人脸表面&#xff0c;因为 3D 几何信息可以表征更多的鉴别…
阅读更多...
商汤科技3D人脸识别技术加持智能门锁，帮你解放双手

商汤科技3D人脸识别技术加持智能门锁，帮你解放双手

刚刚过去的元旦佳节&#xff0c;很多人选择聚餐聚会&#xff0c;共同迎接新年的到来&#xff0c;或是跟恋人一起度过浪漫的跨年夜。 在外有欢声笑语的氛围&#xff0c;回到家也应该有舒适的惬意。若是来到家门口&#xff0c;还要放下拎着的大包小包年货&#xff0c;腾出手来去…
阅读更多...
3D人脸识别

3D人脸识别

目录 导语 3D人脸基础知识 初识3D人脸 相机模型 3D相机 3D人脸数据 3D人脸相关任务 常见Pipeline 3D人脸识别 3D人脸重建 总结 导语 随着深度学习技术的推进&#xff0c;人脸相关任务研究也跃升为学界和业界的热点。人们所熟知的人脸任务一般包括人脸检测&#xff0…
阅读更多...
一文为你详解2D与3D人脸识别有什么区别?

一文为你详解2D与3D人脸识别有什么区别?

最近业界内刮起了一股“人脸识别安全”的大讨论&#xff0c;小到个人大到超市以及银行&#xff0c;都在使用这个刷脸认证或支付&#xff0c;说它好吧&#xff0c;确实解决了无接触&#xff0c;快速高效等问题&#xff0c;你说它不好吧&#xff0c;也是有原因的&#xff0c;比如…
阅读更多...
图像算法之3D人脸识别技术原理概述

图像算法之3D人脸识别技术原理概述

随着深度学习技术的进步&#xff0c;面部相关任务的研究也成为学术界和工业界的热门话题。众所周知的面部任务通常包括面部检测&#xff0c;面部识别&#xff0c;面部表情识别等&#xff0c;其主要使用2D RGB面部&#xff08;通常包括一些纹理信息&#xff09;作为输入; 3D扫描…
阅读更多...
vue 小结

vue 小结

var vm new Vue({el : // 挂载点})string 字符串。indexof&#xff08;‘x’&#xff09; 如果含有x 则返回 -1 数组添加&#xff1a;push 数组截取&#xff1a;splice
阅读更多...
推荐文章

Copyright @ 2022~2023