【前端之JavaScript 循环结构语句的基本语法知识】

【前端之JavaScript 循环结构语句的基本语法知识】

我们常见的Web前端三巨头：HTML、CSS、JS（JavaScript）。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS；
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用，希望能够对你们有些帮助。

1. 循环结构语句while
2. 循环结构语句 – do while
3. 循环结构语句 – for
4. 总结

1.循环结构语句while

定义初始变量 n
while ( 条件 ) {
会被重复执行的代码
…
}
注意：
1、while会重复的执行一段代码, 直到重复结束才会继续执行后续的代码
2、千万要书写 改变初始值 的代码, 不然会出现死循环
3、在循环内, 初始值、条件判断 和 改变初始值都能控制循环的次数
4、在循环内, 循环控制变量是一组 有规律的数字
【案例】求 10 的阶乘

var total = 1
var n = 10
while (n >= 1) {
total *= n
n--
}

2.循环结构语句 – do while

do {
会被重复执行的代码
…
} while ( 条件 )
注意：

1. 当初始变量在条件以内的时候, while 和 dowhile循环是一样的
2. 当初始变量在条件以外的时候
3. while 循环一次都不执行
4. dowhile 循环会执行一次
   【案例】在浏览器回答问题，打开浏览器时提示一个问题让用户回答。只有答对, 才可以继续浏览网页, 如果错误, 那么再次弹出同样的问题。

<script>
  // do while 循环先执行代码 后判断
  do {
    var result = prompt('你爱不爱我 ? ')
  } while (result !== 'yes')
  // 如果输入了 yes 就会执行到这里
  alert('我也爱你')
</script>

3.循环结构语句 – for

【案例】在控制台输出 1 ~ 100 之间所有 3 的倍数

<script>
  // 利用 for 循环拿到 1 ~ 100 的数字
  for (var i = 1; i <= 100; i++) {
    // 判断是 3 的倍数
    if ( i % 3 === 0 ) {
      console.log( i )
    }
  }
</script>

【案例】页面打印正方形

<script>
  // 打印正方形
  for (var j = 1; j <= 9; j++) {
    for (var i = 1; i <= 9; i++) {
      document.write('* ')
    }
    document.write('</br>')
  }
</script>

【案例】页面打印三方形

<script>
  // 打印三角形
  for (var j = 1; j <= 9; j++) {
    for (var i = 1; i <= j; i++) {
      document.write('* ')
    }
    document.write('</br>')
  }
</script>

【案例】页面打印九九法表

<script>
  // 打印九九法表
  for (var j = 1; j <= 9; j++) {
    for (var i = 1; i <= j; i++) {
      document.write(i + '*' + j + '=' + i*j + ' ')
    }
    document.write('</br>')
  }
<script>

【案例】寻找最大公约数

<script>
  // 准备两个变量, 保存两个数字
  var max = 24;var min = 12;
  // 从相对小的数字向 1 进行循环
  for (var i = min; i >= 1; i--) {
    // 判断能被 max 和 min 整除
    if (max % i === 0 && min % i === 0) {
      // 输出这个数字
      console.log(i)
      // 这里可以直接结束循环了
      break
    }
  }
<script>

【案例】寻找最小公倍数

<script>
  // 准备两个变量, 保存两个数字
  var max = 15;var min = 10;
  // 从相对大的数字向 两数乘积 进行循环, 步长为 相对大的数字
  for (var i = max; i <= min * max; i += max) {
    // 只要能整除 相对小的数字 就可以
    if (i % min === 0) {
      console.log( i )
    }
  }
<script>

总结

1.循环结构语句while
定义初始变量 n
while ( 条件 ) {
会被重复执行的代码
…
}
2.循环结构语句 – do while
do {
会被重复执行的代码
…
} while ( 条件 )
3.循环结构语句 – for

好了，关于前端之JavaScript循环结构语句的基本语法知识已经写的非常清楚了，具体实战有什么问题的小伙伴可留言或者私信，看到一定帮您解决，我们别的文章再见。