那些年有关JavaScript的坑（一）
今天探讨一下使用JavaScript循环时遇到的坑。
for循环
请看下面两个循环，TODO都是相同的，哪个效率高一些呢？
// 定义一个6亿多长度的数组，不要问我为什么定义这个长度，第一它足够大，第二只是为了吉利而已
var arr = new Array(666666666);
for(var i=0;
i如果您仔细分析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这是一个自执行函数（其本质其实是个闭包），函数执行完毕后，变量
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结果是 4var 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);
文章图片
arr和badArr的循环结果
badArr的length是4，但只遍历了3次，所以根据结果可知，数组中如果存在undefined的元素，for...in循环是不会进行遍历的，如果你的数组中有undefined的元素并且你还要用循环的方式来处理它，那么请不要用for...in！！！有关JavaScript的循环，我们可能更多的只是知道怎么用，但不会静下心来深入研究，这极有可能成为我们最容易忽视的大问题，所以有的时候还是需要有匠人情怀的，希望能把这份情怀通过这篇文章分享给大家，共勉！
如您在阅读的过程中发现问题，请联系作者，最后感谢您的支持！
【那些年有关JavaScript的坑（一）】作者 小菜荔枝 转载请联系作者获得授权
推荐阅读
- 慢慢的美丽
- 爱就是希望你好好活着
- 昨夜小楼听风
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 三十年后的广场舞大爷
- 奔向你的城市
- 七年之痒之后
- 2019年12月24日
- 游戏IP（立足于玩家情感的粉丝经济）
- 年味真的是越来越淡了么