JavaScript 基础之循环结构

搬水泥的小匠
478 阅读8分钟

本章目标

  • 掌握 for 语句的使用
  • 掌握 while 和 do...while 语句的使用
  • 掌握 continue 和 break 的用法

本章任务

  • 完成本章案例
  • 完成仿 siri 项目中循环让用户输入和退出的功能

循环结构

假设你要给你心意的对象说100次，“你最棒”鼓励，通过我们之前所学的方式的话，可以这样做：

console.log('老洪，你最棒');
console.log('老洪，你最棒');
console.log('老洪，你最棒');
console.log('老洪，你最棒');
console.log('老洪，你最棒');
……
console.log('老洪，你最棒');

我们需要把一行重复的代码，敲打100遍，太痛苦了。聪明的你已经想到可以用 CV(复制/粘贴) 大法，复制粘贴100行也很麻烦。

当一件相似的事情重复执行很多次的时候我们可以使用循环结构快速解决。

生活中的循环

操场一圈是400米，在运动会的时候，2000米的跑步比赛，我们需要绕操场跑5圈，如下图：

image.png 这就是一个循环，那么，在这个过程中，其实我们动作只是跑一圈，剩下的过程只是在重复。

那我们来总结下循环：

  1. 重复执行一件相似的事情
  2. 循环的次数是有限制的

下面我们一起学习 JavaScript 中的三种基本循环结构的语句，分别是：

  • while 循环
  • do...while 循环
  • for 循环

while 循环

  • 语法
while (条件表达式) {
    循环体
}
    • 条件表达式用来限定循环的次数
    • 循环体是重复执行的一件相似的事情
  • 执行过程
    1. 先执行条件表达式，得到一个布尔类型的结果
    2. 如果表达式的结果为 false,循环结束，执行循环后面的代码
    1. 如果表达式的结果为 true，执行循环体
    2. 重复执行条件表达式，得到一个布尔类型的结果
    1. 重复 b~d 的过程，直到表达式结果为 false，结束循环
  • 示例1

循环输出100次，“我爱你”。

// 定义循环变量，控制循环的次数
let i = 0;
// 判断条件是否成立
while (i < 100) {
  // 循环体
    // console.log('教瘦，我爱你');
  console.log(i + ' 教瘦，我爱你');
  // 循环遍历自身加1
  i++;
}
    • 注意： 如果第九行代码 i++ 忘记的话，循环条件会永远满足，此时被称为死循环。应该避免出现死循环
  • 示例2

求1~100之间的所有整数和

// 循环遍历
let i = 1;
// 求和变量
let sum = 0;
​
while (i <= 100) {
    sum += i;
  // sum = sum + i;
  i++;
}
console.log('1-100之间所有数的和：' + sum);

do...while 循环

  • 语法
do {
    循环体
} while (条件表达式);
    • 条件表达式用来限定循环的次数
    • 循环体是重复执行的一件相似的事情
  • 执行过程(和 while 非常相似)
    1. 先执行循环体
    2. 再执行条件表达式，得到一个布尔类型的结果
    1. 表达式的结果为 false，循环结束，执行循环后面的代码
    2. 如果表达式的结果为 true，重复执行循环体
    1. 重复 a~d 的过程，直到表达式结果为 false，结束循环
  • 示例1

循环输出100次，“我爱你”。

// 定义循环变量，控制循环的次数
let i = 0;
​
do {
    console.log(i + ' 教瘦，我爱你。');
  i++;
} while (i < 100);
    • 注意： 如果第九行代码 i++ 忘记的话，循环条件会永远满足，此时被称为死循环。应该避免出现死循环
  • 示例2

求1~100之间的所有整数和

// 循环遍历
let i = 1;
// 求和变量
let sum = 0;
​
do  {
    sum += i;
  // sum = sum + i;
  i++;
} while (i <= 100);
​
console.log('1-100之间所有数的和：' + sum);
  • while 和 do...while 的区别
    • while 先判断循环条件再执行循环体
    • do ... while 先执行循环体再判断循环条件

仿 siri 项目循环输入

在分支结构中，我们已经实现了 siri 项目的部分功能，可以让用户输入编号选择要做的事情，但是一次只能执行一个任务。

学完两种循环结构之后，我们可以在之前的功能中增加循环执行的能力，继续实现 siri 项目的下面两个功能：

  • 当用户使用完一个功能后，继续提示用户使用该程序
let running = true;
while (running) {
  ……
}
  • 当用户点击取消或者输入q的时候退出程序(退出循环)
// 退出循环，只要让 running = false 即可
// prompt() 方法，点击取消按钮的时候返回 null
​
case 'q':
case null:
  running = false;
  break;
  • 完整代码如下：
let running = true;
​
while (running) {
  let msg = prompt('您好，我是您的私人助理 siri \n' +
                   '请输入编号或《关键词》选择功能，按q退出 \n' +
                   '1. 计算《总和》\n' +
                   '2. 获取《时间》\n' +
                   '3. 讲个《笑话》\n' +
                   '4. 来个《抽奖》'
                  );
​
  switch (msg) {
    case '1':
    case '总和':
      console.log('计算总和');
      break;
    case '2':
    case '时间':
      console.log('获取当前时间');
      break;
    case '3':
    case '笑话':
      console.log('随机讲笑话');
      break;
    case '4':
    case '抽奖':
      console.log('随机抽奖');
      break;
    case 'q':
    case null:
      running = false;
      break;
    default:
      console.log('您说什么，我听不太懂');
      break;
  }
}

