JavaScript循环结构

作者: t遇见 | 来源:发表于2022-09-28 17:38 被阅读0次

js基础
JavaScript循环结构
04-JS基础-流程控制
JavaScript-04
萍萍的JavaScript教程其二三大结构
流程控制的基本概念
06-JavaScript流程控制
Js事件循环
JS基础---03循环
JavaScript 五、while循环 for循环

一、循环
1、for循环
（1） for基础语法
需求：火车站售票，需要将0~10号票全部售出

// 售票程序
// 1、普通的实现流程，代码的重复量过大；企业开发时代码审计不会通过
// console.log("售出1号票")
// console.log("售出2号票")
// console.log("售出3号票")
// console.log("售出4号票")
// console.log("售出5号票")
// console.log("售出6号票")
// console.log("售出7号票")
// console.log("售出8号票")
// console.log("售出9号票")
// console.log("售出10号票")

// 2、循环实现，减少重复的代码
// var i = 1：初始变量，循环执行的时候 这段代码只会执行一次
// i<= 10：循环条件，当条件的结果为true的时候，执行循环内部的代码
// i++：自增运算，循环内部的代码执行完成后，对循环变量进行自增
for(var i = 1; i <= 10; i++) {
  console.log("sale No." + i + " tickets")
}

image.png

image.png
（2） break关键字
作用：不论循环条件是否为true，直接终止循环，跳出循环后继续执行循环后面的代码
需求：火车站售票(1~10号票)，但是售出第6张票时，执行反恐演练；火车站提前关闭！

// 3、正常售票，售出第6张票时，反恐演练提前关闭火车站
for(var i = 1; i <= 10; i ++){
  console.log("售出了 No." + i + "号票")
  // 当售出第6张票时，关闭火车站/售票窗口
  if( i === 6 ){
    console.log("执行反恐演习，关闭火车站")
    // 循环中一旦执行了break这行代码，不论循环的条件是否为true，这个循环直接结束
    break
  } 
}
console.log("美好的一天结束了..")

image.png
（3） continue关键字
作用：终止本次循环（不再继续执行本次循环后面的代码），直接开始下一次循环
火车站售票：预留6号票和8号票

// 4、continue关键字
// for(var i = 1; i <= 10; i++) {
//   if(i === 6 || i === 8) {
//     console.log("保留票，不能售出")
//   } else {
//     console.log("售出了.No." + i + "号票")
//   }
// }
for(var i = 1; i <= 10; i++) {
  if(i === 6 || i === 8) {
    console.log("保留票，不能售出")
    // 中断本次循环（本次循环结束，后面的代码不再执行；直接开始下一次循环）
    continue
  }
  console.log("售出了.No." + i + "号票")
}

image.png 2、while循环
JavaScript中while循环区分为

while循环
do-while循环
（1）基本语法
while循环基本语法

// 练习1、while循环
// 循环变量，写在循环外面
var i = 1
// 循环上，添加条件判断
while(i <= 10) {
  console.log("售出了" + i + "号票")
  // 循环内部，修改循环变量
  i++
}
// 练习2、break关键字
var i = 1
while(i <= 10) {
  console.log("售出了" + i + "号票")
  if(i === 6) {
    console.log("反恐演练，提前下班")
    break
  }
  i++
}
// 练习3、continue关键字
var i = 1
while(i <= 10) {
  if(i === 6 || i === 8) {
    console.log("保留票---------------")
    // 注意：一定要记得写循环变量的修改
    i++
    continue
  }
  console.log("售出了" + i + "号票")
  // 注意：一定要记得写循环变量的修改
  i++
}

do-while循环基本语法

// 4、do-while循环
// 循环条件写在外面
var i = 1;
// 先循环，后判断条件（do-while循环不论条件是否为true，至少会执行一次循环代码）
do {
  console.log("售出了" + i + "号票")
  // 注意：一定要记得修改循环变量，避免造成死循环的情况
  i++
}while(i <= 10)

3、死循环
循环中有一种非常特殊的循环：循环条件可能永远为true，这样的循环会一直进行下去，直到循环条件主动的修改为false或者循环内部主动的break

