首页
学习
活动
专区
圈层
工具
发布
50 篇文章
1
前端学习(0)~vscode工具使用
2
前端学习(1)~html标签讲解(一)
3
前端学习(2)~html标签讲解(二)
4
前端学习(3)~html5详解(一)
5
前端学习(4)~html5详解(二)
6
前端学习(6)~html回顾
7
前端学习(7)~css学习(一):字体属性和文本属性
8
前端学习(8)~css学习(二):背景属性
9
前端学习(9)~css学习(三):样式表和选择器
10
前端学习(10)~css学习:选择器:伪类
11
前端学习(11)~css学习(五):样式表的继承性和层叠性
12
前端学习(12)~css学习(六):盒模型详解
13
前端学习(13)~css学习(七):浮动
14
前端学习(14)~css学习(八):定位属性
15
前端学习(15)~css3学习(九):选择器详解
16
前端学习(16)~css3属性学习(十)
17
前端学习(18)~css3属性学习(十一):动画详解
18
前端学习(19)~css3属性(十二):Flex布局图片详解
19
前端学习(20)~css布局(十三)
20
前端学习(21)~css学习:如何让一个元素水平垂直居中?
21
前端学习(22)~css问题讲解
22
前端学习(23)~js学习(一)
23
前端学习(24)~js学习(二):变量
24
前端学习(25)~js学习(三):变量的数据类型
25
前端学习(26)~js学习(四):基本数据类型vs引用数据类型
26
前端学习(27)~js学习(五): typeof和数据类型转换
27
前端学习(28)~js学习(六):运算符
28
前端学习(30)~js学习(七):流程控制语句-选择结构(if,switch)
29
前端学习(31)~js学习(八):流程控制语句:循环结构(for和while)
30
前端学习(32)~js学习(九):对象简介和对象的基本操作
31
前端学习(33)~js学习(十):函数
32
前端学习(34)~js学习(十一):作用域和变量提升
33
前端学习(35)~js学习(十二):预编译
34
前端学习(36)~js学习(十三):this
35
前端学习(37)~js学习(十四):对象的创建
36
前端学习(38)~js学习(十五):原型对象
37
前端学习(39)~js学习(十六):数组
38
前端学习(40)~js学习(十七):数组的常见方法&数组的遍历
39
前端学习(42)~js学习(十九):内置对象-Date
40
前端学习(43)~js学习(二十):内置对象 - String
41
前端学习(44)~js学习(二十一):包装类
42
前端学习(45)~正则表达式
43
前端学习(46)~事件简介
44
前端学习(47)~DOM简介和DOM操作
45
前端学习(48)~通过style对象获取和设置行内样式
46
前端学习(49)~offset相关属性和匀速动画(含轮播图实现)
47
前端学习(50)~事件的绑定和事件对象
48
前端学习(51)~事件的传播和事件冒泡
49
前端学习(52)~事件委托
50
前端学习(53)~键盘事件

前端学习(31)~js学习(八):流程控制语句:循环结构(for和while)

循环语句:通过循环语句可以反复的执行一段代码多次。

for循环

for循环的语法

语法:

代码语言:javascript
复制
for(①初始化表达式; ②条件表达式; ④更新表达式){
    ③语句...
}

执行流程:

代码语言:javascript
复制
①执行初始化表达式,初始化变量(初始化表达式只会执行一次)

②执行条件表达式,判断是否执行循环:
    如果为true,则执行循环③
    如果为false,终止循环

④执行更新表达式,更新表达式执行完毕继续重复②

for循环举例:

代码语言:javascript
复制
for (var i = 1; i <= 100; i++) {
    console.log(i);
}

while循环语句

while循环

语法:

代码语言:javascript
复制
while(条件表达式){
    语句...
}

执行流程:

代码语言:javascript
复制
while语句在执行时,先对条件表达式进行求值判断:

    如果值为true,则执行循环体:
        循环体执行完毕以后,继续对表达式进行判断
        如果为true,则继续执行循环体,以此类推

    如果值为false,则终止循环

如果有必要的话,我们可以使用 break 来终止循环。

do...while循环

语法:

代码语言:javascript
复制
do{
    语句...
}while(条件表达式)

执行流程:

代码语言:javascript
复制
do...while语句在执行时,会先执行循环体:

    循环体执行完毕以后,在对while后的条件表达式进行判断:
        如果结果为true,则继续执行循环体,执行完毕继续判断以此类推
        如果结果为false,则终止循环

while循环和 do...while循环的区别

这两个语句的功能类似,不同的是:

  • while是先判断后执行,而do...while是先执行后判断。

也就是说,do...while可以保证循环体至少执行一次,而while不能。

break 和 continue

break

  • break可以用来退出switch语句或退出整个循环语句(循环语句包括for循环、while循环。不包括if。if里不能用 break 和 continue,否则会报错)。
  • break会立即终止离它最近的那个循环语句。
  • 可以为循环语句创建一个label,来标识当前的循环(格式:label:循环语句)。使用break语句时,可以在break后跟着一个label,这样break将会结束指定的循环,而不是最近的。

举例1:通过 break 终止循环语句

代码语言:javascript
复制
for (var i = 0; i < 5; i++) {
    console.log('i的值:' + i);
    if (i == 2) {
        break;  // 注意,虽然在 if 里 使用了 break,但这里的 break 是服务于外面的 for 循环。
    }
}

打印结果:

代码语言:javascript
复制
i的值:0
i的值:1
i的值:2

举例2:label的使用

代码语言:javascript
复制
outer:
for (var i = 0; i < 5; i++) {
    console.log("外层循环 i 的值:" + i)
    for (var j = 0; j < 5; j++) {
        break outer; // 直接跳出outer所在的外层循环(这个outer是我自定义的label)
        console.log("内层循环 j 的值:" + j);
    }
}

打印结果:

代码语言:javascript
复制
外层循环 i 的值:0

continue

  • continue可以用来跳过当次循环,继续下一次循环。
  • 同样,continue默认只会离他最近的循环起作用。

举例:

代码语言:javascript
复制
for (var i = 0; i < 10; i++) {
    if (i % 2 == 0) {
        continue;
    }
    console.log('i的值:' + i);
}

打印结果:

代码语言:javascript
复制
i的值:1

i的值:3

i的值:5

i的值:7

i的值:9
下一篇
举报
领券