js数组对象的遍历

Posted 2020-10-16 最爱小虾

想到的有for in循环；for循环；forEach循环

（1）for in

性能问题：

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

（2）for

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

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

　　　　//do sth with arr[i];

　　}

 

加速方案：

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

var length =arr.length;

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

　　fn(arr[i]);

}

思路：

现在只需要读取一次 array 的 length 属性，速度已经加快

 

加速且优雅：

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

var i = arr.length;

while(i--){

　　fn(arr[i]);

}

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

 

（3）forEach

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

arr.forEach(

　　fn(value,index){

　　　　//Do sth with value ;

　　}

)

注意：

• 这里的 forEach回调中两个参数分别为 value，index，其位置刚好和 jQuery 的$.each 相反；
• forEach 无法遍历对象；
• IE不支持该方法；Firefox 和 chrome 支持；
• forEach 无法使用 break，continue 跳出循环，且使用 return 是跳过本次循环；
• 可以添加第二个参数，为一个数组，回调中的 this 会指向这个数组，若没有添加，则是指向 window；