Java Script基础与提升——流程控制分支

最新推荐文章于 2024-07-27 17:39:19 发布

张小鱼༒

最新推荐文章于 2024-07-27 17:39:19 发布

阅读量303

点赞数

分类专栏： HTML以及CSS和javascripts 文章标签： python 开发语言

本文链接：https://blog.csdn.net/m0_56006701/article/details/125080642

版权

HTML以及CSS和javascripts 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

Java Script系列文章目录

【Java Script基础与提升】——数据类型模块_张小鱼༒的博客-CSDN博客

【Java Script基础与提升】——运算符_张小鱼༒的博客-CSDN博客

文章目录

前言

随着人工智能的不断发展，Java Script这门技术也越来越重要，很多人都开启了Java Script学习，本文就介绍了Java Script当中流程控制部分的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Java Script流程控制概述

流程控制是控制我们的代码按照什么结构顺序来执行的，它有三种主要结构：顺序结构、分支结构和循环结构。

二、三种流程控制

1.顺序结构

程序按照代码的先后顺序，依次执行

2.分支结构

A、if语句

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>
        //流程控制分支
        //if 语句判断年龄
        var age=prompt('请输入你的年龄：');
        if(age>=18){
            alert('我想带你去网吧');
        }
    </script>
</head>
<body>
    
</body>
</html>

B、if-else语句

注意这个里面只执行if或者else里面的语句

案例代码如下：

<!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>
        //流程控制分支
        //if 语句判断年龄
        var age=prompt('请输入你的年龄：');
        if(age>=18){
            alert('我想带你去网吧');
        }
        else{
            alert('我不能带你去网吧');
        }
    </script>
</head>
<body>
    
</body>
</html>

案例2：判断闰年与否

代码如下（示例）：

<!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>
        //流程控制分支
        //if 语句判断年龄
        //判断闰年与否
        var year=prompt('请输入年份：');
        if(year%4==0&&year%100!=0 || year %400==0){
            alert('你输入的年份为闰年');
        }
        else{
            alert('你输入的为平年');
        }
    </script>
</head>
<body>
    
</body>
</html>

C、if-else 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>
        //流程控制分支
        //判断成绩等级的案例
        var grade=prompt('请输入你的成绩：');
        if(grade>=90){
            alert('你的成绩等级为：A');
        }
        else if(grade>=80){
            alert('你的成绩等级为：B');
        }
        else if(grade>=70){
            alert('你的成绩等级为：C');
        }
        else if(grade>=60){
            alert('你的成绩等级为：D');
        }
        else{
            alert('你的成绩等级为：E');
        }
    </script>
</head>
<body>
    
</body>
</html>

D、三元表达式：

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

条件表达式？表达式1：表达式2

如果条件表达式为真，则输出表达式1，否则输出表达式2

代码如下（示例）：

<!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>
        //流程控制分支
        //三元表达式
        var num=10;
        var result=num>5?'是的':'不是的';
        console.log(result);
    </script>
</head>
<body>
    
</body>
</html>

数字补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>
        //流程控制分支
        //数字补0案例
        var time=prompt('请输入一个0~59之间的数字：');
        var result=time<10 ? '0'+time : time;
        alert(result);
    </script>
</head>
<body>
    
</body>
</html>

E、分支流程控制switch语句

针对于变量设置一系列的特定值的选项

语法结构：

switch(表达式){

case value1：执行语句1；break；

case value1：执行语句2；break；

case value1：执行语句3；break；

......

default:执行最后的语句；

}

执行原理：

利用表达式的值与case里面的value值做匹配，能匹配到执行里面的语句，未匹配的时候，执行最后default的语句。

开发时，里面常为变量；匹配时里面的数据类型必须相等；case里面如果没有break，会继续执行下一个case语句。

代码如下（示例）：

<!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>
        //流程控制分支
        //switch语句
        var num=3;
        switch(num){
            case 1:
                console.log(1);
                break;
            case 3:
                console.log(3);
                break;
        }
    </script>
</head>
<body>
    
</body>
</html>

查询水果价格的案例

代码如下（示例）：

<!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>
        //流程控制分支
        //查询水果案例
        var fruit=prompt('请输入你要查询的水果');
        switch(fruit){
            case '苹果':
                alert('苹果的价格为3.5/斤');
                break;
            case '香蕉':
                alert('香蕉的价格为2.5/斤');
                break;
            case '榴莲':
                alert('榴莲的价格为35/斤');
                break;
            default:
                alert('没有此水果');
        }
    </script>
</head>
<body>
    
</body>
</html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了javascripts当中循环结构与分支结构的使用与案例。

最后欢迎大家点赞👍，收藏⭐，转发🚀，
如有问题、建议，请您在评论区留言💬哦。

张小鱼༒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java Script基础与提升——流程控制分支

随着人工智能的不断发展，Java Script这门技术也越来越重要，很多人都开启了Java Script学习，本文就介绍了Java Script当中流程控制部分的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考流程控制是控制我们的代码按照什么结构顺序来执行的，它有三种主要结构：顺序结构、分支结构和循环结构。以上就是今天要讲的内容，本文仅仅简单介绍了javascripts当中循环结构与分支结构的使用与案例。如有问题、建议，请您在评论区留言💬哦。
复制链接

扫一扫