JavaScript学习总结（流程控制）_js中流程控制的基本使用分析与思考-程序员宅基地

技术标签：学习前端 html javascript

学习JavaScript的 if分支语句、switch分支语句、三元表达式

一、流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺利来实现我们要完成的功能。

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

二、顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序大多数的代码都是这样执行的。

三、分支流程控制 if 语句

（1）分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS语言提供了两种分支结构语句

if 语句

switch 语句

（2）if 语句

语法结构

语句可以理解为一个行动，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。


    <script>
        // 1. if 的语法结构   如果if
        if (条件表达式) {
            // 执行语句
        }

        // 2. 执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句
        // 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码

        // 3. 代码体验
       if (3 > 5){
        alert('今天天气真好');
       }  // 为假，不输出语句
    </script>

案例：进入网吧

弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，不允许进网吧

弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中

使用if 语句来判断年龄，如果年龄大于18就执行if 大括号里面的输出语句


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中
        // 使用if 语句来判断年龄，如果年龄大于18就执行if 大括号里面的输出语句
        var age = prompt('请输入年龄：');
        if (age >= 18){
            alert('你可以进入。');
        }
    </script>
</head>
<body>
    
</body>
</html>

（3）if else 语句（双分支语句）

语法结构


    <script>
        // 1.语法结构 if 如果 else 否则
        if (条件表达式){
            // 执行语句1
        } else{
            // 执行语句2
        }
        // 2. 执行思路 如果表达式结果为真 那么执行语句1 否则 执行语句2
        // 3. 代码验证
        var age = prompt('请输入您的年龄：');
        if (aeg >= 18){
            alert('可以进入');
        }else{
            alert('不得进入');
        }
        // 5. if 里面的语句1 和 else 里面的语句2 最终只能有一个语句执行 2选1
        // 6. else 后面直接跟大括号
    </script>

案例：判断闰年

接受用户输入的年份，如果是闰年，否则弹出是平年。

算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被400整除的就是闰年。

弹出prompt输入框，让用户输入年份，把这个值取过来保存到变量中。

使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行else里面的输出语句。

一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为0。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    // 算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被400整除的就是闰年。
    // 弹出prompt输入框，让用户输入年份，把这个值取过来保存到变量中。
    // 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行else里面的输出语句。
    // 一定要注意里面的且 && 还有或者 ||  的写法，同时注意判断整除的方法是取余为0。
    var year = prompt('请您输入年份：');
    if (year % 4 == 0 && year % 100 != 0) {
        alert('您输入的年份是闰年');
    } else {
         alert('您输入的年份是平年');
    }
    </script>
</head>
<body>
</body>
</html>

（4） if else if 语句（多分支语句）

语法结构


    <script>
        // 1. 多分支语句  就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程
        // 2. if else if 语句是多分支语句
        // 3.语法规范
        if(条件表达式1) {
            // 语句1 ;
        } else if (条件表达式3) {
            // 语句2 ;
        } else if (条件表达式3) {
            // 语句3 ;
        } else {
            // 最后的语句 ;
        }
        // 4. 执行思路
        // 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句
        // 如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
        // 如果上面的所有条件表达式都不成立，则执行else 里面的语句
        // 5.注意点
        // （1） 多分支语句还是多选1 最后只能由一个语句执行
        // （2） else if 里面的条件理论上是可以任意多个的
        // （3） else if 中间有个空格了
    </script>

案例：判断成绩级别

要求：接受用户输入的分数，根据分数输出对应的等级字母A、B、C、D、E

其中：

90分（含）以上，输出：A

80分（含）~90分（不含），输出B

70分（含）~80分（不含），输出C

60分（含）~70分（不含），输出D

60分（不含），输出E

按照从小到大判断的思路

弹出prompt输入框，让用户输入分数，把这个值取过来保存到变量中

使用多分支if else if 语句来分别判断输出不同的值


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    // 伪代码     按照从小到大判断的思路
    // 弹出prompt输入框，让用户输入分数，把这个值取过来保存到变量中
    // 使用多分支if else if 语句来分别判断输出不同的值
    var score = prompt('请您输入分数：');
    if (score >= 90) {
        alert('宝贝，你的成绩是我的骄傲');
    } else if (score >= 80) {
        alert('宝贝，你已经很出色了');
    } else if (score >= 70) {
        alert('宝贝，你要继续加油哦');
    } else if (score >= 60) {
        alert('孩子，你很危险');
    } else{
        alert('熊孩子，我不想和你说话');
    }
    </script>
