标签:
在$.each中想要终止循环,但是它没有continue或者break这样的终止方式,所以尝试使用return来进行终止,但是发现并没有跳出循环。为了搞清楚js中关于各种遍历方式的不同,通过查询进行了一下总结:
为了方便例子讲解,现有数组和json对象如下:
1 var demoArr = [‘Javascript‘, ‘Gulp‘, ‘CSS3‘, ‘Grunt‘, ‘jQuery‘, ‘angular‘]; 2 var demoObj = { 3 aaa: ‘Javascript‘, 4 bbb: ‘Gulp‘, 5 ccc: ‘CSS3‘, 6 ddd: ‘Grunt‘, 7 eee: ‘jQuery‘, 8 fff: ‘angular‘ 9 };
平时使用最多的,直接看事例
1 (function() { 2 for(var i=0, len=demoArr.length; i<len; i++) { 3 if (i == 2) { 4 // return; // 函数执行被终止 5 // break; // 循环被终止 6 continue; // 循环被跳过 7 }; 8 console.log(‘demo1Arr[‘+ i +‘]:‘ + demo1Arr[i]); 9 } 10 })();
关于for循环,有一下几点需要注意
i
在循环结束之后任然存在与作用域中,为了避免影响作用域中的其他变量,使用函数自执行的方式将其隔离起来()()
;for(var i=0; i<demoArr.length
的方式,这样的数组长度每次都被计算,效率低于上面的方式。也可以将变量声明放在for的前面来执行,提高阅读性。
跳出循环的方式有如下几种
for(var item in arr|obj){}
可以用于遍历数组和对象
1 (function() { 2 for(var i in demoArr) { 3 if (i == 2) { 4 return; // 函数执行被终止 5 // break; // 循环被终止 6 // continue; // 循环被跳过 7 }; 8 console.log(‘demoArr[‘+ i +‘]:‘ + demoArr[i]); 9 } 10 console.log(‘-------------‘); 11 })();
关于for in,有以下几点需要注意:
i
值都会在循环结束之后保留下来。因此使用函数自执行的方式避免。demoArr.forEach(function(arg) {})
参数arg表示数组每一项的元素,实例如下
1 demoArr.forEach(function(val, index) { 2 if (e == ‘CSS3‘) { 3 return; // 循环被跳过 4 // break; // 报错 5 // continue;// 报错 6 }; 7 console.log(val, index); 8 })
具体有以下需要注意的地方
1 var newArr = []; 2 demoArr.forEach(function(val, index) { 3 this.push(val); // 这里的this指向newArr 4 }, newArr)
虽然在原生中forEach循环的局限性很多,但是了解他的必要性在于,很多第三方库会扩展他的方法,使其能够应用在很多地方,比如angular的工具方法中,也有forEach方法,其使用与原生的基本没有差别,只是没有了局限性,可以在IE下使用,也可以遍历对象
1 var result = []; 2 angular.forEach(demoArr, function(val, index) { 3 this.push(val); 4 }, result);
函数具体的实现方式如下,不过有一点值得注意的是,当使用continue时,如果你将i++放在了后面,那么i++的值将一直不会改变,最后陷入死循环。因此使用do/while一定要小心谨慎一点。
不建议使用do/while的方式来遍历数组
1 // 直接使用while 2 (function() { 3 var i = 0, 4 len = demoArr.length; 5 while(i < len) { 6 if (i == 2) { 7 // return; // 函数执行被终止 8 // break; // 循环被终止 9 // continue; // 循环将被跳过,因为后边的代码无法执行,i的值没有改变,因此循环会一直卡在这里,慎用!! 10 }; 11 console.log(‘demoArr[‘+ i +‘]:‘ + demoArr[i]); 12 i ++; 13 } 14 console.log(‘------------------------‘); 15 })(); 16 17 // do while 18 (function() { 19 var i = 0, 20 len = demo3Arr.length; 21 do { 22 if (i == 2) { 23 break; // 循环被终止 24 }; 25 console.log(‘demo2Arr[‘+ i +‘]:‘ + demo3Arr[i]); 26 i++; 27 } while(i<len); 28 })();
$.each(demoArr|demoObj, function(e, ele))
可以用来遍历数组和对象,其中e表示索引值或者key值,ele表示value值
输出为
这里有很多需要注意的地方
return
或者return true
为跳过一次循环,继续执行后面的循环return false
为终止循环的执行,但是并不终止函数执行
专门用来遍历DOMList
因为domList并非数组,而是一个对象,只是因为其key值为0,1,2… 而感觉与数组类似,但是直接遍历的结果如下
因此我们在使用for in 遍历domList时,需要将domList转换为数组
1 var res = [].slice.call(domList); 2 for(var item in res) {}
有三种能提升逼格的函数自执行的方式:()()
, !function() {}()
+function() {}()。
标签:
原文地址:http://www.cnblogs.com/hbujt/p/5559482.html