[JavaScript知识库] JavaScript学习笔记（四）三大基本程序控制结构

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript学习笔记（四）三大基本程序控制结构 -> 正文阅读

[JavaScript知识库]JavaScript学习笔记（四）三大基本程序控制结构

JavaScript学习笔记（四）三大基本程序控制结构

在JavaScript中，程序的基本控制结构有三种，分别是顺序结构、分支结构和循环结构，任何简单或者复杂的算法都可以由这三种基本结构构成。下面让我们来了解一下这三种基本结构。

一、顺序结构

顺序结构是程序设计中最简单也最常用的一种程序结构，它是按照代码在程序中的排列顺序，从程序的第一条语句开始一步一步执行，直至最后一条语句。

例如：计算底边为18，高为12的三角形的面积。

//顺序结构
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
</head>
 
<body>
<h1>顺序结构</h1>
<script>
    var base = 20; height = 12;
    var S = base*height/2;
    alert("三角形的面积为：" + S);
</script>
</body>
</html>

二、分支结构

在实际问题中，问题的发展往往是多变的，我们需要根据不同的情况，来选择不同的应对方式。在编程中实现这一应变能力的正是分支结构，它针对不同的衡量标准（条件），来执行对应的语句（分支）。在JavaScript中，分支结构有单分支（if语句）、双分支（if…else）和多分支（多重if…else语句、switch语句）三种形式。

（一）if语句

if语句是单分支语句，即能够根据条件判断是否执行分支语句。

1、语法结构

当if后面括号里的表达式为true时，执行大括号内分支语句，反之则跳过。

if(表达式){
    分支语句1;//条件为true时执行
}

2、例题：当a不小于70时输出a的值。

//分支结构
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
</head>
 
<body>
<h1>if语句</h1>
<script>
    var a = 77；
    if(a >= 70){
        alert("a的值为：" + a);
    }  
</script>
</body>
</html>

（二）if…else语句

if…else语句是双分支语句，即能够根据条件判断执行哪一条分支语句。

1、语法结构

当if后面括号里的表达式为true时，执行if后大括号内分支语句，反之则执行else后大括号内分支语句。

if(表达式){
    分支语句1;//条件为true时执行
}else{
    分支语句2;//条件为false时执行
}

2、例题：输出a、b两个数中最大的值

//分支结构
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
</head>
 
<body>
<h1>if…else</h1>
<script>
    var a = 77,b = 88；
    if(a > b){
        alert("a最大，值为：" + a);
    } else{
        alert("b最大，值为：" + b);
    }
</script>
</body>
</html>

细心的小伙伴应该已经发现了问题，当a=b时为什么执行语句2而不是1呢？很明显这是错误的，那让我们再来更改一下：

//分支结构
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
</head>
 
<body>
<h1>if…else</h1>
<script>
    var a = 77,b = 88；
    if(a ！= b){
        if(a > b){
            alert("a最大，值为：" + a);
        } else{
            alert("b最大，值为：" + b);
        }
    } else{
        alert("a、b相等，值为：" + b);
    }
</script>
</body>
</html>

此时，我们在if…else语句中又加入了一个if…else语句，从而实现了对相等情况的判断，这种方法称之为嵌套，在今后的学习中我们会经常用到这种方法，大家可以多多仔细观察。

（三）多重if…else语句

多重if…else语句是多分支语句，即能够进行多个条件的判断，并执行对应的程序分支语句。

1、语法结构

从表达式1开始依此判断，当if后面括号里的表达式为true时，执行对应表达式后大括号内分支语句并结束改语句，（可加可不加）若所有表达式均不满足，则执行else后大括号内分支语句。

if(表达式1){
    分支语句1;//表达式1为true时执行
}else if(表达式2){
    分支语句2;//表达式2为true时执行
}
…
else{
    语句n;//表达式都不成立时执行，可加可不加
}

2、例题：输出a、b两个数中最大的值

除了嵌套使用if…else语句外，多重if…else语句也可以很好的解决这个问题。

//分支结构
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
</head>
 
<body>
<h1>多重if…else</h1>
<script>
    var a = 77,b = 88；
    if(a > b){
        alert("a最大，值为：" + a);
    } else if(a < b){
        alert("b最大，值为：" + b);
    } else if(a == b){
        alert("a、b相等，值为：" + b);
    }
</script>
</body>
</html>

（四）switch语句

switch语句是单条件多分支语句，即仅需判断一个条件，就可完成程序多个分支语句的控制。