for 循环

下面我们来学第三种循环结构：for 循环。for循环结构是后续使用最多的一种。在循环次数固定的场景下我们都会选择使用 for 循环结构。例如：打印100次“我爱你”、求1-100所有数的和，这些循环次数固定的情况下，使用 for 循环是最方便的。

  • 语法
for (初始化表达式; 条件表达式; 更新循环遍历){
  循环体
}
  • 执行过程!

image.png

    1. 首先执行初始化表达式
    2. 执行条件表达式
    1. 如果条件表达式的结果为 false，结束循环，继续执行循环后面的代码
    2. 如果条件表达式的结果为 true，执行循环体
    1. 更新循环遍历
    2. 重复b~e的步骤，直到条件表达式的结果为false，结束循环
  • 示例
// 求1-3的和（断点调试）
let sum = 0;
for (let i = 1; i <= 3; i++) {
  sum = sum + i;
}

案例

  • 求1-100之间所有偶数的和
let sum = 0;
​
for (let i = 1; i <= 100; i++) {
  if (i % 2 !== 0) {
    sum += i;
  }
}
console.log(sum);
  • 打印正方形
for (let i = 0; i < 6; i++) {
  let str = '';
  for (let j = 0; j < 6; j++) {
    str += '* ';
  }
  str += '\n';
  console.log(str);
}

控制台默认对输出重复的内容进行分组输出(不重复输出相同内容，在前面用数字标识)，如下图：

image.png 关闭分组输出，可以打印重复内容

JavaScript 基础之循环结构

  • 打印99乘法表

JavaScript 基础之循环结构

let str = '';
for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= i; j++) {
    str += j + '*' + i + '=' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

总结

  • while 和 do ... while 一般用于循环次数不固定的场景
  • for 循环一般用户循环次数已知的场景
  • while 和 for 循环如果循环条件不成立可能一次循环体都不执行
  • do ... while 至少执行一次循环体

continue 和 break

在循环的过程中我们可以通过 continue 终止本次循环继续下一次循环，或者通过 break 终止全部循环。

continue

  • 结束本次循环继续下一次循环，其后面的代码也不会执行。
// 计算1-100以内所有奇数的和
​
let sum = 0;
for (let i = 1; i <= 100; i++) {
  if (i % 2 === 0) {
    // 如果当前i是偶数，终止当前循环，继续下一次循环(后面的代码不再执行)
    continue
  }
  sum += i;
}
console.log(sum);

break

  • 终止循环，后续代码不再执行
// 找到100-999之间的第一个水仙花数并打印
for (let i = 100; i <= 999; i++) {
  let bai = parseInt(i / 100);
  let shi = parseInt(i % 100 / 10);
  let ge = parseInt(i % 10);
​
  if (i === bai * bai * bai + shi * shi * shi + ge * ge * ge) {
    console.log(i);
    // 终止循环
    break;
  }
}

这个题目修改下，如果要找到 100到999 之间的最后一个水仙花数该如果实现？

在浏览器中调试代码

调试过程

  • 过去调试JavaScript的方式
    • alert()
    • console.log()
  • 断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

  • 调试步骤
浏览器中按F12-->sources/来源-->找到需要调试的文件-->在程序的某一行设置断点
  • 调试中的相关操作
Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。

  1. 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
  2. 今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。

调试程序

下面的代码期望运行的效果：

  • 当输入超过5的数字，输出倒立的等腰三角形
  • 到输入小于5的数字，希望输出的是两个对立的等腰三角形
  • 提示：document.write() 方法的作用是在网页上输出内容，也可以输出 HTML 标签
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      text-align: center;
      line-height: 25px;
    }
  </style>
</head>
<body>
  <script>
    var t = prompt('请输入一个整数', '');
    if (t > 5) {
      document.write('<div>');
      for (var i = t, i > 0; i--) {
        for(var j = 0; j < i; j++) {
          document.write('*  ');
        }
        document.wirte('<br />');
      }
      document.write('</div>');
    } else {
      document.write('<div>');
      for (var k = t; k < 0; k--) {
        for (var m = 0; m < k; m++) {
          document.write('*  ');
        }
        document.write('<br />');
      }
      for (var n = 1; n <= t; n++) {
        for (var h = 0; h < n; h++) {
          document.write('*  ');
        }
        document.write('<br />');
      }
      document.write('</div>');
    }
  </script>
</body>
</html>
  • 语法错误
  • 逻辑错误

作业

  • 打印100–200之间所有能被3或者7整除的数 (使用 for 循环)
  • 入职薪水10K，每年涨幅5%，50年后工资多少？
  • 弹出一个输入框，让用户输入账号和密码（正确的账号是admin，密码是123456），如果用户输入正确，提示登录成功 如果输入错误，提示继续输入如果输错3次，提示账号被冻结，不能再输入(使用 do...while 或者 while循环)
  • 老师问学生,这道题你会做了吗?如果学生答"会了(y)",则可以放学.如果学生不会做(n),则老师再讲一遍,再问学生是否会做了......直到学生会为止,才可以放学. 直到学生会或老师给他讲了5遍还不会,都要放学
  • 2006年培养学员80000人，每年增长25%，请问按此增长速度，到哪一年培训学员人数将达到20万人？ 2006 800002007 1000002008 1250002009 1562502010 19w2011 xxxxx
  • 在控制台打印9*9乘法表
avatar
文章
阅读
粉丝