条件控制语句、循环控制语句、九九乘法表_条件控制语句有哪三种形式-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_58258716/article/details/143892418

一、条件控制语句

条件控制语句依照某种条件判断该代码段是否执行。常用的条件控制语句有两种

(1) if-else语句，这种语句的作用场景为只有两个分支的程序选择

(2)switch语句，这种语句的作用场景为具有多个分支的程序选择

1.if-else语句

对程序流程进行条件判断时，最为常用的一条语句就是if-else语句

语法如下：

if (condition) statement1 else statement2

其中的条件condition可以是任意的表达式，且该条件表达式的值不一定是布尔值。ECMAScript会自动调用Boolean()转换函数将这个表达式的结果转换为一个布尔值。

if-else语句的执行过程为：若对condition求值的结果是true，则执行statement(语句1)；若对condition求值的结果为false，则执行statement2(语句2)。语句1和语句2既可以是一行代码，又可以是一个代码块(以一对花括号括起来的多行代码)。

if-else语句的流程图

【例】根据年龄显示不同内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>根据年龄显示不同内容</title>
</head>
<body>
  <script>
    var age = 20;
    if(age >= 18){
      document.write('成年人');
    }
    else{
      document.write('未成年');
    }
  </script>
</body>
</html>

如果需要进行更细致的判断条件，那么可以使用多条if-else语句的组合。可以把多条if-else语句写在一行代码中

if(condition1){
    statement1
}else if(condition2){
    statement2
}else{
    statement3
}

多条if-else控制语句的流程图

【例】根据年龄显示不同内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>根据年龄显示不同内容</title>
</head>
<body>
  <script>
    var age = 3;
    if(age >= 18){
      document.write('成年人');
    }else if(age >= 6){
      document.write('青少年')
    }
    else{
      document.write('儿童');
    }
  </script>
</body>
</html>

【例】数学考试中，小明考了86分，给他做个评分，60分以下不及格，60(含60)~75分为良好，75(含75)~85为很好，85(含85)~100分为优秀。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分数评价</title>
</head>
<body>
  <script>
    var myscore = 86;
    if(myscore < 60){
      document.write('成绩不及格，努力呀')
    }else if(myscore >= 60 && myscore < 75){
      document.write('成绩良好，加油哟')
    }else if(myscore >= 75 && myscore < 85){
      document.write('成绩很好，继续保持')
    }else{
      document.write('成绩优秀，超级棒')
    }
  </script>
</body>
</html>

2.switch语句

switch语句的优点：选择结构更加清晰，一目了然；执行速度相对较快。

switch语句的语法如下：

switch(表达式){
    case 常量1:
        语句1;
        break;
    case 常量2:
        语句2;
        break;
    ......
    default:
        语句;
}

【注意】

switch后面括号内的“表达式”，应该为整型(包括字符串型)。
switch下面的花括号是一条复合语句。意味着包含若干条语句，它是switch语句中的语句体。语句体内包括多个以关键字case开头的语句行和一个以default开头的语句行，case后面跟着一个常量或常量表达式，在表达式后面需要跟一个冒号，如 case 'A':, case 0:等。
switch语句执行时，先计算括号内的表达式的值，将这个值与case后面的常量进行匹配。若匹配成功，则进入该case所表示的分支。
若没有与任何case后面的常量相匹配，则执行default后面的语句。可以没有default标号及后面的语句，但此时若没有case后面的常量相匹配，则不执行任何语句。
每个case后面的常量必须互不相同，否则会出现矛盾的现象(同值不同的入口冲突)
case标号只起标记作用，在执行switch语句时，根据switch表达式的值找到入口，在执行一条case语句后顺序执行下去，直到遇到break语句跳出顺序执行。
在case语句中，如果包含了一条以上的执行语句，可不必加花括号。程序执行时会顺序执行，加花括号也不会有影响。

多条case语句可以共用一条执行语句

case 'A':
case 'B':
case 'C': b++;

【判断当前是星期几】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>判断当前星期几</title>
</head>
<body>
  <script>
    iwork = parseInt(prompt('请输入0~6的值'));
  switch(iwork){
    case 0:
      document.write('星期天');
      break;
    case 1:
      document.write('星期一');
      break;
    case 2:
      document.write('星期二');
      break;
    case 3:
      document.write('星期三');
      break;
    case 4:
      document.write('星期四');
      break;
    case 5:
      document.write('星期五');
      break;
    case 6:
      document.write('星期六');
      break;
    default:
      document.write('请输入合理值'); 
  }
  </script>
</body>
</html>

在switch语句中，几条case语句是可以共用一条指令，相邻的case具有相同的指令的，可以只写最后一条指令，然后写break结束选择结构。

【例】根据输入的月份判断季节

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>根据输入的月份判断季节</title>
</head>
<body>
  <script>
    var month = +prompt('请输入月份:');
    var season = '';
    switch(month){
      case 12:
      case 1:
      case 2:
        season = '冬季';
        break;
      case 3:
      case 4:
      case 5:
        season = '春季';
        break;
      case 6:
      case 7:
      case 8:
        season = '夏季';
        break;
      case 9:
      case 10:
      case 11:
        season = '秋季';
        break;    
      default:
        season = '请输入正确的月份';
    }
    document.write(season);
  </script>