</head>
<body>
</body>
</html>

三、三元表达式

三元表达式也能做一些简单的条件选择。有三元运算符组成的式子成为三元表达式


    <script>
        // 1. 有三元运算符组成的式子我们称为三元表达式
        // 2. ++num  3 + 5   ? :
        // 3. 语法结构
        // 条件表达式 ？ 表达式1 ： 表达式2
        // 4. 执行思路
        // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
        // 5. 代码体验
        var num = 10;
        var result = num > 5 ? '是的' : '不是的';  // 我们知道表达式是有返回值的
        console.log(result);
        if (num > 5) {
            result = '是的';
        } else {
            result = '不是的';
        }
    </script>

案例：数字补0

用户输入数字，如果数字小于10，则在前面补0 ，比如01 ，09 ，如果数字大于10，则不需要补，比如20。

用户输入0~59之间的一个数字

如果数字小于10，则在这个数字前面补0 ，（加0）否则不做操作

用一个变量接受这个返回值，输出


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    // 1. 用户输入0~59之间的一个数字
    // 2. 如果数字小于10，则在这个数字前面补0 ，（加0）否则 不做操作
    // 3. 用一个变量接受这个返回值，输出
    var time = prompt('请您输入一个0 ~ 59 之间的一个数字');
    // 三元表达式  表达式 ？ 表达式1 ： 表达式2
    var result = time < 10 ? '0' + time : time;  // 把返回值赋值给一个变量
    alert(result);
    </script>
</head>
<body>
</body>
</html>

四、分支流程控制switch语句

（1）语法结构

switch语句也是多分支语句，它用于基于不同条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。


    <script>
        // 1. switch 语句也是多分支语句 也可以实现多选1
        // 2. 语法结构  switch 转换、开关 case 小例子或者选项的意思
        switch(表达式) {
            case value1:
                执行语句1;
                break;
            case value2:
                执行语句2;
                break;
            ...
            default:
                执行最后的语句;
        }
        // 3. 执行思路 利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case  里面的语句  如果都没有匹配上，那么执行 default里面的语句
        // 4. 代码验证
        switch (2) {
            case 1:
            console.log('这是1');
            break;
            case 2:
            console.log('这是2')
            break;
            case 3:
            console.log('这是3')
            break;
            default:
            console.log('没有匹配结果');
        }
    </script>

注意事项


    <script>
        // switch注意事项
        var num = 3;
        switch(num) {
            case 1:
                console.log(1);
                break;
            case 2:
                console.log(2);
                break
            case 3:
                console.log(3);
                break
        }
        // 1. 我们开发里面 表达式我们经常写成变量
        // 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
        // 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
    </script>

案例：查询水果

用户在弹出框里面输入一个水果，如果有就弹出该水果价格，如果没有该水果就弹出“没有此水果”。

弹出prompt输入框，让用户输入水果名称，把这个值取过来保存到变量中。

将这个变量作为switch括号里面的表达式。

case 后面的值写几个不同的水果名称，注意一定要加引号，因为必须是全等匹配。

弹出不同价格即可。同样注意每个case之后加上break，以便退出switch语句。

将default设置为没有此水果。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    // 1.  弹出prompt输入框，让用户输入水果名称，把这个值取过来保存到变量中。
    // 2.  将这个变量作为switch括号里面的表达式。
    // 3.  case 后面的值写几个不同的水果名称，注意一定要加引号，因为必须是全等匹配。
    // 4. 弹出不同价格即可。同样注意每个case之后加上break，以便退出switch语句。
    // 5.  将default设置为没有此水果。
    var fruit = prompt('请您输入查询的水果：');
    switch(fruit) {
        case '苹果':
            alert('苹果的价格是 3.5/斤');
            break;
        case '榴莲':
            alert('榴莲的价格是 35/斤');
            break;
        default:
            alert('没有此水果');
    }
    </script>
</head>
<body>
    
</body>
</html>

（2）switch 语句和 if else if 语句的区别

本文链接：https://blog.csdn.net/2202_75688394/article/details/129487536

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

while循环&CPU占用率高问题深入分析与解决方案_main函数使用while(1)循环cpu占用99-程序员宅基地

