《小白H5成长之路18》聊一聊循环语句的用法

《小白H5成长之路18》聊一聊循环语句的用法

“还记的我们之前说过的数组么?”

“记得,一个数组可以包含一组数据。要遍历一个数组可以通过for循环输出数组中的数据。”

“好,小白,你现在定义一个数组,给数组设定一些初始值,然后遍历一下,我看看。”

《小白H5成长之路18》聊一聊循环语句的用法
《小白H5成长之路18》聊一聊循环语句的用法

“这里的i是一个计数器,每循环一次i加1,当i小于数组a长度的时候,每轮执行一次控制台输出,当i等于a的长度的时候循环就会停止。”

“嗯,理解的不错!那如果是一个二维数组怎么遍历?比如这个。”

《小白H5成长之路18》聊一聊循环语句的用法

“这个应该是循环里面嵌套循环吧?我试试”

《小白H5成长之路18》聊一聊循环语句的用法
《小白H5成长之路18》聊一聊循环语句的用法

“我先循环取二维数组的行,然后再把每行看作一个一维数组取值,就可以拿到了。”

“嗯,不错,循环语句在我们制作页面交互的时候经常会遇到,不过在真正做页面功能的时候循环嵌套用到的地方不会太多,因为我们往往会获取到JSON格式的数据,在JSON数据的某个数据段中可能会包含一个新闻列表的二维数组,格式跟我们刚刚看到的数组差不多,可能包含的字段是id、标题和日期,这时我们要把这个二维数组放到页面中的一个名为newsUL的ul容器中进行显示,可以这样来做。”

《小白H5成长之路18》聊一聊循环语句的用法
《小白H5成长之路18》聊一聊循环语句的用法

“由于我们知道数组里面的结构,所以就不需要进行第二次循环了,直接通过索引取对应位置的值就可以。这个方法很重要,你以后可能会用到。”

“另外之前我们也说过通过$("class或者标签")可能会取到一个对象列表,这是也是需要通过循环输出的,你可以试着用for循环输出看一下。另外jQuery里面有一个each循环语句也很有用,你看看我这个示例,在之前写入列表的循环后面添加这样一个each循环。你会发现它可以把所有li的id值输出来。”

《小白H5成长之路18》聊一聊循环语句的用法

“这里的this代表,每次循环取到的li对象。”


想学H5的朋友可以关注老炉,您的关注是我持续更新《小白H5成长之路》的动力!