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

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

智能推荐

使用nginx解决浏览器跨域问题_nginx不停的xhr-程序员宅基地

文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的，浏览器出于安全考虑是禁止的。警告信息如下：不过jQuery对跨域问题也有解决方案，使用jsonp的方式解决，方法如下：$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr

在 Oracle 中配置 extproc 以访问 ST_Geometry-程序员宅基地

文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry，也就是我们所说的使用空间SQL 的方法，官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下，主要就分为以下几个步骤。..._extproc

Linux C++ gbk转为utf-8_linux c++ gbk->utf8-程序员宅基地

文章浏览阅读1.5w次。linux下没有上面的两个函数，需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数，转换过程中受到系统编码类型的影响，需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8

IMP-00009: 导出文件异常结束-程序员宅基地

文章浏览阅读750次。今天准备从生产库向测试库进行数据导入，结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误，google一下，发现可能有如下原因导致imp的数据太大，没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件，向高版本imp导出的dmp文件出错传输dmp文件时，文件损坏解决办法：imp时指定..._imp-00009导出文件异常结束

python程序员需要深入掌握的技能_Python用数据说明程序员需要掌握的技能-程序员宅基地

文章浏览阅读143次。当下是一个大数据的时代，各个行业都离不开数据的支持。因此，网络爬虫就应运而生。网络爬虫当下最为火热的是Python，Python开发爬虫相对简单，而且功能库相当完善，力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页，按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息，通过分析请求信息可以了解请..._初级python程序员能力要求

Spring @Service生成bean名称的规则（当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致）_@service beanname-程序员宅基地

文章浏览阅读7.6k次，点赞2次，收藏6次。@Service标注的bean，类名：ABDemoService查看源码后发现，原来是经过一个特殊处理：当类的名字是以两个或以上的大写字母开头的话，bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname

随便推点

二叉树的各种创建方法_二叉树的建立-程序员宅基地

文章浏览阅读6.9w次，点赞73次，收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立

解决asp.net导出excel时中文文件名乱码_asp.net utf8 导出中文字符乱码-程序员宅基地

文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能，如果文件名出现中文，便会以乱码视之。解决方法： fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码

笔记-编译原理-实验一-词法分析器设计_对pl/0作以下修改扩充。增加单词-程序员宅基地

文章浏览阅读2.1k次，点赞4次，收藏23次。第一次实验词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别，找出文件中所有的合法的单词，并给出一定的信息作为最后的结果，用于后续语法分析程序的使用；本实验针对 PL/0 语言的文法、词汇表编写一个词法分析程序，对于每个单词根据词汇表输出： (单词种类, 单词的值) 二元对。词汇表：种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词

android adb shell 权限,android adb shell权限被拒绝-程序员宅基地

文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限

投影仪-相机标定_相机-投影仪标定-程序员宅基地

文章浏览阅读6.8k次，点赞12次，收藏125次。1. 单目相机标定引言相机标定已经研究多年，标定的算法可以分为基于摄影测量的标定和自标定。其中，应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统，在标定过程中，相机拍摄多个角度下（至少两个角度，推荐10~20个角度）的标定板图像（相机和标定板都可以移动），即可对相机的内外参数进行标定。下面介绍张氏标定法（以下也这么称呼）的原理。原理相机模型和单应矩阵相机标定，就是对相机的内外参数进行计算的过程，从而得到物体到图像的投影_相机-投影仪标定

Wayland架构、渲染、硬件支持-程序员宅基地

文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的硬件支持简述：　翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构；一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。内核是从一个输入设备中获取一个事件，并通过 evdev 输入_wayland