循环结构
- 作用：只要有重复的思想在里面，就要用到循环；
- 程序的世界中大量的逻辑就是 分支和循环；
- 场景: 新闻列表为循环；
- 初始化
- 条件判断
- 要执行的代码
- 自身改变
while 循环
- while，中文叫 当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了
- 语法 while (条件) { 满足条件就执行 }
- 因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了
// 1. 初始化条件
var num = 0;
// 2. 条件判断
while (num < 10) {
// 3. 要执行的代码
console.log('当前的 num 的值是 ' + num)
// 4. 自身改变
num = num + 1
}
-
如果没有自身改变，那么就会一直循环不停了
-
执行过程：
- 1.先执行条件表达式，得到一个布尔类型的结果
- 2.如果表达式的结果为false，循环结束，不执行循环后面的代码
- 3.如果表达式的结果为true，执行循环体；
- 4.重复1~3的过程，直到表达式结果为false，结束循环；
需求：求1-10数字的和；
/* 分析：
最后得找个变量接受下总和；
以前：
var sum = 1+2+3+4+5+6...
现在：后半部分是个有规律，从1-5，while循环，可以让 1 变化到 5；
sum = sum + 1;
sum = sum + 2;
sum = sum + 3;
sum = sum + 4;
sum = sum + 5;
规律，每次拿到的一个数，都加在同一个变量上面。1-10求和；
while
*/
var he = 0;
var num = 1;
while (num <= 10) {
console.log(num);
// num: 每一次的数；
he = he + num;
num++;
}
// 执行到这里，已经循环完毕，he(把这些有规律的数都加在一起)最终求和；
console.log(he);
/* 过程：
第一次：num:1 1<=10; 执行循环体 sum = sum + 1; num++; num:2;
第二次：num:2 2<=10; 执行循环体 sum = sum + 2; num++; num:3;
....
第十次：num:10 10<=10;执行循环体 sum = sum + 10; num++; num:11;
第11次：num:11 11<=10;false
*/
for循环
- 和 while 和 do while 循环都不太一样的一种循环结构
- 道理是和其他两种一样的，都是循环执行代码的
- 语法： for (var i = 0; i < 10; i++) { 要执行的代码 }
// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
// 这里写的是要执行的代码
console.log(i)
}
// 控制台会依次输出 1 ~ 10
- 执行过程：
- 执行初始化表达式(只执行一次)
- 执行条件表达式
- 如果条件表达式的结果为false, 结束循环；
- 如果条件表达式的结果为true，执行循环体
- 执行自增表达式
- 重复2~5的步骤，直到条件表达式的结果为false，结束循环
案例：求1-10之间所有偶数的和
- 分析：
- 1-10每个数都要过一下
- 找所有满足条件的偶数
- 加起来；
// 定义一个总和
var sum = 0;
// 先求出1-10之间的偶数
for(var i =1; i <= 10; i++){
// console.log(i);
// 判断i是否是2的倍数
if(i % 2 === 0){
console.log(i + '是偶数');
// 把偶数相加
// sum = sum + i;
sum += i;
}
}
案例：打印正方形
- 分析：
- 行和列的点阵；
- 每行，是个循环；
- 每行的每个点，是个循环；
for (var i = 1; i <= 6; i++) {
for (var j = 1; j <= 8; j++) {
document.write('○');
}
document.write('<br>');
}
do-while循环
- 语法：do 执行 代码；
// 下面这个代码，条件一开始就不满足，但是依旧会执行一次 do 后面 {} 内部的代码
var num = 10
do {
console.log('我执行了一次')
num = num + 1
} while (num < 10)
- 执行过程：
- 先执行循环体
- 执行条件表达式
- 如果条件表达式结果为false，结束循环
- 如果条件表达式结果为true，执行循环体
- 重复2~4的步骤，直到条件表达式结果为false，结束循环
- 特点：
- 至少会执行一次；
- 写true也会卡死；
小结
- while、do-while 循环不易看出循环的次数，一般用于未知次数的循环
- for循环明显看出循环的次数，一般用于已知次数的循环；使用最多是for；
- while、for循环可能一次循环都不会执行
- do-while 循环至少执行一次；
break 终止循环
- 在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环
- 比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情
- 要终止循环，就可以直接使用 break 关键字
for (var i = 1; i <= 5; i++) {
// 没循环一次，吃一个包子
console.log('我吃了一个包子')
// 当 i 的值为 3 的时候，条件为 true，执行 {} 里面的代码终止循环
// 循环就不会继续向下执行了，也就没有 4 和 5 了
if (i === 3) {
break
}
}
continue 结束本次循环 在循环中，把循环的本次跳过去，继续执行后续的循环 比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个 跳过本次循环，就可以使用 continue 关键字
总结：这个地方只是用for做终止
- break用于结束整个循环
- continue用于结束整个循环中的一次，结束当前这次循环；
- break和continue后面的代码都不会执行，执行前面的代码；
for (var i = 1; i <= 5; i++) {
// 当 i 的值为 3 的时候，执行 {} 里面的代码
// {} 里面有 continue，那么本次循环后面的代码就都不执行了
// 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
if (i === 3) {
console.log('这个是第三个包子，掉地下了，我不吃了') continue
}
console.log('我吃了一个包子')
}
调试(打断点)
-
对于初学者来说，感受代码的执行过程是非常重要的，浏览器中提供了一个可以观察代码执行过程的工具
-
第一步：F12打开开发者工具，点击Sources选项
-
第二步：在左边找到代码所在文件，双击打开
-
第三步：在中间部分找到自己写的代码，在想要暂停的数字地方打上断点
-
第四步：触发代码的执行，现在我们的代码是在浏览器打开的时候执行，所以我们只要刷新页面即可。当代码执行到断点所在行，会暂停
-
第五步：通过点击右边的控制执行按钮，可以让代码按照你的意愿
