JS循环全解
1. while 循环
循环：重复执行某段代码， 而 while : 在…. 期间
语法
// while(循环条件为true){
// 要重复执行的代码(循环体)
// }
本质
循环的本质就是某个变量为起始值,不断产生变价量,慢慢靠近终止条件的过程
三要素
变量起始值
终止条件(没有终止条件就是死循环)
变量变化量(自增自减)
代码演示:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 循环:重复执行某段代码
// while循环语法:
// while(循环条件为true){
// 要重复执行的代码(循环体)
// }
// 循环的本质就是某个变量为起始值,不断产生变价量,慢慢靠近终止条件的过程
// 循环三要素:变量起始值 / 终止条件(没有终止条件就是死循环) / 变量变化量(自增自减)
// while(0){ // 0为false 1为true
// alert('哈哈哈')
// }
let i = 1 // 变量的起始值
while (i <= 3) { // 终止条件
document.write(`我会循环三次<br>`) // 循环体 --- 循环条件为true就一直执行循环体
i++ // 变量变化量(自增自减)
}
// ------------------------- 过程 ------------------------------------
// 执行的顺序就是先执行变量的初始值,然后执行循环,首先循环条件为ture
// 循环开始,进入循环体执行,通过i++的变量变化量开始,i+1=2,再次进入循环中
// 直到循环的条件为 i<=3 为false的时候,循环关闭,代码执行完毕
</script>
</body>
</html>
循环的过程
——————————–过程 ————————————
1. 执行的顺序就是先执行变量的初始值,然后执行循环,首先循环条件为ture
2.循环开始,进入循环体执行,通过i++的变量变化量开始,i+1=2,再次进入循环中
3.直到循环的条件为 i<=3 为false的时候,循环关闭,代码执行完毕
总结
1.跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
2.while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
2. do-while循环
语法
// 能重复循环某段代码
// 循环语法:
// do{ // 先把循环体执行一次
// 要执行的代码(循环体)
// }while(循环条件) // 再执行循环条件
和while的区别:
和while的区别就是,先执行循环体一次,至少会执行一次
代码演示:
因为使用基本与while区分不大,不进行详细的解释!
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 能重复循环某段代码
// 循环语法:
// do{ // 先把循环体执行一次
// 要执行的代码(循环体)
// }while(循环条件) // 再执行循环条件
// 和while的区别就是,先执行循环体一次,至少会执行一次
// ------- 求1-100之间的和 -----------
let sum = 0
let i = 0 // 反正是先循环一次,到时候i=0+1,在进行循环
do {
sum += i
i++
} while (i <= 100)
console.log(sum);
// ------- 求1-100之间的偶数的和 -----------
let sum5 = 0
let a = 1
do {
if (a % 2 == 0) {
sum5 += a
}
a++
} while (a <= 100)
console.log(sum5);
</script>
</body>
</html>
总结
- 先执行do 里面的语句
- 执行完毕后，到 while里面判断条件是否满足，如果满足则回头继续执行do里面的语句，如果条件不满足，则退出循环
两者区分总结:
- do while 语句实现循环控制，do while 和 while 几乎一致
- do-while的循环体至少会被执行1次
- do while 在一些特定场景优势明显，使用相对较少。
3.for循环
作用:
重复执行一段代码
好处：
把声明起始值、循环条件、变化值写到一起，让人一目了然
代码演示:
// for循环
// for(声明变量起始值;循环条件(true);变化值){ // true的时候一直执行 但是变量起始值只是执行一次
// \要执行的代码(循环体)
// }
// 好处:把声明起始值/循环条件/变化值写到了一起,让人一目了然
//---------------for循环输出1-100岁----------
for (let a = 1; a <= 100; a++) {
console.log(`我现在${a}岁了`);
}
循环嵌套:
一个循环里再套一个循环，一般用在for循环里
执行原理:先执行外层循环,外层海执行一次,里层执行完毕后,再执行外层第二次,以此类推!
4.循环结束-continue和break
两者区别
continue：结束本次循环，继续下次循环
break：跳出所在的循环
代码演示!
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// continue:结束本次循环,继续下次循环
// 五个包子,吃到第三个,发现有虫子,不吃了,吃第四个
// break: 跳出所在的循环
// 五个包子,吃了三个不吃了
for (let i = 1; i <= 5; i++) {
if (i === 3) {
// continue,跳过本次循环,关键字后代本次循环代码不执行
continue
}
console.log(`我吃到了第${i}个包子`);
}
let sum = 0
for (let a = 1; a <= 100; a++) {
if (a % 7== 0) { // 跳过7的倍数
continue
}
sum += a
}
console.log(sum);
// break: 跳出所在的循环
for (let i = 1; i <= 5; i++) {
if (i === 3) {
// break,跳过本次循环结束 / 剩下的循环也结束,关键词后边代码不执行
break // 循环的退出
}
console.log(`我吃到了第${i}个包子`);
}
</script>
</body>
</html>
5.以上循环大总结!
代码没有显示案例,我将所有的js案例都存在放在了js小案例专栏中,有兴趣可以查看使用!