JavaScript流程控制(分支)

目录
  • 一、流程控制
  • 二、顺序流程控制
  • 三、分支流程控制 if 语句
    • 1、分支结构
    • 2、 if 语句
    • 3、 if else语句(双分支语句)
    • 4、if else if 语句(多分支语句)
  • 四、三元表达式
  • 五、分支流程控制 switch 语句
    • 1、语法结构
    • 2、switch 语句和 if else if 语句的区别

一、流程控制

流程控制主要有三种结构:

  • 分别是顺序结构
  • 分支结构
  • 循环结构

这三种结构代表三种代码执行的顺序。

二、顺序流程控制

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

三、分支流程控制 if 语句

1、分支结构

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

2、 if 语句

// 条件成立执行代码,否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

执行流程为:

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

var age = prompt('请输入您的年龄:');
        if(age > 18) {
            alert('您的年龄合法,请进入!');
        }

当输入的数值大于等于18时,弹出:

3、 if else语句(双分支语句)

语法结构:

// 条件成立  执行 if 里面代码,否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

执行流程:

例如:写一个是否为闰年的案例,接收用户输入的年份,如果是闰年就弹出闰年,否则弹出是平年。
算法分析:
算法:能被4整除且不能整除100的为闰年(如2004年就是闰年,2005年不是闰年)或者能够被 400 整除的就是闰年
弹出prompt 输入框,让用户输入年份,把这个值取过来保存到变量中
使用 if 语句来判断是否是闰年,如果是闰年,就执行 if 大括号里面的输出语句,否则就执行 else里面的输出语句
一定要注意里面的且 && 还有或者 || 的写法,同时注意判断整除的方法是取余为 0

 var year = prompt('请输入要判断的年份:');
        if(year%400 == 0 || year % 4 == 0 && year / 100 != 0) {
            alert('该年是闰年!');
        }else{
            alert('该年是平年!');
        }

当输入2004年的时候:

当输入2005年时,弹出:

4、if else if 语句(多分支语句)

语法结构:

// 适合于检查多重条件。
if (条件表达式1) {
    语句1;
} else if (条件表达式2)  {
    语句2;
} else if (条件表达式3)  {
   语句3;
 ....
} else {
    // 上述条件都不成立执行此处代码
}

执行流程:

例如:输出一个判断成绩的案例,接收用户输入的分数,根据分数输出对应的等级字母 A、B、C、D、E。其中:

  1. 90分(含)以上 ,输出:A
  2. 80分(含)~ 90 分(不含),输出:B
  3. 70分(含)~ 80 分(不含),输出:C
  4. 60分(含)~ 70 分(不含),输出:D
  5. 60分(不含) 以下,输出: E

案例分析:

按照从大到小判断的思路
弹出prompt输入框,让用户输入分数,把这个值取过来保存到变量中
使用多分支 if else if 语句来分别判断输出不同的值

 var score = prompt('请您输入分数:');
        if (score >= 90) {
        alert('A');
        } else if (score >= 80) {
        alert('B');
        } else if (score >= 70) {
        alert('C');
        } else if (score >= 60) {
        alert('D');
        } else {
        alert('E');
        }

当输入对应的分数时,就会弹出对应的等级。

四、三元表达式

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

表达式1 ? 表达式2 : 表达式3;

执行思路:

如果表达式1为 true ,则返回表达式2的值,如果表达式1为 false,则返回表达式3的值
简单理解: 就类似于 if else (双分支) 的简写
例如:输入一个补0的案例,用户输入数字,如果数字小于10,则在前面补 0 ,比如01,09 ,如果数字大于10,则不需要补,比如 20。
案例分析:
用户输入0~59之间的一个数字,如果数字小于10,则在这个数字前面补0,(加0) 否则 不做操作,用一个变量接受这个返回值,输出

var num = prompt('请输入一个 0 ~ 59 之间的数');
        var result = num < 10 ? '0'+ num : num;
        alert(result);

当输入2时,进行补0操作:

当输入10时,直接打印结果:

五、分支流程控制 switch 语句

1、语法结构

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

语法结构:

switch( 表达式 ){
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

switch :开关 转换 , case :小例子 选项

  • 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
  • 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号不能跟判断条件。
  • switch 表达式的值会与结构中的 case 的值做比较 ,如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束
  • 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码

注意: 执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。

例如输入一个查询成绩的案例,要求同上面的if-else-if语句。

var s = prompt('请输入成绩:');
var n = parseInt(s/10);
var k = null;
switch(n){
    case 10: {
        k = 'A';
        break;
    }
    case 9:{
        k = 'B';
        break;
    }
    case 8:{
        k = 'C';
        break;
    }
    case 7:{
        k = 'D';
        break;
    }
    default: k = 'E';
}
console.log('您的成绩等级为:'+k);

当输入100分时,输出:

当输入73分时,输出:

2、switch 语句和 if else if 语句的区别

  • 一般情况下,它们两个语句可以相互替换switch…case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
  • switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得判断多少次。
  • 当分支比较少时,if… else语句的执行效率比 switch语句高。
  • 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。

到此这篇关于JavaScript流程控制(分支)的文章就介绍到这了,更多相关JavaScript流程控制内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js数据类型转换与流程控制操作实例分析

    本文实例讲述了js数据类型转换与流程控制操作.分享给大家供大家参考,具体如下: 数据类型转换: //number转换成str // var str=a+''; // console.log(str); // console.log(typeof str); //转换成字符串了 var str2=a.toString(); //强制转换成 string console.log(typeof str2); //str转换成 number var stringNum='789'; var num2=N

  • Javascript基础:运算符与流程控制详解

    目录 1. 运算符(操作符) 1.1 算数运算符 1.2 递增和递减运算符 1.3 比较运算符 1.4 逻辑运算符 1.5 赋值运算符 1.6 运算符优先级 2. 流程控制 2.1 if 的语法结构 2.2 if else双分支语句 2.3 if else if语句(多选1) 2.4 三元表达式 2.5 switch分支流程控制 总结 1. 运算符(操作符) 「运算符」是用于实现赋值.比较和执行算数运算等功能的符号.常用运算符分类如下 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运

  • JavaScript流程控制(循环)

    目录 一.for 循环 二.双重 for 循环 三.while 循环 四.do while 循环 五.循环小结 六.continue break 1.continue关键字 2.break关键字 一.for 循环 在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件.由循环体及循环的终止条件组成的语句,被称之为循环语句. for 循环主要用于把某些代码循环若干次,通常跟计数有关系. 其语法结构如下: for(初始化变量; 条件表达式; 操作表达式 ){ //循环体

  • Javascript异步流程控制之串行执行详解

    这篇文章主要讲一下如何串行执行一组异步任务,例如有下面几个任务,在这里我们用setTimeout模拟一个异步任务: let taskA = () => setTimeout(() => console.log('run task A'), 100); let taskB = () => setTimeout(() => console.log('run task B'), 50); let taskC = () => setTimeout(() => console.l

  • 原生js中运算符及流程控制示例详解

    运算符 算数:+ 加.- 减.* 乘./ 除.% 求模 赋值:=.+=.-=.*=./=.%= 关系:>.<. >=. <=. ==. ===. !=. !== 逻辑:||或.&&与.!否 实例1.求模 window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0 } 实例2.隔行变色 <body> <ol> <li>取模:就是求余数</li

  • JavaScript流程控制(分支)

    目录 一.流程控制 二.顺序流程控制 三.分支流程控制 if 语句 1.分支结构 2. if 语句 3. if else语句(双分支语句) 4.if else if 语句(多分支语句) 四.三元表达式 五.分支流程控制 switch 语句 1.语法结构 2.switch 语句和 if else if 语句的区别 一.流程控制 流程控制主要有三种结构: 分别是顺序结构 分支结构 循环结构 这三种结构代表三种代码执行的顺序. 二.顺序流程控制 顺序结构是程序中最简单.最基本的流程控制,它没有特定的语

  • 一起来了解python的if流程控制

    目录 1.流程控制和分支结构 流程控制 分支结构 2.if的单分支结构 3.if的双分支结构 4.if的多分支结构 5.巢状分支 总结 1.流程控制和分支结构 流程控制 概念: 流程:代码执行的过程 流程控制:对代码执行过程的管控 流程控制三大结构: (1)顺序结构:从上到下,代码依次执行 (2)分支结构: 一共4个 (3)循环结构:while for 分支结构 (1) 单分支 (2) 双分支 (3) 多分支 (4) 巢状分支 2.if的单分支结构 语法: if 条件表达式: 代码块 运行机制:

  • 浅谈JavaScript中的分支结构

    说到JavaScript中的分支结构,我们就不得不提到流程控制这个词,我们所有的程序都是由数据和算法组成的. 程序=数据+算法 通常我们所说的算法都可以通过"顺序","分支","循环"三种结构来组合完成. 在ECMA中规定了一些语句(也称为流程控制语句,分支结构语句),从本质上来说,这些语句定义了ECMAScript中的主要语法,语句通常使用一个或者多个关键字来完成给定任务. 1.1 if 语句 if 语句 - 只有当指定条件为 true 时,使

  • Erlang中的函数与流程控制介绍

    一:函数 1:在Erlang中,[名字相同但参数数目不同]的两个函数是完全不同的函数. 2:其他模块内的函数用完全限定名称 被调用: 复制代码 代码如下: -module(sort1). -export([reverse_sort/1, sort/1]). reverse_sort(L) ->         lists1:reverse(sort(L)). sort(L) ->         lists:sort(L). 3:子句间以分号[;]分隔,在最后的结尾处以[.]结尾. 4:每个函

  • php学习之流程控制实现代码

    复制代码 代码如下: <?php /* * 流程控制 * * 一.顺序结构 * 二.分支结构--条件结构--选择结构 * 1.单路分支 * //条件bool,true或false,> < == !- & || ! * if(条件) * 执行下面一条语句 * if(条件) * { * 代码段; * 代码段; * } * * 2.双路分支 * 使用else从句 * * if(条件) * 执行一条语句 * else * 执行一条语句 * if(条件){ * 一条或多条代码 * }els

  • 详解Node.js串行化流程控制

    串行任务:需要一个接着一个坐的任务叫做串行任务. 可以使用回调的方式让几个异步任务按顺序执行,但如果任务过多,必须组织一下,否则过多的回调嵌套会把代码搞得很乱. 为了用串行化流程控制让几个异步任务按顺序执行,需要先把这些任务按预期的执行顺序放到一个数组中,这个数组将起到队列的作用:完成一个任务后按顺序从数组中取出下一个. 数组中的每个任务都是一个函数.任务完成后应该调用一个处理器函数,告诉它错误状态和结果. 为了演示如何实现串行化流程控制,我们准备做个小程序,让它从一个随机选择的RSS预定源中获

  • PHP基础学习之流程控制的实现分析

    PHP 有三大流程控制:顺序控制,分支控制,循环控制. 1.顺序控制:就是程序按顺序从上往下一步一步的执行. 2.分支控制:程序有选择的执行.又分单分支,多分支,多重分支. a.单分支:基本语法结构: if(条件表达式){ 语句; //.....; } 提示:条件表达式不管有多复杂,最终就是true或者false; eg: a=11; if(a>10){ echo "a>10"; } b.多分支:基本语法: if(条件表达式){ 语句; //.....; }else{ 语句

随机推荐