所有循环语句都是基于某一个条件去重复的执行某一段代码如果 条件不成立, 直接结束循环
循环语句
意义: 帮助我们去执行 重复的 代码 什么是循环语句 根据给出的某些条件, 重复执行一段代码 循环语句
- 初始化
- 条件判断
- 要执行的代码
- 改变自身(改变初始化的内容)
1. while 循环
语法: while (条件) {满足条件时执行的代码}
<script>
// 例子
需求, 想让这个代码 执行 1000 次
var num = 0 // 1. 初始化
while (num < 1000) { // 2. 小括号内的是 条件判断
console.log(1) // 3. 要执行的代码
num++ // 4. 改变自身
}
</script>
do...while 循环
是一个类似 while 的循环语句 while 循环在开始的时候, 会先判断条件是否成立 然后决定是否执行代码 do...while 循环在开始第一次的时候, 不会判断条件, 也就是说, 不管条件成功与失败, 第一次都会执行
<script>
var num = 10
do {
// 要执行的代码
console.log(num)
num--
} while (num < 5)
/**
* do...while 循环的时候, 第一次的时候 不会管这个条件是否成立, 他一定会执行一次
*
*
* 第一次执行 (忽略条件, 直接执行代码)
* num === 10
*
* 因为第一次执行不需要判断条件, 所以直接执行代码
* console.log(num) -> 10
* num-- 后续使用 num 的时候, num 的值就已经发生变化了, 自减1
* 判断条件: num < 5 才能进行下一轮循环
* 此时 num 的值 是 10, 不满足条件, 所以循环到此结束
*
*/
</script>
for 循环
也是 循环语句的一种, 但是 语法上和另外两个 不同!
语法: for (1. 初始化; 2. 条件; 3. 改变自身) { 4.循环要执行的代码 }
<script>
var num = 0
while (num < 3) {
console.log(num)
num++
}
for (var n = 0; n < 3; n++) {
console.log(n)
}
两者结果相同
</script>
目前 for 循环的使用场景来看, 要稍微多一点, 但不代表 可以完全替代 while 循环或者 do...while循环
流程控制语句
<script>
1. break (结束掉整个循环, 不管循环后边还有几轮)
for (var i = 1; i <= 5; i++) {
console.log('我吃了一个包子')
if (i === 3) {
break // 当循环执行到 i === 3 的时候, 此时 这个 if 判断的条件成立, 开始执行内部代码, 也就是执行 break 结束整个循环
}
}
2. continue (跳出当前这一轮循环, 直接开始下一轮循环)
for (var i = 1; i <= 5; i++) {
if (i === 3) {
console.log('第三个包子掉地上了, 我不吃这个包子了')
continue //当循环执行到 i === 3 的时候, 此时 这个 if 判断的条件成立, 开始执行内部代码, 也就是执行 break 跳过这个循环继续执行后面的
}
}
</script>
循环嵌套
注意: 外层循环的变量 与 内层循环的变量 不要相同
<script>
for (var j = 0; j < 3; j++) {
for (var i = 0; i < 3; i++) {
console.log(i)
}
console.log('j 的值为: ', j)
}
/**
* 第一次执行:
* j === 0 运行条件 j < 3 符合条件, 开始执行内部代码
*
* 内部代码:
* 内部循环第一次执行:
* i === 0 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 0
* i++ 也就是下一轮循环开始的时候 i 的值变为了 1
* 内部循环第二次执行:
* i === 1 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 1
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 2
* 内部循环第三次执行:
* i === 2 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印2
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 3
* 内部循环第四次执行:
* i === 3 运行条件 i < 3 目前不符合条件, 结束循环!!!!
*
* console.log(j) 此时会出输出什么 0
*
* j++ 也就是 下一次循环开始的时候 j 的值变了 1
*
*
* 第二次执行:
* j === 1 运行条件 j < 3 符合条件, 开始执行内部代码
*
* 内部代码:
* 内部循环第一次执行:
* i === 0 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 0
* i++ 也就是下一轮循环开始的时候 i 的值变为了 1
* 内部循环第二次执行:
* i === 1 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印 1
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 2
* 内部循环第三次执行:
* i === 2 运行条件 i < 3 符合条件, 开始执行内部代码
* console.log(i) 此时会打印2
* i++ 也就是下一轮循环开始的时候 i 的值 变为了 3
* 内部循环第四次执行:
* i === 3 运行条件 i < 3 目前不符合条件, 结束循环!!!!
*
* console.log(j) 输出的值 1
*
* j++ 也就是 下一次循环开始的时候 j 的值变为了 2
* 后面过程相同直至循环结束
</script>
