首页 > 编程知识 正文

JavaScript 数组遍历方法的对比,数组遍历方法

时间:2023-05-04 00:48:41 阅读:180563 作者:3929

前言由于JavaScript的发展,至今已有许多数组循环遍历的方法被开发出来。 执行不同的遍历方法更快。 不同的循环方法在那些场景中被使用。 以下比较:

各种数组遍历的方法for语句代码:

vararr=[ 1,2,4,6 ] for (vari=0,len=arr.length; i len; I ) {console.log(arr[I]}这是标准的for循环写法,也是最传统的语句。 字符串也受支持,将变量I定义为跟踪访问位置的索引。 len是数组的长度,条件是I不超过len。

forEach语句forEach方法执行一次为数组的每个元素提供的CALLBACK函数。 forEach是一种数组方法,可用于将函数应用于数组中的每个元素。 forEach只能在数组中对每个数组元素执行callback函数。 遍历数组,让数组的每个元素做一件事。 跳过已删除的项目(例如,使用delete方法时)或未初始化的项目。 但是,不包括值为undefined的项目。 稀疏序列等; 与map (和reduce )不同,它总是返回undefined值,并且不能进行链调用。 典型的用例是在链的末尾执行副作用。

代码:

vararr=[ 1,5,8,9 ] arr.foreach (function (item ) ) console.log (item ) ); }for-in语句通常使用for-in遍历对象属性,但要读取到. for-in循环中并仅遍历可枚举属性,请使用http://www.com 它通常用于遍历对象,例如非整数类型的名称和继承的原型链上的属性。 使用内置构造函数创建的对象(如Array和Object )将无法遍历从Object.prototype或String.prototype继承的不可枚举属性。

代码:

var obj={ name: 'test ',color: 'red ',day: 'sunday ', number : (varkeyinobj ) console.log (obj [ key ] ) } enumerable语句(ES 6 ) for-of语句包括可重复的对象

代码:

var arr=[{name:'bb'},5,' test']for(itemofarr ) console.log ) item ] } for-of和for-in的区别for-in语句按原始插入顺序

for-of语句只遍历可重复对象的数据。

Other循环方法for-of方法(不更改原始数组) map方法依次为原始数组中的每个元素调用callback函数。 callback组合每次执行的返回值(包括undefined )以形成新数组。 callback函数只在有值的索引上调用。 不会调用没有分配值的索引或使用delete删除的索引。 通过某种计算生成新数组,并将其反映在新数组中

代码:

vararr=[ 1,2,3 ] varfirearr=arr.map (current=current *5)map方法使数组中的前项和后项进行某种计算,并累计最终值

代码:

var wallets=[ 4,7.8,3 ] vartotalmoney=wallets.reduce (function (counted money,wallet ) returncountedmoneywallet } 0 )reduce方法(不更改原始数组) filter为数组中的每个元素调用一次callback函数,并使用callback返回true或true等值的所有元素更新新的只在已经分配的索引上调用callback,而不在已删除或未分配的索引上调用。 跳过未通过callback测试的元素,且不包含在新数组中。 在过滤后的数组中排除满足条件的项目,构成新数组。

代码:

vararr=[ 2,3,4,5,6 ] varmorearr=arr.filter (function (number ) { return number 3} ) 3358 www.Sina.com/me

>every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true。检测数组中的每一项是否符合条件,如果每一项都符合条件,就会返回true,否则返回false,有点像遍历数组且操作callback。只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。

代码:

var arr = [1,2,3,4,5]var result = arr.every(function (item, index) { return item > 0}) some 方法

some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。检查数组中是否有某些项符号条件,如果有一项就返回true,否则返回false,有点像遍历数组或者操作.

代码:

var arr = [1,2,3,4,5]var result = arr.some(function (item,index) { return item > 3}) JavaScritp loop 对比

我创建了两个数组进行对比,为什么要这样区别呢,因为不同类型的数组在javascript内存中保存的地址格式不一样,遍历的时候编辑器会根椐数组元素的类型长度计算,比如说如果数组里面全是Number类的,循环起来会比数组里面包含Number,String,Object混合型的会快,所以创建了两个数组,一个是全undefined数组,一个是混合型数组.

// 一个是空数组var nullarr = new Array(10000) // [undefined,undefined,...undefined]// 另一个带不同类型的数据的数组var dataarr = []for(var i = 0; i < 10000; i++){ if (i % 2 ===0) { dataarr[i] = i.toString() } else { dataarr[i = i }}dataarr // [1,'2',3...,10000]

测试后发现有点奇怪直接检索空数组还是会比数据数组慢这是为什么呢奇怪?为了对比循环的一致性我只选其中带数据的数组dataarr进行测试.

那我们对比一下 for for len forEach for-in for-of map filter 循环的速度

 

 

 

可以看到 for循环的速度是最快的,是最老的循环,也是优化得最好的,其次是for-of这个是es6才新增的循环非常好用,最慢是for-in我们可以作一下速度排序

for > for-of > forEach > filter > map > for-in

这很明显处理大量循环数据的时候还是要使用古老for循环效率最好,但也不是不使用for-in,其实很多时候都要根据实际应该场景的,for-in更多使用在遍历对象属性上面,for-in在遍历的过程中还会遍历继承链,所以这就是它效率比较慢的原因,比如map 速率不高,不过处理在Es6实现数组功能上面非常好用方便,轻松影射创建新数组.或者例如使用Iterator属性也是行的,所以每个循环都有合适使用的地方.

every 和 some 不完全属于数组操作方法

every 和 some 都是判断条件直接返回整个数组Boolean类型的方法.every速度会比some快很多.

 

 

干货

一张图展示JavaScript数组方法

 

 

 

最后

最后不同浏览器内核我相信会有些许差别,有兴趣的朋友可以去测试一下,有任何问题欢迎给博主留言.

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。