通常我们会用循环的方式来遍历数组。但是循环是 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 ;
}
)
先写这么多,晚上工头查进度,得先干活儿了~