-- 循环结构,就是根据某些给出的条件,重复的执行同一段代码
-- 循环必须要有某些固定的内容组成
- 初始化
- 条件判断
- 要执行的代码
- 自身改
目录
while循环
- 语法 :while (条件) { 满足条件就执行 }
- 注意:
- 此语句是先判断条件,再决定是否执行语句或程序块
- 当条件为true时,执行循环体的语句或程序块,反之不执行循环体
- 在循环体中要有改变条件的语句,否则会成为死循环
// 1. 初始化条件
var num = 0
// 2. 条件判断
while (num < 10) {
// 3. 要执行的代码
console.log('当前的 num 的值是 ' + num)
// 4. 自身改变
num = num + 1
}
案例:倒序输出 5 4 3 2 1
<!DOCTYPE html>
<html lang="en">
<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>倒序输出 5 4 3 2 1</title>
</head>
<body>
<script>
var num = 5
while (num > 0) {
console.log(num)
num--
}
</script>
</body>
</html>
do-while循环
- 语法: do { 要执行的代码 } while (条件)
- do-while与while的区别
- while循环会先进行条件判断,满足就执行,不满足就不执行了
- do-while循环不管条件,先执行一回,然后在开始进行条件判断
var num = 10
do {
console.log('我执行了一次')
num = num + 1
} while (num < 10)
案例:正序输出1-10
<!DOCTYPE html>
<html lang="en">
<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>正序输出</title>
</head>
<body>
<script>
var num = 1
do {
console.log(num)
num++
} while (num <= 10)
</script>
</body>
</html>
for循环
- 语法: for (var i = 0; i < 10; i++) { 要执行的代码 }
// 把初始化,条件判断,自身改变,写在了一起
for (var i = 1; i <= 10; i++) {
// 这里写的是要执行的代码
console.log(i)
}
// 控制台会依次输出 1 ~ 10
- 执行顺序
案例一:1+2+3+4+...100的和
<!DOCTYPE html>
<html lang="en">
<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>1+2+3+4+...100的和</title>
</head>
<body>
<script>
var sum = 0
for (var i = 1; i <= 100; i++) {
sum += i
}
console.log(sum)
</script>
</body>
</html>
案例二:打印出1000-2000年中所有的闰年,并以每行四个数的形式输出
<!DOCTYPE html>
<html lang="en">
<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>打印出1000-2000年中所有的闰年,并以每行四个数的形式输出</title>
</head>
<body>
<script>
var count = 0
for (var year = 1000; year <= 2000; year++) {
if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
document.write(year + '\t')
count++
}
if (count === 4) {
document.write('<br>')
count = 0
}
}
</script>
</body>
</html>
双重for循环
- for循环可以重复执行一个操作,当然也可以重复执行另一个循环,即for循环里面嵌套for循环
- 循环的嵌套: 外层循环循环一次,内层就要循环完
- 代表:九九乘法表
<!DOCTYPE html>
<html lang="en">
<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>九九乘法表</title>
</head>
<body>
<script>
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write(i + 'x' + j + '=' + i * j + ' ')
}
document.write('<br>')
}
</script>
</body>
</html>
终止循环 break
- 在循环没有进行完毕的时候,只要设置的条件满足,可提前终止循环
- 比如:我要吃五个包子,吃到三个的时候,不能在吃了,我就停止吃包子这个事情
- 要终止循环,直接使用break关键字
for (var i = 1; i <= 5; i++) {
// 没循环一次,吃一个包子
console.log('我吃了一个包子')
// 当 i 的值为 3 的时候,条件为 true,执行 {} 里面的代码终止循环
// 循环就不会继续向下执行了,也就没有 4 和 5 了
if (i === 3) {
break
}
}
案例:打印100内能被4整除的前5个数
<!DOCTYPE html>
<html lang="en">
<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>打印100内能被4整除的前5个数</title>
</head>
<body>
<script>
var count = 0
for (var i = 1; i <= 100; i++) {
if (i % 4 == 0) {
console.log(i)
count++
}
if (count == 5) {
break
}
}
</script>
</body>
</html>
结束本次循环 continue
- 在循环中,把循环的本次跳过去,继续执行后续的循环
- 比如:吃五个包子,吃第三个的时候,包子掉地下了不能吃了,跳过第三个,继续吃第四个和第五个包子
- 跳过本次循环,使用continue关键字
for (var i = 1; i <= 5; i++) {
// 当 i 的值为 3 的时候,执行 {} 里面的代码
// {} 里面有 continue,那么本次循环后面的代码就都不执行了
// 自动算作 i 为 3 的这一次结束了,去继续执行 i = 4 的那次循环了
if (i === 3) {
console.log('这个是第三个包子,掉地下了,我不吃了')
continue
}
console.log('我吃了一个包子')
}
案例:打印1-10内,除了5的所有数
<!DOCTYPE html>
<html lang="en">
<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>打印1-10内,除了5的所有数</title>
</head>
<body>
<script>
for (var i = 1; i <= 10; i++) {
if (i == 5) {
continue
}
console.log(i)
}
</script>
</body>
</html>