</body>
</html>

switch语句中，每个case的匹配操作实际上是恒等运算符(===)比较，而不是相等运算符(==)比较，因此，表达式和case的匹配并不会做任何数据类型转换。

二、循环控制语句

1.for循环

for循环语句要求在执行之前初始化变量和定义循环后要执行的代码。for循环语句的语法如下：

for(起始状态; 判断条件; 状态改变){
    执行语句;
}

for循环的执行顺序:判断条件->执行语句->状态改变。因此，for循环的功能可以用下面的过程来描述：

(1) 计算起始状态。

(2)计算判断条件，判断条件若为真，则执行循环体中的“执行语句”，跳到第(3)步执行；若为假，则循环结束，退出循环。

(3)计算状态改变。

(4)跳转到第(2)步执行。

for循环的流程图

【注意】

for循环中的“起始状态(循环变量赋初值)”“判断条件(循环条件)”和“状态改变(循环变量增量)”都是可选择项，即可以省略，但“;”不能省略。

省略“起始状态(循环变量赋初值)”，表示不对循环控制变量赋初值

省略”判断条件(循环条件)“，表示不对循环控制变量进行条件判断。注意，可能成为死循环。

省略“状态改变(循环变量增量)”，表示不对循环控制变量进行修改，这时可在语句体中加入修改循环控制变量的语句。

2.while循环

while循环会在指定条件为真时循环执行代码块。while循环属性前测循环语句，也就是说，在循环体内的代码被执行之前，就会会出口条件求值。因此，循环体内的代码有可能永远不会被执行。while循环的语法

while(表达式) statement

while循环的流程图

【注意】

循环次数的控制要正确。使用循环结构程序设计，有时可以通过循环变量来控制循环次数。

循环体包含一条以上的语句时，一定要用花括号括起来，否则，成勋只将第一条语句作为循环体。

在循环体内，要有使循环趋于结束的语句，否则，可能导致无限循环。

【例】累加求和，求100以内所有数相加的和。

<script>
    var sum = 0;
    var i = 1;
    while(i<100){
      sum += i;
      i++;
    }
    document.write(sum);
  </script>

3.do-while循环

do-while是后测循环语句，即只有在循环体中的代码执行之后，才会测试出口条件。换句话说，在对条件表达式求值之前，循环体内的代码至少会被执行一次。do-while循环的流程图

do-while循环的语法如下：

do{
    statement
}while(表达式);

【例】累加求和，求100以内所有数相加的和。

<script>
    var sum = 0;
    var i = 1;
    do{
      sum += i;
      i++;
    }while(i<100)
    alert(sum);
  </script>

【注意】

为了避免误读，do-while循环的循环体中即使只有一条语句，也要用花括号括起来。

编写do-while循环时切勿忘记while(表达式)后需要添加";"。

4.break和continue语句

break和continue语句用于在循环中精确地控制代码的执行。

break语句终止整个循环，不再执行循环体。

continue语句只结束本次循环，不是终止整个循环

break和continue语句的流程图

【例】从1循环到10，当能把5除尽时跳出循环

<script>
    var num = 0;
    for(var i = 1; i < 10; i++)
    {
      if(i % 5 == 0) break;
      num++;
    }
    document.write(num);
  </script>

【例】从1循环到10，当能把5除尽时进入下一轮循环

<script>
    var num = 0;
    for(var i = 1; i < 10; i++)
    {
      if(i % 5 == 0) continue;
      num++;
    }
    document.write(num);
  </script>

5.for-in循环

for-in循环是一种精准的迭代循环，主要用来枚举某一对象的属性。for-in循环的语法如下：

for(property in expression) statement

需要显示BOM(浏览器对象模型)中window这一对象的所有属性，可以通过for-in循环来实现

for(var propName in window){
    document.write(propName);
}

如果表示要迭代的对象的变量值为null或undefined，那么for-in循环会抛出错误。ECMAScript5更正了这一行为，当变量值为null或undefined时不再抛出错误，而仅仅只是不执行循环体。

【例】使用for-in循环访问数组元素

<script>
    var obj1 = {
      name: 'Jack',
      age: 20,
      city: 'Beijing'
    };
    var str = '';
    for(var key in obj1){
      str += key;
      str += ' ';
    }
    document.write(str);
  </script>

三、输出九九乘法表

以表格的形式输出九九乘法表，关键技术在于，两层循环的正确位置添加表格标签,以方便正确输出表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>九九乘法表</title>
</head>
<body>
  <script>
    var str = "<table border='1'>";
    for(var i = 1; i <= 9; i++){
      str += "<tr >";
        for(var j = 1; j <= i; j++){
          str += '<td>'
          str += `${j}*${i}=${j * i}`;
          str += '</td>'
        }
        str += '</tr>';  
    }
    str += "</table>";
    document.write(str);
  </script>
</body>
</html>

拓展