文章浏览阅读3.8k次，点赞9次，收藏28次。直接上一个工作中碰到的问题，另外一个系统开启多线程调用我这边的接口，然后我这边会开启多线程批量查询第三方接口并且返回给调用方。使用的是两三年前别人遗留下来的方法，放到线上后发现确实是可以正常取到结果，但是一旦调用，CPU占用就直接100%(部署环境是win server服务器)。因此查看了下相关的老代码并使用JProfiler查看发现是在某个while循环的时候有问题。具体项目代码就不贴了，类似于下面这段代码。while(flag) {//your code;}这里的flag._main函数使用while(1)循环cpu占用99

【无标题】jetbrains idea shift f6不生效_idea shift +f6快捷键不生效-程序员宅基地

文章浏览阅读347次。idea shift f6 快捷键无效_idea shift +f6快捷键不生效

node.js学习笔记之Node中的核心模块_node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是-程序员宅基地

文章浏览阅读135次。Ecmacript 中没有DOM 和 BOM核心模块Node为JavaScript提供了很多服务器级别，这些API绝大多数都被包装到了一个具名和核心模块中了，例如文件操作的 fs 核心模块，http服务构建的http 模块 path 路径操作模块 os 操作系统信息模块// 用来获取机器信息的var os = require('os')// 用来操作路径的var path = require('path')// 获取当前机器的 CPU 信息console.log(os.cpus._node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是

数学建模【SPSS 下载-安装、方差分析与回归分析的SPSS实现(软件概述、方差分析、回归分析)】_化工数学模型数据回归软件-程序员宅基地

文章浏览阅读10w+次，点赞435次，收藏3.4k次。SPSS 22 下载安装过程7.6 方差分析与回归分析的SPSS实现7.6.1 SPSS软件概述1 SPSS版本与安装2 SPSS界面3 SPSS特点4 SPSS数据7.6.2 SPSS与方差分析1 单因素方差分析2 双因素方差分析7.6.3 SPSS与回归分析SPSS回归分析过程牙膏价格问题的回归分析_化工数学模型数据回归软件

利用hutool实现邮件发送功能_hutool发送邮件-程序员宅基地

文章浏览阅读7.5k次。如何利用hutool工具包实现邮件发送功能呢？1、首先引入hutool依赖<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.7.19</version></dependency>2、编写邮件发送工具类package com.pc.c..._hutool发送邮件

docker安装elasticsearch，elasticsearch-head，kibana，ik分词器_docker安装kibana连接elasticsearch并且elasticsearch有密码-程序员宅基地

文章浏览阅读867次，点赞2次，收藏2次。docker安装elasticsearch，elasticsearch-head，kibana，ik分词器安装方式基本有两种，一种是pull的方式，一种是Dockerfile的方式，由于pull的方式pull下来后还需配置许多东西且不便于复用，个人比较喜欢使用Dockerfile的方式所有docker支持的镜像基本都在https://hub.docker.com/docker的官网上能找到合..._docker安装kibana连接elasticsearch并且elasticsearch有密码

随便推点

Python 攻克移动开发失败！_beeware-程序员宅基地

文章浏览阅读1.3w次，点赞57次，收藏92次。整理 | 郑丽媛出品 | CSDN（ID：CSDNnews）近年来，随着机器学习的兴起，有一门编程语言逐渐变得火热——Python。得益于其针对机器学习提供了大量开源框架和第三方模块，内置..._beeware

Swift4.0_Timer 的基本使用_swift timer 暂停-程序员宅基地

文章浏览阅读7.9k次。//// ViewController.swift// Day_10_Timer//// Created by dongqiangfei on 2018/10/15.// Copyright 2018年飞飞. All rights reserved.//import UIKitclass ViewController: UIViewController { ..._swift timer 暂停

元素三大等待-程序员宅基地

文章浏览阅读986次，点赞2次，收藏2次。1.硬性等待让当前线程暂停执行，应用场景：代码执行速度太快了，但是UI元素没有立马加载出来，造成两者不同步，这时候就可以让代码等待一下，再去执行找元素的动作线程休眠，强制等待 Thread.sleep(long mills)package com.example.demo;import org.junit.jupiter.api.Test;import org.openqa.selenium.By;import org.openqa.selenium.firefox.Firefox.._元素三大等待