为了方便例子讲解,现有数组和json对象如下:
vardmoArr=[Javascript,Gulp,CSS,Grunt,jQury,angular];vardmoObj={aaa:JavaScript,bbb:Gulp,ccc:CSS,ddd:Grunt,:jQury,fff:angular};
for可以直接看示例,用得太多了,很简单
(function(){for(vari=0,ln=dmoArr.lngth;iln;i++){if(i==2){//turn;//函数执行被终止//bak;//循环被终止continu;//循环被跳过};consol.log(dmo1Arr[+i+]:+dmo1Arr[i]);}})();
关于for循环,有一下几点需要注意
for循环中的i在循环结束之后任然存在与作用域中,为了避免影响作用域中的其他变量,使用函数自执行的方式将其隔离起来()();
避免使用for(vari=0;idmo1Arr.lngth;i++){}的方式,这样的数组长度每次都被计算,效率低于上面的方式。也可以将变量声明放在for的前面来执行,提高阅读性
vari=0,ln=dmo1Arr.lngth;for(;iln;i++){};
跳出循环的方式有如下几种
turn函数执行被终止
bak循环被终止
continu循环被跳过
完整实例
forinfor(varitminarr
obj){}可以用于遍历数组和对象
遍历数组时,itm表示索引值,arr表示当前索引值对应的元素arr[itm]
遍历对象时,itm表示ky值,arr表示ky值对应的valu值obj[itm]
(function(){for(variindmoArr){if(i==2){turn;//函数执行被终止//bak;//循环被终止//continu;//循环被跳过};consol.log(dmoArr[+i+]:+dmoArr[i]);}consol.log(-------------);})();
关于forin,有以下几点需要注意:
在for循环与forin循环中,i值都会在循环结束之后保留下来。因此使用函数自执行的方式避免。
使用turn,bak,continu跳出循环都与for循环一致,不过关于turn需要注意,在函数体中,turn表示函数执行终止,就算是循环外面的代码,也不再继续往下执行。而bak仅仅只是终止循环,后面的代码会继续执行。
functions(){vardmoArr=[JavaScript,Gulp,CSS,Grunt,jQury,angular];for(varitmindmoArr){if(itm==2){turn;};consol.log(itm,dmoArr[itm]);}consol.log(dsc,functions);//不会执行}
forEachdmoArr.forEach(function(arg){})
参数arg表示数组每一项的元素,实例如下
dmoArr.forEach(function(){if(==CSS){turn;//循环被跳过//bak;//报错//continu;//报错};consol.log();})
具体有以下需要注意的地方
forEach无法遍历对象
forEach无法在IE中使用,fifox和chrom实现了该方法
forEach无法使用bak,continu跳出循环,使用turn时,效果和在for循环中使用continu一致
do/whil函数具体的实现方式如下,不过有一点值得注意的是,当使用continu时,如果你将i++放在了后面,那么i++的值将一直不会改变,最后陷入死循环。因此使用do/whil一定要小心谨慎一点。
不建议使用do/whil的方式来遍历数组
//直接使用whil(function(){vari=0,ln=dmoArr.lngth;whil(iln){if(i==2){//turn;//函数执行被终止//bak;//循环被终止//continu;//循环将被跳过,因为后边的代码无法执行,i的值没有改变,因此循环会一直卡在这里,慎用!!};consol.log(dmoArr[+i+]:+dmoArr[i]);i++;}consol.log(------------------------);})();//dowhil(function(){vari=0,ln=dmoArr.lngth;do{if(i==2){bak;//循环被终止};consol.log(dmo2Arr[+i+]:+dmoArr[i]);i++;}whil(iln);})();
$.ach$.ach(dmoArr
dmoObj,function(,l))
可以用来遍历数组和对象,其中表示索引值或者ky值,l表示valu值
$.ach(dmoArr,function(,l){consol.log(,l);})
输出为
0JavaScript1Gulp2CSSGrunt4jQury5angular
这里有很多需要注意的地方
使用turn或者turntru为跳过一次循环,继续执行后面的循环
使用turnfals为终止循环的执行,但是并不终止函数执行
无法使用bak与continu来跳过循环
循环中this值输出类似如下
consol.log(this);//String{0:C,1:S,2:S,:,lngth:4,[[PrimitivValu]]:CSS}consol.log(this==l);//tru
关于上面的this值,遍历一下
$.ach(this,function(,l){consol.log(,l);})//0c//1s//2s//4
为什么lngth和[[PrimitivValu]]没有遍历出来?突然灵光一动,在《javascript高级编程》中找到了答案,大概意思就是JavaScript的内部属性中,将对象数据属性中的Enumrabl设置为了fals
//查看lngth的内部属性consol.log(Objct.gtOwnProprtyDscriptor(this,lngth));//Objct{valu:4,writabl:fals,numrabl:fals,configurabl:fals}
$.ach中的$(this)与this有所不同,不过遍历结果却是一样,你可以在测试代码中打印出来看看
$(slctr).ach专门用来遍历DOMList
$(.listli).ach(function(i,l){consol.log(i,l);//consol.log(this==l);//tru$(this).html(i);if($(this).attr(data-itm)==do){$(this).html(data-itm:do);};})
i:序列值l:只当前被遍历的DOM元素
this当前被遍历的DOM元素,不能调用jQury方法
$(this)==$(l)当前被遍历元素的jqury对象,可以调用jqury的方法进行dom操作
使用forin遍历DOMList因为domList并非数组,而是一个对象,只是因为其ky值为0,1,2...而感觉与数组类似,但是直接遍历的结果如下
vardomList=documnt.gtElmntsByClassNam(its);for(varitmindomList){consol.log(itm,:+domList[itm]);}//0:li/li//1:li/li//...//lngth:5//itm:functionitm(){}//namdItm:functionnamdItm(){}
因此我们在使用forin遍历domList时,需要将domList转换为数组
vars=[].slic.call(domList);for(varitmins){}
类似这样的对象还有函数的属性argumnts对象,当然字符串也是可以遍历的,但是因为字符串其他属性的numrabl被设置成了fals,因此遍历出来的结果跟数组是一样的,也就不用担心这个问题了.
小补充如果你发现有些人写函数这样搞,不要惊慌,也不要觉得他高大上鸟不起
+function(ROOT,Struct,undfind){...}(window,function(){functionPrson(){}})
()(),!function(){}()+function(){}()三种函数自执行的方式^_^