JS数组循环的方式以及效率分析对比
数组的方法
javascript发展到现在已经提供了许多数组的方法,下面这张图涵盖了数组大部分的方法,这篇文章主要说一说数组的遍历方法,以及各自的性能,方法这么多,如何挑选性能最佳的方法对我们的开发有非常大的帮助。
数组遍历的方法
for
- 标准的for循环语句,也是最传统的循环语句
var arr = [1,2,3,4,5] for(var i=0;i<arr.length;i++){ console.log(arr[i]) }
最简单的一种遍历方式,也是使用频率最高的,性能较好,但还能优化
- 优化版for循环语句
var arr = [1,2,3,4,5] for(var i=0,len=arr.length;i<len;i++){ console.log(arr[i]) }
使用临时变量,将长度缓存起来,避免重复获取数组长度,尤其是当数组长度较大时优化效果才会更加明显。
这种方法基本上是所有循环遍历方法中性能最高的一种
foreach
- 普通foreach
对数组中的每一元素运行给定的函数,没有返回值,常用来遍历元素
var arr5 = [10,20,30] var result5 = arr5.foreach((item,index,arr)=>{ console.log(item) }) console.log(result5) /* 10 20 30 undefined 该方法没有返回值 */
数组自带的foreach循环,使用频率较高,实际上性能比普通for循环弱
- 原型foreach
由于foreach是array型自带的,对于一些非这种类型的,无法直接使用(如nodelist),所以才有了这个变种,使用这个变种可以让类似的数组拥有foreach功能。
const nodes = document.queryselectorall('div') array.prototype.foreach.call(nodes,(item,index,arr)=>{ console.log(item) })
实际性能要比普通foreach弱
for...in
任意顺序遍历一个对象的除symbol以外的可枚举属性,包括继承的可枚举属性。
一般常用来遍历对象,包括非整数类型的名称和继承的那些原型链上面的属性也能被遍历。像 array和 object使用内置构造函数所创建的对象都会继承自object.prototype和string.prototype的不可枚举属性就不能遍历了.
var arr = [1,2,3,4,5] for(var i in arr){ console.log(i,arr[i]) } //这里的i是对象属性,也就是数组的下标 /** 0 1 1 2 2 3 3 4 4 5 **/
大部分人都喜欢用这个方法,但它的性能却不怎么好
for...of(不能遍历对象)
在可迭代对象(具有 iterator 接口)(array,map,set,string,arguments)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句,不能遍历对象
let arr=["前端","南玖","ssss"]; for (let item of arr){ console.log(item) } //前端 南玖 ssss //遍历对象 let person={name:"南玖",age:18,city:"上海"} for (let item of person){ console.log(item) } // 我们发现它是不可以的 我们可以搭配object.keys使用 for(let item of object.keys(person)){ console.log(person[item]) } // 南玖 18 上海
这种方式是es6里面用到的,性能要好于forin,但仍然比不上普通for循环
map
map: 只能遍历数组,不能中断,返回值是修改后的数组。
let arr=[1,2,3]; const res = arr.map(item=>{ return item+1 }) console.log(res) //[2,3,4] console.log(arr) // [1,2,3]
every
对数组中的每一运行给定的函数,如果该函数对每一项都返回true,则该函数返回true
var arr = [10,30,25,64,18,3,9] var result = arr.every((item,index,arr)=>{ return item>3 }) console.log(result) //false
some
对数组中的每一运行给定的函数,如果该函数有一项返回true,就返回true,所有项返回false才返回false
var arr2 = [10,20,32,45,36,94,75] var result2 = arr2.some((item,index,arr)=>{ return item<10 }) console.log(result2) //false
reduce
reduce()方法对数组中的每个元素执行一个由你提供的reducer函数(升序执行),将其结果汇总为单个返回值
const array = [1,2,3,4] const reducer = (accumulator, currentvalue) => accumulator + currentvalue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer));
filter
对数组中的每一运行给定的函数,会返回满足该函数的项组成的数组
// filter 返回满足要求的数组项组成的新数组 var arr3 = [3,6,7,12,20,64,35] var result3 = arr3.filter((item,index,arr)=>{ return item > 3 }) console.log(result3) //[6,7,12,20,64,35]
性能测试工具测试
使用工具测试结果如下图所示
手动测试
我们也可以自己用代码测试:
//测试函数 function clectime(fn,fnname){ const start = new date().gettime() if(fn) fn() const end = new date().gettime() console.log(`${fnname}执行耗时:${end-start}ms`) } function forfn(){ let a = [] for(var i=0;i<arr.length;i++){ // console.log(i) a.push(arr[i]) } } clectime(forfn, 'for') //for执行耗时:106ms function forlenfn(){ let a = [] for(var i=0,len=arr.length;i<len;i++){ a.push(arr[i]) } } clectime(forlenfn, 'for len') //for len执行耗时:95ms function foreachfn(){ let a = [] arr.foreach(item=>{ a.push[item] }) } clectime(foreachfn, 'foreach') //foreach执行耗时:201ms function forinfn(){ let a = [] for(var i in arr){ a.push(arr[i]) } } clectime(forinfn, 'forin') //forin执行耗时:2584ms (离谱) function foroffn(){ let a = [] for(var i of arr){ a.push(i) } } clectime(foroffn, 'forof') //forof执行耗时:221ms // ...其余可自行测试
结果分析
经过工具与手动测试发现,结果基本一致,数组遍历各个方法的速度:传统的for循环最快,for-in最慢
for-len > for > for-of > foreach > map > for-in
javascript原生遍历方法的建议用法:
- 用for循环遍历数组
- 用for...in遍历对象
- 用for...of遍历类数组对象(es6)
- 用object.keys()获取对象属性名的集合
为何for… in会慢?
因为for … in语法是第一个能够迭代对象键的javascript语句,循环对象键({})与在数组([])上进行循环不同,引擎会执行一些额外的工作来跟踪已经迭代的属性。因此不建议使用for...in来遍历数组
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: C语言实现带头双向环形链表