JS几种数组遍历方式总结_数组遍历的几种方式

于 2024-07-04 20:38:20 发布
阅读量241 收藏 6
点赞数 5
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84617080/article/details/140189286
版权

});




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


#### 第五种:foreach变种


代码如下:

Array.prototype.forEach.call(arr,function(el){

});




简要说明: 由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。


实际性能要比普通foreach弱


#### 第六种:forin循环


代码如下:

for(j in arr) {

}




简要说明: 这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中


**它的效率是最低的**


#### 第七种:map遍历


代码如下:

arr.map(function(n){

});




简要说明: 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach


#### 第八种:forof遍历(需要ES6支持)


代码如下:

for(let value of arr) {

});




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


### 各种遍历方式的性能对比


上述列举了几种方式都有一一做过对比分析，基本上可以得出的结论是:


**普通for循环才是最优雅的**


(PS:以上所有的代码都只是进行空的循环，没有再循环内部执行代码，仅仅是分析各自循环的时间而已)


#### 性能对比截图


##### 分析结果1


以下截图中的数据是，在chrome (支持es6)中运行了100次后得出的结论(每次运行10次,一共10个循环，得到的分析结果) ![](https://img-blog.csdnimg.cn/img_convert/64d31b012d4e0e2043e5e6b4fdd0b4db.png)


可以看出,forin循环最慢。优化后的普通for循环最快


##### 分析结果2


以下截图数据是，在chrome (支持es6)中运行了1000次后得出的结论(每次运行100次,一共10个循环，得到的分析结果) [外链图片转存中...(img-2IPRgbUw-1720096688024)]



   1. javascript遍历的常用的遍历方法是for循环和for-in，ES5的时候加上了forEach方法（IE9以下不支持）。







|  |  |
| --- | --- |
| 
 1 
 

 2 
 

 3 
 

 4 
 

 5 
 

 6 
 

 7 
 

 8 
 

 9 
 

 10 
 

 11 
 

 12 
 

 13 
 

 14 
 

 15 
  | 

`/****js原生遍历****/`


`//for循环遍历数组`


`for`
`(`
`var`  
 `i=0;i<arrTmp.length;i++){`



`console.log(i+`
`": "`
`+arrTmp[i])`


`}`


   
 

`//for-in遍历对象属性,i指代属性名`


`for`
`(`
`var`  
 `i`
`in`  
 `objTmp){`



`console.log(i+`
`": "`
`+objTmp[i])`


`}`


   
 

`//forEach遍历数组，三个参数依次是数组元素、索引、数组本身`


`arrTmp.forEach(`
`function`
`(value,index,array){`



`console.log(value+`
`","`
`+index+`
`","`
`+array[index])`


`})`

 |





    2. for-in循环是为了遍历对象而设计的，事实上for-in也能用来遍历数组，但定义的索引i是字符串类型的。如果数组具有一个可枚举的方法，也会被for-in遍历到，例如：







|  |  |
| --- | --- |
| 
 1 
 

 2 
 

 3 
 

 4 
 

 5 
 

 6 
 

 7 
 

 8 
 

 9 
 

 10 
  | 

`//for-in遍历数组`


`for`
`(`
`var`  
 `i`
`in`  
 `arrTmp){`



`console.log(i+`
`": "`
`+arrTmp[i])`


`}`


`//for-in会遍历到数组的属性`


`arrTmp.name=`
`"myTest"`
`;`


`for`
`(`
`var`  
 `i`
`in`  
 `arrTmp){`



`console.log(i+`
`":"`
`+arrTmp[i])`


`}`


`//输出 0:value1  1:value2  2:value3  name:myTest`

 |





    3. for循环和for-in能正确响应break、continue和return语句，但forEach不行。







|  |  |
| --- | --- |
| 
 1 
 

 2 
 

 3 
 

 4 
 

 5 
 

 6 
 

 7 
 

 8 
 

 9 
 

 10 
 

 11 
 

 12 
 

 13 
 

 14 
 

 15 
  | 

`//只会输出value1 value2`


`for`
`(`
`var`  
 `i=0;i<arrTmp.length;i++){`



`console.log(i+`
`": "`
`+arrTmp[i]);`



`if`
`(i==1){`



`break`
`;`



`}`


`}`


   
 

`//会输出value1 value2 value3`


`arrTmp.forEach(`
`function`
`(value){`



`console.log(value+);`



`if`
`(value==1){`



`return`
`;`



`}`


`})`

 |





　　4. ES6中，新增了for-of遍历方法。它被设计用来遍历各种类数组集合，例如DOM NodeList对象、Map和Set对象，甚至字符串也行。官方的说法是：



> 
> for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩
> 
> 
> 







|  |  |
| --- | --- |
| 
 1 
 

 2 
 

 3 
 

 4 
 

 5 
 

 6 
 

 7 
 

 8 
 

 9 
 

 10 
 

 11 
 

 12 
 

 13 
 

 14 
 

 15 
 

 16 
 

 17 
 

 18 
 

 19 
  | 

`// for-of遍历数组，不带索引，i即为数组元素`


`for`
`(`
`let`  
 `i of arrTmp){`



`console.log(i)`


`}`


`//输出 "value1" "value2" "value3"`


   
 

`// for-of遍历Map对象`


`let`  
 `iterable =`
`new`  
 `Map([[`
`"a"`
`, 1], [`
`"b"`
`, 2], [`
`"c"`
`, 3]]);`


`for`  
 `(`
`let`  
 `[key, value] of iterable) {`



`console.log(value);`


`}`


`//输出 1 2 3`


   
 

`// for-of遍历字符串`


`let`  
 `iterable =`
`"china中国"`
`;`


`for`  
 `(`
`let`  
 `value of iterable) {`



`console.log(value);`


`}`


`//输出 "c" "h" "i" "n" "a" "中" "国"`

 |





　　5. 上面的方法，注重点都是数组的元素或者对象的属性值。如果单纯的想获取对象的属性名，js有原生的Object.keys()方法（低版本IE不兼容）,返回一个由对象的可枚举属性名组成的数组：  








|  |  |
| --- | --- |
| 
 1 
 

 2 
 

 3 
 

 4 
 

 5 
 

 6 
 

 7 
 

 8 
 

 9 
 

 10 


### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

>**HTML/CSS**
>


**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/745603538ed8efa02916cf62c4e3e6df.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/ef63d96d1252f445eb687da0a27e6a7e.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串


主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

>**HTML/CSS**
>


**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

[外链图片转存中...(img-ItkhV1jp-1720096688025)]

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中...(img-7sXy9sWQ-1720096688025)]

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/95fa3c1b5486107d3ea36c2a37381a48.webp?x-oss-process=image/format,png)
2401_84617080
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS常用的几种数组遍历方式以及性能分析对比实例详解
11-28
本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比。分享给大家供大家参考，具体如下： 前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列，本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后，觉得这种方式挺好的，于是抽取了核心逻辑，封装成了模板，打算拓展成一个系列，本文则是系列中的第二篇，JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
10-29
在JavaScript编程中，有几个关键概念和技术点在标题和描述中被提及：浏览器判断、绑定事件、`arguments`对象转换为数组以及数组遍历。这些是JavaScript开发中的基础但至关重要的部分，下面将逐一进行详细解释。 1. ...
JS数组的几种遍历方法。
javaStudentZhang的博客
06-20 398
var arr = [1,5,3,4,45,6,78,4]; console.log(6 in arr) //=&gt;true for(let i in arr){ console.log(arr[i]) }; //=&gt;1,5,3,4,45,6,78,4 arr.forEach(function(v){ docum...
JS数组遍历的几种方法
热门推荐
关注最新技术问题并持续维护更新
04-27 11万+
for     最简单的一种循环遍历方法，也是使用频率最高的一种，可优化 var arr = [1, 2, 3, 4, 5, 6] for(var i = 0; i < arr.length; i++) { console.log(arr[i]) } // 1 2 3 4 5 6     优化：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显 var...
js遍历数组的几种方法
lala7827的博客
09-08 113
今天是一个搬运工， 实现当输入第一项的时候带出后三项的值（前提：有一个存储所需要的内容的信息（数组[]）） 思路：遍历数组 、当值相等时，给其他三项赋值 js遍历数组的方法可以参考此链接 ...
JS遍历数组的几种方法
a_xixi的博客
07-06 748
1.普遍的遍历方式 for(var i= 0;i&lt;arr.length;i++){ console.log("第一种遍历方式："+arr[i]); } 2.for…in两个形参，i为数组下标，arr为要遍历的数组 for(var i in arr){ console.log("第二种遍历方式："+arr[i]) } 3.forEach 一个参数为数组的元素...
JS 数组遍历的方法
06-02
本篇文章将详细介绍几种常见的JS数组遍历方法，并通过实例来加深理解。 1. `for`循环 这是最基础的遍历方式，通过索引来访问数组中的每个元素： ```javascript let arr = [1, 2, 3, 4, 5]; for (let i = 0; i ; i+...
Javascript中二维数组的遍历
04-26
Javascript中二维数组的遍历 在 Javascript 中，二维数组的遍历是一种非常常见的操作。二维数组，即多维数组的特殊...通过本文，我们希望您能够更好地理解 Javascript 中的二维数组遍历，并更好地应用于实际项目中。
js中数组的遍历的几种方法
1000001000
02-21 9万+
javascript中数组的几种遍历方法
js中遍历数组对象的几种方式
benben0729的专栏
07-07 1万+
第一种：最直接明了的方法for（var i=0;i&lt;arr.length;i++）    //TODO Something第二种：使用for...infor (var item in arr)    //TODO Something第三种：    使用for ...of 这个需要ES6支持for (let item of arr)    //TODO Something...
js几种常见的遍历数组方法
youngKing0615的博客
07-08 1527
1.for 通过for循环遍历数组元素，可以把计数器 i 当成数组元素的下标来访问 var arr = [1, 2, 3, 4, 5] for (var i = 0, len = arr.length; i < len; i++) { console.log(arr[i]) } 2.for-in //遍历的是下标 var arr = [1, 2, 3, 4, 5] for (var index in arr) { console.log(arr[index]) } 3.for-of
JavaScript数组遍历的几种方式
相濡以沫的博客
11-09 798
JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代码如下:for(j = 0; j < arr.length; j++) {} 简要说明: 最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间 第二种:优化版for循环代码如下:for(j = 0,len
JS遍历数组的十五种方法
材女的进击
05-25 2万+
这个遍历器生成函数大致的模样可以用ES5 语法模拟出来：这个函数返回一个next() 方法，每调用next() 方法，都会返回数据结构的当前成员的信息。每个数据结构都有一个默认的遍历器，例如数组的默认遍历器是values()，在没有明确指定遍历器的情况下，这些数据结构都会使用默认的遍历器。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并没有改变原来的数组。forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值，原数组不变。
JS遍历数组的12种方法
iteval
07-15 7297
JS遍历数组的12种方法 const arr = [1, 2, 3]; 1. for 普通版 for (let i = 0; i < arr.lengthl; i++) { // ... } 优化版 // 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。 let len = arr.length; for (let i = 0; i < len; i++) { // ... } for 循环和 for…in 能正确响应 break、c
JS遍历数组的十种方法总结
最新发布
大圣归来圣骑士清欢的博客
05-11 1631
JS遍历数组的十种方法
JS 数组遍历方法合集
措手不及ya的博客
01-18 1326
JS 数组遍历的方法合集（for 循环、forEach、map、some、every、filter、find、findIndex、reduce、reduceRight）
javascript数组遍历的几种常用方法性能分析对比
09-07
JavaScript数组遍历有多种常用方法，例如for循环、forEach方法、map方法、reduce方法等。我们可以通过性能分析对比它们的效率。 首先是for循环，它是最基本的遍历方式。通过使用索引来访问数组元素，可以在遍历过程中直接对元素进行操作。这种方法是最快的，因为它没有额外的函数调用开销，并且可以灵活地控制遍历过程。 其次是forEach方法，它是ES5中引入的数组方法之一。它提供了一种简洁易懂的遍历方式，可以通过回调函数来处理每个元素。然而，forEach方法不能中途跳出循环，也不能直接修改原数组的值。因此，如果需要在循环中进行复杂的操作，它可能会导致一些性能上的损失。 再次是map方法，它也是ES5中的数组方法之一。它可以通过回调函数对数组中的每个元素进行操作，并将结果存储在一个新的数组中返回。map方法会创建一个新的数组，因此在性能方面相对较低。如果只需要遍历数组而不需要返回新的数组，推荐使用forEach方法，它更高效。 最后是reduce方法，它也是ES5中的数组方法之一。它可以通过回调函数对数组中的每个元素进行累积操作，最终返回一个累积值。reduce方法是一种非常灵活且强大的遍历方式，但相对而言性能相对较低。如果只需要遍历数组而不需要累积值，使用forEach方法会更高效。 综上所述，for循环是性能最高的遍历方式，但不如其他方法简洁易懂。根据实际需求来选择合适的遍历方法，可以在性能和代码可读性之间找到平衡点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值