开发过程中，如果有固定的循环结束条件，尽量避免出现死循环
如果不确定循环结束条件，需要通过死循环完成重复执行，也需要明确可能跳出循环的条件
案例：完成一局游戏的时候，可以通过死循环的方式控制单局游戏的进行，游戏结束后用户只能通过再来一局的方式开启新的游戏！

<body>
  <button id="start">开始游戏</button>
  <button id="restart">再来一局</button>
  <script>
    // 定义一个变量，控制当前游戏是否已经开始
    // true: 游戏已经开始
    // false: 游戏尚未开始
    var flag = false
    var _start = document.getElementById("start")
    var _restart = document.getElementById("restart")
    // 开始游戏
    _start.onclick = function() {
      if(!flag) { // 游戏尚未开始，开启游戏
        // 游戏已经开始，修改flag
        flag = true
        // 开启游戏
        _start.innerText = "暂停游戏"
        _restart.style.display = "inline-block"
        // 重复执行某些事情
        while (flag) {
          var result= confirm("游戏正在进行中....(是否确定退出游戏)")
          if(result) {
            alert("游戏准备退出")
            flag = false
            // 游戏重启
            _start.innerText = "开始游戏"
            _restart.style.display = "none"
          }
        }
      }
    }
    _restart.onclick = function() { // 再来一局
      // 游戏已经开始的情况下，才能再来一局
      if(flag) {
        // 游戏一旦重启，修改flag
        flag = false
        // 游戏重启
        _start.innerText = "开始游戏"
        _restart.style.display = "none"
      }
    }
  </script>
</body>

