今天探讨一下使用JavaScript循环时遇到的坑。
for循环
请看下面两个循环，TODO都是相同的，哪个效率高一些呢？
// 定义一个6亿多长度的数组，不要问我为什么定义这个长度，第一它足够大，第二只是为了吉利而已
var arr = new Array(666666666);
for(var i=0;i<arr.length;i++){
// TODO
}
for(var i=0,length=arr.length;i<length;i++){
// TODO
}
如果您仔细分析for循环的执行顺序，就会发现第二个的效率要高于第一个，我们把for循环看成下面的代码：
for(语句1;语句2;语句3){
语句4;
}
根据执行顺序我们找到了问题所在，每次判断语句2的时候第一种情况的for循环都会取arr.length的值，相当于取了6亿多次！而第二种for循环arr.length的值只在语句1中取一次，可想而知，当遍历的数组长度特别大的时候，第二种的效率明显要高于第一种。
下面我们探讨一下变量i，for循环结束后，i还是会存在的，直到其生命周期结束i的内存才会被回收。如果处理不好会造成内存泄漏，或者变量i跟其他同名变量的值搞混淆，造成不必要的错误，如果想把变量i的内存及时释放了，可以把代码改成：
(function(){
for(var i=0,length=arr.length;i<length;i++){
// TODO
})();
这是一个自执行函数（其本质其实是个闭包），函数执行完毕后，变量i的内存随即被释放。同样，接下来要讲解的for...in循环中的变量i也存在这种问题。
for...in循环
for...in循环应该是大家经常用到的循环方式，它照比上一种循环的优势是，既可以遍历数组也可以遍历对象，有关它的用法在这里就不详述了，扒一扒作者在工作中使用for...in遍历数组时遇到的坑：
var arr = ['leechee','love','flora'];
var badArr = [,'what','about','you'];
// 注意badArr第一个逗号，这是一个length为4，且第一个元素为undefined的数组
// typeof badArr[0] 结果是 'undefined'
// badArr.length 结果是 4
var j = 0;
var str = '';
for(var i in arr){
j++;
str += arr[i] + ' ';
}
console.log("arr循环的次数：" + j);
console.log("arr的输出：%s!", str);
j = 0;
str = '';
for(i in badArr){ // 之前已经说明了，变量i的生命周期还是存在的，所以就不用重新声明定义了
j++;
str += badArr[i] + ' ';
}
console.log("badArr循环的次数：" + j);
console.log("bacArr的输出：%s!", str);
badArr的length是4，但只遍历了3次，所以根据结果可知，数组中如果存在undefined的元素，for...in循环是不会进行遍历的，如果你的数组中有undefined的元素并且你还要用循环的方式来处理它，那么请不要用for...in！！！
有关JavaScript的循环，我们可能更多的只是知道怎么用，但不会静下心来深入研究，这极有可能成为我们最容易忽视的大问题，所以有的时候还是需要有匠人情怀的，希望能把这份情怀通过这篇文章分享给大家，共勉！
如您在阅读的过程中发现问题，请联系作者，最后感谢您的支持！
简书作者 小菜荔枝 转载请联系作者获得授权
