首页 /  技术专区  /  JavaScript 宽屏模式 >

JavaScript循环结构(while循环、for循环)

1. while循环

循环:重复执行一些操作, while: 在...期间,所以 while循环 就是在满足条件期间,重复执行某些代码

比如我们运行相同的代码输出5次(输出5句“我是坤坤真爱粉”)


1.1 while 循环基本语法

while ( 循环条件 ) {
    // 要重复执行的代码(循环体)
}


释义:

跟 if 语句很像,都要满足小括号里的条件为 true 才会进入 循环体 执行代码。

while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出。


1.2 while 循环三要素

循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程

所以,while循环需要具备三要素:

    1.变量起始值

    2.终止条件(没有终止条件,循环会一直执行,造成死循环)

    3.变量变化量(用自增或者自减)

let i = 1
while (i <= 5) {
    document.write("我是坤坤真爱粉</br>")
    i++
}


1.3 循环退出

循环结束:

break:退出循环

let i = 1
while (i <= 5) {
    if (i === 3) {
        // 吃到第三个时候发现了虫子,从第三个往后也不想吃了
        break
    }
    console.log(`我今天吃了${i}个包子!`)
    i++
}


continue结束本次循环,继续下次循环

let i = 1
while (i <= 5) {
    if (i === 3) {
        // 吃到第三个时候发现了虫子,但是没吃饱,只是第三个有虫子不吃,后面继续吃
        i++
        continue
    }
    console.log(`我今天吃了${i}个包子!`)
    i++
}


区别:

    continue 退出本次循环,一般用于排除或者跳过某一个选项的时候,可以使用 continue

    break 退出整个循环,一般用于结果已经得到,后续的循环不需要的时候可以使用


2. for 循环

2.1 for 循环基本语法

作用:重复执行代码

好处:把声明起始值、循环条件、变化值写到一起,让人一目了然,它是最常使用的循环形式

for (变量起始值; 终止条件; 变量变化量) {
    // 循环体
}


for 循环输出1-100岁

for (let i = 1; i <= 100; i++) {
    console.log(`我今年${i}岁了`)
}


for 循环遍历数组

let arr = ['关羽', '张飞', '黄忠', '赵云', '马超']
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}


2.2 退出循环

    continue 退出本次循环,一般用于排除或者跳过某一个选项的时候,可以使用continue

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        // 吃到第三个时候发现了虫子,但是没吃饱,只是第三个有虫子不吃,后面继续吃
        continue
    }
    console.log(`我今天吃了${i}个包子!`)
}


    break 退出整个 for 循环,一般用于结果已经得到,后续的循环不需要的时候可以使用

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        // 吃到第三个时候发现了虫子,从第三个往后也不想吃了
        break
    }
    console.log(`我今天吃了${i}个包子!`)
}


了解:

    1. while(true)来构造“无限”循环,需要使用 break 退出循环

    2. for(;;)也可以来构造“无限”循环,同样需要使用 break 退出循环


2.3 for 循环嵌套

一个循环里再套一个循环,一般用在 for 循环里

for (外部声明记录循环次数的变量; 循环条件; 变化值) {
    for (内部声明记录循环次数的变量; 循环条件; 变化值) {
        // 循环体
    }
}


输出9x9乘法表

for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= i; j++) {
        document.write(`${j} x ${i} = ${i * j}   `)
    }
    document.write('<br>')
}

Image.png






下一篇: JavaScript函数

头像
0/200
图片验证码