JavaScript各种遍历方式详解,有

  为了方便例子讲解,现有数组和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循环被跳过

  完整实例

  forin

  for(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);//不会执行}

  forEach

  dmoArr.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(){}()三种函数自执行的方式^_^

  via:







































治愈白癜风光疗费用
北京那个医院治疗白癜风比较好



转载请注明:http://www.guyukameng.com/html/html1/3245.html