循环语句是什么

循环语句就是重复执行指定语句。js有5种循环语句：

• while
• Do / while
• for
• For / of
• For / in

最常见的用途就是迭代数组。

计数器变量

循环就是重复做。但是程序是如何实现重复做的呢？它的实现原理是什么？

先看一个例子

for ( let count = 0; count < 5; count++){
  console.log(count)
}

• let count = 0 初始化变量 => 循环的起点
• count < 5 检测变量 => 循环的终点，控制是否执行循环体。
• count++ 更新变量 => 控制循环迭代

这个变量被称为“计数器变量”或"循环变量"。大多数循环都有某种形式的计数器变量。记住：

对循环变量的三个关键操作

初始化

检测

更新

计数器变量在：

• 循环开始前：计数器变量会被初始化

• 循环迭代前：会测试计数器变量的值

• 循环结束时：更新计数器变量

while循环

定义

while循环是先测试循环表达式的循环。（while 语句创建一个循环，测试循环表达式

的结果为真时重复执行语句）

语法

initialize
while ( expression ){ //循环表达式
  statement //循环体
  increment //必须是由副作用的表达式，如赋值或++、--
}

• while: 引入循环表达式||标记循环结束
• Expression : 循环表达式
  • 如果是假值则解析器会跳过循环体，这意味着循环体可能一次都不会执行。
  • 如果是真值，则解析器会执行语句，然后再次求值表达式。
• statement：循环体

示例

let n = 0;
while (n < 3) {
  n++;
}
console.log(n);// expected output: 3

注意事项

1. while循环只会重复执行表达式后面的一条语句

let n = 10
while ( --n > 0)
    console.log('hello' + n)
    console.log('hi')

2. 求值表达式必须要计算出fasle，否则while(true)会创造一个死循环

let count = 0 //①变量count从0开始
while ( count < 10 ){ //②表达式求值为true就执行循环体④再次求值表达式
  console.log( count )
  count++ //③每运行一次循环体count就增一次
}

3. 常见的计数器变量的名字有: count 、 i、 j、 k

do / while

do / while 循环后测试循环表达式的循环。这意味着循环体至少会执行一次。

语法

do
  statement
while ( expression );

do {
  statement
} while ( expression );

• do: 标记循环开始
• statement： 循环体
• while： 标记循环结束||引入循环表达式
• expression: 循环表达式

示例

let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// expected result: "12345"

for循环

语法

for ( 变量声明; 条件表达式; 赋值表达式){
  //循环体
}

• 变量声明：在循环开始前设置的普通变量，通常是一个数，用于设置循环的起点。
• 条件表达式：控制是否执行循环体，也就是指定循环的终点。
• 赋值表达式：每次循环体执行后执行的代码，用于更新计数器变量的值。（必须是由副作用的表达式）

示例：

for ( let i = 0; i < 5; i++){
  console.log(i)
}

1. let i = 0 初始化计数器变量，在循环开始前执行，且只执行一次。
2. i < 5 检测计数器变量，求值结果为真则执行循环体，否则跳过循环体。
3. i++ 更新计数器变量
4. 重复步骤2

作业

1. 写一个水果超市的价格查询程序： 苹果 香蕉 火龙果 橙子 榴莲等

   输入一个“苹果” 返回=> 3.6 / 斤

2. 使用prompt()设置行数、列数、和符号输出下面的图形

*****
*****
*****
*****
*****

3. 向控制台输出一个口字形状的星号

   *****
   *   *
   *   *
   *   *
   *****
   

4. 向控制台输出下面的图形

   *
   **
   ***
   ****
   *****
   

5. 向控制台输出下面的图形

   *****
   ****
   ***
   **
   *
   

6. 向控制台输出下面的图形

    *
   **
  ***
 ****
*****

7. 向控制台输出下面的图形

*****
 ****
  ***
   **
    *

8. 向控制台输出下面的图形

*
**
* *
*  *
*   *
******

9. 向控制台输出下面的图形

    *
   ***
  *****
 *******
*********

10. 向控制台输出下面的图形

*********
 *******
  *****
   ***
    *

11. 向控制台输出下面的图形

    *
   * *
  *   *
 *     *
*********

12. 向控制台输出下面的图形

    *
   ***
  *****
 *******
*********
 *******
  *****
   ***
    *

13. 向控制台输出下面的图形

    *
   * *
  *   *
 *     *
*       *
 *     *
  *   *
   * *
    *

14. 向控制台输出下面的图形

*********
 *******
  *****
   ***
    *
   ***
  *****
 *******
*********

15. 向控制台输出下面的图形

*
**
***
****
*****
****
***
**
*

16. 向控制台输出下面的图形

    *
   **
  ***
 ****
*****
 ****
  ***
   **
   *

17. 向控制台输出下面的图形

 ***   ***
***** *****
***********
 *********
  *******
   *****
    ***
     *