javascript 数组遍历，几种循环方式的比较。

Posted 2020-07-04 加勒比海豹丶

通常我们会用循环的方式来遍历数组。但是循环是 js 性能问题的诱因之一。所以有时候我们不得不在使用循环的方式上略加斟酌。一般我们有以下几种方式来进行数组的遍历：

方式1：

for in 循环：

　　var array = [1,2,3,4,5];

　　for( var val in array ){

　　　　fn(val);

　　}

方式2：

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

　　　　fn(array[i]);

　　}

这两种方法应该非常常见且使用很频繁。但实际上，这两种方法都存在性能问题。

在方式一中，for-in 需要分析出array 的每个属性，这个操作性能开销很大。用在 key 已知的数组上是非常不划算的。所以尽量不要用 for-in，除非你不清楚要处理哪些属性，例如 JSON 对象这样的情况。

在方式2中，循环每进行一次，就要检查一下数组长度。读取属性（数组长度）要比读局部变量慢，尤其是当 array 里存放的都是 DOM 元素，因为每次读取都会扫描一遍页面上的选择器相关元素，速度会大大降低。

所以这时候我们就有必要对方式2进行优化。

加速的 ：

var array = [1,2,3,4,5];

var length = array.length;

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

　　fn(array[i]);

}

现在只需要读取一次 array 的 length 属性，速度已经加快了。但是还能不能更快呢？

事实是，如果循环终止条件不进行比较运算，那么循环的速度还可以更快。

加速且优雅的：

 var array = [1,2,3,4,5];

var i = array.length;

while(i--){

　　fn(arr[i]);

}

其实还有方式3：

for each:

var array = [1,2,3,4,5];

array.forEach(

　　fn(e){

　　　　//Do sth with e ;

　　}

)

先写这么多，晚上工头查进度，得先干活儿了~