多语言展示
当前在线:994今日阅读:159今日分享:18

在前端中循环的几种方法

在前端开发中,我们经常需要使用循环来遍历数组元素、DOM节点等操作。本篇经验分享在前端中循环的几种方式。
工具/原料
1

谷歌浏览器

2

Hbuilder开发工具

3

windows

方法/步骤
1

在Hbuilder 创建一个html文件,点击左上角的图标并选择html文件。

2

前端的for循环, 我们在步骤1创建html文件末尾插入一个script标签,并在标签中输入一下代码: var ary=['val1','val2','val3','val4'];for(var i=0;i

3

前端的while循环,我们同样在script标签中使用while循环的遍历数组。代码如下: var ary=['while1','while2','while3','while4','while5']; var i = 0; while(i < ary.length){     console.log(ary[i]);      i++; }while循环区别for循环在于,我们需要在循环体中控制变量i的值,否则会变成死循环。

4

前端的do-while循环,相对的while循环,do-while循环的循环体总是会被执一次。代码如下: var ary=['do-while1','do-while2','do-while3','do-while4','do-while5']; var i = 0; do{    console.log(ary[i]);    i++; }while(i

5

前端的for-in 循环,for in循环 是for循环的增强。for-in循环可以遍历数组,更多用来变量对象。代码如下: for-in 遍历数组: var ary=['for-in 04','for-in 03','for-in 02','for-in 01'];for(var i in ary){        console.log(ary[i]);} for-in 变量对象: var ary={'name':'Tonk','age':23} for(var i in ary){      console.log(i +':'+ary[i]); }

6

前端的forEach()循环,我们也可通过数组的forEach方法来迭代数组,代码如下: var ary=['for-each 04','for-each 03','for-each 02','for-each 01']; ary.forEach(function (i){       console.log(i); })

推荐信息