详细介绍javascript中的几种for循环的区别

偶然间见到了forEach循环，感受很新奇，就研究了一下，顺带着把js中的几种for循环作了一个比较。

首先，简单说一下，js中一共大概有四种for循环：（1）、那种简单常见的for循环；（2）、for-in循环；（3）、forEach循环；（4）、es6中新增的for-of循环。

（1）简单的for循环

   例如

1  var arr = [1,2,3,4];
2         for(var i=0;i<arr.length;i++){
3             console.log(arr[i])
4         }

View Code

当遍历的数组长度不变时，能够选择将数组的长度用一个变量保存下来，这样会得到更好的效率。

好比

1  var arr = [1,2,3,4];
2         for(var i= 0,len = arr.length;i<len;i++){
3             console.log(arr[i])
4         }

View Code

（2）for-in循环，我通常是在遍历对象的时候用的比较多。其实for-in循环也能够遍历数组，只不过有时候会出现一些问题。好比：

1         var arr = [1,2,3,4,5];
2         arr.name = 'lili';
3         for(var i in arr){
4             console.log(arr[i])
5         }
6 //  会打印出 1,2,3,4,5，lili  

View Code

对，没错，它把最后添加的属性也给遍历了。咱们知道，在js中，数组Array也是属于对象的，因此，for-in在遍历对象的时候，会把全部的属性都会遍历一遍而不单单是索引（另，数组中的索引不是Number类型的，而是String类型的），还包括原型链上的可枚举属性。因而可知，for-in并不适合来遍历数组。可是还有一种特殊的状况，那就是稀疏数组。好比：

1        var arr = [];
2         arr[0] = 100;
3         arr[10] = 102;
4         arr[15] = 104;
5         for(var i in arr){
6             console.log(arr[i])
7         }
8 //    输出结果是 100,102,104

View Code

对比普通的for循环：

 1    var arr = [];
 2         arr[0] = 100;
 3         arr[10] = 102;
 4         arr[15] = 104;
 5 //        for(var i in arr){
 6 //            console.log(arr[i])
 7 //        }
 8 ////    输出结果是 100,102,104
 9 
10         for(var i=0;i<arr.length;i++){
11             console.log(arr[i])
12         }
13 //输出 100，undefined，102，undefined，104

View Code

for-in只遍历了三次，而普通的for循环遍历了16次。只要处理得当，for-in循环在数组循环当中也能发挥巨大的做用。

（3）forEach循环，这个我在项目中仍是不多用到，偶然间看ife的题的时候看见了，就很好奇。

forEach方法为数组中含有有效值的每一项执行一次callback函数，那些已经删除的或者没有被赋值的项会被跳过。callback函数会被依次传入三个参数，

1.数组当前项的值，2.数组当前项的索引，3.数组对象自己。若是只传入一个参数，则默认是数组当前项。例如：

 1         var arr = [1,2,3,4,5];
 2         arr.forEach(function(i){
 3             console.log(i)
 4         })
 5 //        输出为1,2,3,4,5
 6         arr.forEach(function(value,index,arr){
 7             console.log("当前项"+value)
 8             console.log("当前项索引"+index)
 9             console.log("数组自己"+arr)
10         })
11 //        输出 当前项1，当前索引0，数组自己【1，2,3,4,5】
12 //        输出 当前项2，当前索引1，数组自己【1，2,3,4,5】
13 //        依次类推。。。。。。

View Code

须要注意的是，forEach遍历的范围在第一次调用callback的时候就已经肯定了。调用callback以后，再添加的项就不会被遍历了。而且forEach不能break和return，若是想要跳出循环，就要用到try语句，因此forEach虽然有时候很方便简短，可是也有坑的时候哇。。

 

最后一种for-of循环，我们稍后再续。。。。。