1、语法结构

首先计算表达式的值，而后从变量1开始寻找相匹配的case常量，如果找到了，则执行case后面的语句块，而后会继续执行至switch语句末尾，（可加可不加）如果未找到则执行default后面的语句块。

switch(表达式){
    case 常量1:{
        语句1；
    }break;
    case 常量2:{
        语句2；
    }break;
 
    …
    case 常量n:{
        语句n；
    }break;
    default:{
        语句n+1;
    }
 
}

！注：break；语句用于在执行完匹配常量所对应的代码块后，结束终止switch语句的执行。

2、例题：随机对a、b、c、d、e五名同学进行点名。

补充：Math.random();返回0~1之间（包括0，不包含1）的一个随机数；

Matn.floor(num);返回num的整数部分；

Matn.round(num);返回num四舍五入后的整数。

// 分支结构
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    var ran = Math.floor(Math.random() * 5);
    switch(ran){
        case 0:{
            document.write("恭喜a同学！");
        }break;
        case 1:{
            document.write("恭喜b同学！");
        }break;
        case 2:{
            document.write("恭喜c同学！");
        }break;
        case 3:{
            document.write("恭喜d同学！");
        }break;
        case 4:{
            document.write("恭喜e同学！");
        }break;
        default:{
            document.write("你认为我会抽不到人！！！");
        }
    }
}
</script>
</head>
 
<body>
<h1>switch语句</h1>
 
<button type="button" onclick="myFunction()">点击</button>
 
</body>
</html>

三、循环结构

现在要求输出一个班级所有同学的信息，当重复规模（人数n）很大时，相对于花费大量时间重复写n行相同的代码，利用循环结构无疑可以完美的解决这个问题。循环结构是指在程序中需要反复执行某个功能而设置的一种程序结构。它由循环变量、循环体和循环终止条件这三个要素构成。另外根据判断条件,循环结构又可细分为:先判断后执行的循环结构（for循环、while循环）和先执行后判断的循环结构（do…while循环）。

（一）for循环

for循环是一种结构简单、使用频率高的循环控制语句，属于先判断后执行的循环结构。

1、语法结构

表达式1是是初始表达式，只在循环开始前执行一次，一般用来定义循环变量；表达式2是判断表达式（循环条件），必须为bnoolean类型数据表达式，且每次循环开始前都会运算一次，结果为true时继续运行（循环条件）；表达式3是循环表达式，作用是修改循环的变量，每当循环结束后都会被执行。

for（表达式1;表达式2;表达式3）
 
{
    循环体;
 
}

2、例题：输出0~66之间的所有数字之和。

//循环结构
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
</head>
 
<body>
<h1>for循环</h1>
<script>
    var sum = 0;
    for(var i = 0;i <= 66;i++){
        sum += i;                //sum = sum + i;
    }
    document.write("1~66之间数字的和为：" + sum);
</script>
</body>
</html>

（二）while循环

相对于for循环，while循环只有一个用于判断的表达式，同样属于先判断后执行的循环结构。

1、语法结构

while循环表达式就是循环条件，表达式的初始化一般在while循环结构前面。

while(表达式){
   循环体;
}

2、例题：输出0~66之间的所有偶数之和。

//循环结构
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
</head>
 
<body>
<h1>while循环</h1>
<script>
    var sum = 0;
    for(var i = 1;i <= 66;i++){
        if(i % 2 == 0){
            sum += i;                //sum = sum + i;
        }  
    }
    document.write("1~66之间偶数的和为：" + sum);
</script>
</body>
</html>

（三）do…while循环

do…while循环与while循环非常类似，区别在于无论循环条件是否成立，do…while循环都会先执行一次循环体内的代码再根据条件判断是否继续执行循环体内容，属于先执行后判断的循环结构。

1、语法结构

先执行循环体内的代码，而后判断表达式（表达式）的值，结果为true继续执行循环体反之结束循环。相同问题下，注意循环条件与for循环和while循环的区别。

do{
 
循环体;
 
}while(表达式)

2、例题：输出0~66之间的所有奇数之和。

//循环结构
<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
</head>
 
<body>
<h1>do…while循环</h1>
<script>
    var i = 1,sum = 0;
    do{
        if(i % 2 ！= 0){
            sum += i;                //sum = sum + i;
        }  
        i++;
    }while(i < 66)
    document.write("1~66之间奇数的和为：" + sum);
</script>
</body>
</html>