二、循环案例开发
(1） 1..100的和
for循环、while循环、do-while循环实现

// 1、模拟 1..5的和：观察代码，哪些代码是重复的？重复的代码中哪些部分是有规律变化的，将重复的代码我们一般通过循环进行处理，有规律变化的部分会通过循环变量处理
// var sum = 0; // 记录总和
// sum += 1
// sum += 2
// sum += 3
// sum += 4
// sum += 5
// console.log("1..5的和：", sum)
// 2、循环简化，1..5的和
// var sum = 0
// for(var i = 1; i <= 5; i++){
//   sum += i
// }
// console.log("1..5的和：", sum)
// 3、循环计算1..100的和
var sum = 0
for(var i = 1; i <= 100; i++){
  sum += i   // 等价于  sum = sum + i
}
console.log("1..100的和：", sum)

（2）1..100奇数的和、偶数的和

// 4、1..100奇数的和
var sum = 0; // 记录总和的变量
for(var i = 1; i <= 100; i++) {
  // 如果i是奇数的话，添加到总和中
  if(i % 2 == 1) {
    // 奇数
    sum += i   // sum = sum + i
  }
}
console.log("1..100奇数的和：", sum)
// 5、1..100偶数的和
var sum = 0; // 记录总和的变量
for(var i = 1; i <= 100; i++) {
  // 判断是否偶数
  if(i % 2 == 0) {
    sum += i
  }
}
console.log("1..100偶数的和：", sum)

(3）循环打印图形

// 1、打印三角形
// 第一行1列、第二行2列、第三行3列..
for(var i = 1; i <= 5; i++) {
  // 网页中写入一个字符内容
  // document.write("*<br/>")
  // 第一行输出1列；第二行输出2列...
  for(var j = 1; j <= i; j++) {
    document.write("*")
  }
  // 一行内容输出完成后，打印换行
  document.write("<br />")
}
// 2、打印三角形
// 第一行1列、第二行3列、第三行5列...
for(var i = 1; i <= 5; i++){
  // document.write("*<br/>")
  // 第一行1列、第二行3列、第三行5列...
  for(var j = 1; j <= (2*i - 1); j++) {
    document.write("*")
  }
  document.write("<br />")
}
// 3、打印等腰三角形
for(var i = 1; i <= 5; i++){
  // document.write("*<br />")
  // 打印空格
  for(var m = 5; m > i; m--){
    document.write("<span></span>")
  }
  // 打印符号
  for(var j = 1; j <= (2*i-1); j++){
    document.write("<span>*</span>")
  }
  document.write("<br />")
}
// 4、打印菱形
// 输出9行
for(var i = 1; i <= 9; i++) {
  // document.write("*<br />")
  // 输出正三角形
  for(var m = 5; m > i; m--) {
    document.write("<span></span>")
  }
  for(var j = 1; j <= (2*i-1) && i <= 5; j++) {
    document.write("<span>*</span>")
  }
  // 输出倒三角形
  // 输出空格(6-1 7-2 8-3 9-4)
  for(var y = 1; y <= (i-5); y++){
    document.write("<span></span>")
  }
  // 输出符号
  // 6行-7列 7行-5列 8-3列 9-1列
  // (9-6)*2+1 = 7
  // (9-7)*2+1 = 5
  // (9-8)*2+1 = 3
  // (9-9)*2+1 = 1
  for(var x = 1; x <= ((9-i)*2+1) && i > 5; x++){
    document.write("<span>*</span>")
  }
  document.write("<br />")
}
// 5、打印长方形
for(var i = 1; i <= 6; i++) {
  // document.write("=<br />")
  for(var j = 1; j <= 50; j++) {
    // 第一行/最后一行全部输出
    if(i!==1 && i!== 6){
      // document.write("=")
      // break
      if(j === 1 || j === 50){
        document.write("<span>=</span>")            
      } else {
        // console.log("<span></span>")
        document.write("<span></span>")
      }
      continue
    }
    document.write("<span>=</span>")
  }
  document.write("<br />")
}

（4）水仙花数

// 水仙花数
// 是一个三位数
// 每个位数上的数字的3次方的和，等于它本身
// 1^3 + 5^3 + 3^3 = 153
for(var i = 100; i <= 999; i++){
  // 拆分数字
  var b = parseInt(i / 100)
  var s = parseInt(i % 100 / 10)
  var g = parseInt(i % 10)

  // 判断是否水仙花数
  if(b*b*b + s*s*s + g*g*g === i) {
    console.log("水仙花数：", i)
  }
}

（5）打印10个斐波那契数列

// 2、斐波那契数列
var num1 = num2 = 1
var next = 0
console.log(num1, num2)
for(var i = 1; i <= 10; i++) {
  next = num1 + num2
  console.log(next)
  // 交换数据
  num1 = num2 // num2数据存放到num1中
  num2 = next // next数据存放到num2中
}
// 3、打印100内斐波那契数列
var num1 = num2 = 1
var next = 0
console.log(num1, num2)
// 死循环，获取100内斐波那契数列
// for(;;){}，省略了数据初始化、数据条件和循环变量自增，但是不能省略分号
for(;;) {
  next = num1 + num2
  if(next > 100){
    break
  }
  console.log(next)
  // 交换数据
  num1 = num2 // num2数据存放到num1中
  num2 = next // next数据存放到num2中
}

有和我一样在学习WEB前端的看完点个关注和赞吧，每天都会更新不一样的内容，有什么不懂的都可以下方留言。

js基础
JavaScript基础 JavaScript基础语法变量的声明运算符分支结构循环结构函数数据结构 w...
JavaScript循环结构
一、循环1、for循环（1） for基础语法需求：火车站售票，需要将0~10号票全部售出作用：不论循环条件是否为...
04-JS基础-流程控制
JavaScript提供3种流程结构：顺序结构、选择结构、循环结构。顺序结构：默认的流程结构。按照书写顺序从上至下...
JavaScript-04
JavaScript-04 循环结构02 for语句考虑下循环问题的相同之处 for语句的执行逻辑 1.计算表达...
萍萍的JavaScript教程其二三大结构
与其他的编程语言一样，javascript也存在三种基础的程序执行结构。分别是顺序结构、选择结构、循环结构。我们依...
流程控制的基本概念
流程控制是指控制代码的执行顺序。在JavaScript中，有三种基本的流程控制结构：顺序结构、选择结构和循环结构...
06-JavaScript流程控制
流程控制基本概念 JavaScript中流程控制的概念和C语言中一样也有顺序结构、选择结构和循环结构选择结构i...
Js事件循环
列表 JavaScript事件循环测试金字塔 stub JavaScript事件循环理解 javaScript语...
JS基础---03循环
JavaScript基础 1 - 循环 1.1 for循环语法结构名称作用初始化变量通常被用于初始化一个计数器...
JavaScript 五、while循环 for循环
JavaScript Day5笔记+ 一、循环结构： 1.while（条件）{条件为真时执行}While中结束...