js三大结构：顺序结构，选择结构，循环结构

最新推荐文章于 2024-06-21 15:37:00 发布

珂鸣玉

最新推荐文章于 2024-06-21 15:37:00 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44239541/article/details/88045432

版权

js中有三种结构：顺序结构，选择结构，循环结构

一、顺序结构

顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。

输入	0个或多个
输出	1个或多个
赋值	=

二、选择结构

选择结构表示程序的处理步骤出现了分支，它需要根据某一特定的条件选择其中的一个分支执行。选择结构有单选择、双选择和多选择三种形式。

1、if-else结构

单分支结构

if(判断条件){

}

双分支结构

if(判断条件){

}

else{

}

多分支结构

if(判断条件){

}

else if(){

}

else{

}

2.switch-case结构

switch(判断条件){
    case 表达式1:
        代码;
        break;
    case 表达式2:
        代码;
        break；
    case 表达式3：
        代码;
        break;
    .......
    default:代码
}

案例：用switch结构判断学生成绩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 350px;
            height: 300px;
            background-color: deeppink;
            margin: 100px auto;
            line-height: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="box">
    <!--type="search"  type="text"   均可以输入,但是search更加友好，有一个删除按钮，用户可以点击这个按钮进行删除  -->
    请输入您的分数：<input  id='score' type="search" placeholder="1--100分">
 
</div>
<script>
    /*
    * 按照学生的分数划分等级：
    * <60  等级：F
    * 60-70  D
    * 70-80  C
    * 80-90   B
    * 90-100   A
    * */
 
    /*
    * 1.获取input结点    通过id名字去获取元素
    * document.getElementById("id名字")
    * 2.用户的输入值  表单元素的值   对象.value
    * 事件函数：    鼠标事件，  单击  双击
    *                键盘事件，按得那个键
    *                表单   元素    聚焦 onfocus  离焦onblur
    * 3.判断值到底是属于哪一个等级
    * */
    var stuInput=document.getElementById('score');
    /*获取input控件里用户输入的值*/
 
    /*离焦事件如果用户在文本框离焦了，就执行{}里面的内容 通过离焦获取学生分数*/
    stuInput.onblur=function(){
        console.log(stuInput.value);
        /*把获取回来的用户输入值转换为数值*/
        var score=parseInt(stuInput.value);
        /*Math.floor(4.5)  向下取整  4
        * Math.round(4.5)   向上取整   5
        * */
        switch(Math.floor(score/10)){
            case 10:
                alert('满分 A');
                break;
            case 9:
                alert('A');
                break;
            case 8:
                alert('B');
                break;
            case 7:
                alert('C');
                break;
            case 6:
                alert('D');
                break;
 
            default :alert('不及格')
        }
 
    }
 
</script>
</body>
</html>

三、循环结构

循环结构表示程序反复执行某个或某些操作，直到某条件为假(或为真)时才可终止循环。在循环结构中最主要的是：什么情况下执行循环?哪些操作需要循环执行?

循环基本结构有三种表示方式

1、for循环

三要素：循环变量赋初值
循环控制条件（出口） -->数组下标越界的判断
增量步长（i++ i--）
for( 赋初值1;控制条件2 ;步长3 ){
循环体4

执行过程是： 1,--》2 --》4 --》3 --》2--》4--》3--》2--》4......

案例1：求1到100之间的和


var sum=0;
for(var i=0;i<=100;i++){
    sum+=i;
}
document.write(sum);

案例2：求1到100之间奇数的和

var sum=0;
for(var i=0;i<=100;i++){
    if(i%2==1){
        sum+=i;
    }
}
document.write(sum);

案例3：求n的阶乘即n!=n(n-1)(n-2).....1

var mul=1;
var n=10;
for(var i=1;i<=n;i++){
    mul*=i;
}
document.write(mul);

案例4：查找列表中的值

折半查找：有序内存有序
顺序查找：有序或者无序

如果找到查找成功在哪位置
没找到查找失败

var arr=[12,567,34,76,98,45];
var key=88;
for(var i=0;i<arr.length;i++){
    if(key==arr[i]){
        console.log("查找成功！"+(i+1)+"位置");    
    }
}
if(i==arr.length){
    console.log("查找失败！");
}

2、while循环

1.赋初值
while(2控制条件){
循环体4
增量3

执行过程：2--》4--》3--》2--》4......

案例：通过while循环求1到100之间的和

var i =1
var sum = 0
while(i<100){
  sum *+ = i
  i++
}

for循环与while循环之间的区别

for() 循环次数明确 
while()  循环次数不明确的情况下 
while() { 循环体}  循环体有可能一次都不执行

3、do while 循环

do{
循环体；
}while（判断条件）先执行后判断至少执行一次循环体

do while 与 while 之间的区别

通过玩游戏之后选择是是否继续为例

do{
玩游戏
}while(是否接着玩？y/n)

do while 循环是玩家先玩完游戏之后再选择是否继续，简而言之，就是先执行在判断，合乎逻辑

while(你是否愿意接着玩游戏？y/n){玩游戏} ###不合理

while 循环是直接问玩家是否继续玩游戏，然后才能玩游戏，简而言之，就是先判断玩家是否继续，才能决定是否执行玩游戏这个过程，对于玩家来说就是不合理的了

循环嵌套结构

通过冒泡排序来简单介绍一下循环嵌套结构

冒泡排序（BubbleSort）：思想：相邻元素进行比较，如果逆序则交换，大的沉底，小的上浮

稳定排序适用场合：基本有序冒泡+优化效率很高

稳定排序：相同关键字在排序前后相对位置不变

案例：通过排序实现数组中的数值由小到大有排列

 var a=[12,34,65,11,23,78,67,99]
    var tang = 0;
    var flag = 1; //标记变量
    //控制趟数
    for(var i = 1;i<a.length;i++){
        flag = 1; //本趟是否有交换
        tang++;
        //一趟之内比较的次数
        for(var j =0;j<a.length-i;j++){
            if(a[j] > a[j+1]){
                flag = 0;
                temp = a[j];
                a[j] = a[j+1];
                a[j+1] = temp;
            }
        }
        if(flag === 1){
            break
        }
    }

    console.log(tang);
    for(var i = 0;i<a.length;i++){
        document.write(a[i]+'&nbsp;&nbsp;&nbsp;&nbsp;')
    }