百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

JavaScript流程控制语句:选择结构(if和switch)

toyiye 2024-08-19 01:09 5 浏览 0 评论

代码块

用{}包围起来的代码,就是代码块。

JS中的代码块,只具有分组的作用,没有其他的用途。

代码块中的内容,在外部是完全可见的。举例:

{    var a = 2;    alert("qianguyihao");    console.log("永不止步");}console.log("a = " + a);

打印结果:(可以看出,虽然变量 a 是定义在代码块中的,但是在外部依然可以访问)

永不止步a = 2

流程控制语句

在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的。所以,我们必须清楚每条语句的执行流程。而且,很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。

流程控制语句分类

  • 顺序结构
  • 选择结构:if语句、switch语句
  • 循环结构:while语句、for语句

顺序结构

按照代码的先后顺序,依次执行。结构图如下:

if语句

if语句有以下三种。

1、条件判断语句

条件成立才执行。如果条件不成立,那就什么都不做。

格式:

if (条件表达式) {    // 条件为真时,做的事情}

2、条件分支语句

格式1:

if (条件表达式) {    // 条件为真时,做的事情} else {    // 条件为假时,做的事情}

格式2:(多分支的if语句)

if (条件表达式1) {    // 条件1为真时,做的事情} else if (条件表达式2) {    // 条件1不满足,条件2满足时,做的事情} else if (条件表达式3) {    // 条件1、2不满足,条件3满足时,做的事情} else {    // 条件1、2、3都不满足时,做的事情}

以上所有的语句体中,只执行其中一个。

做个题目

根据BMI(身体质量指数)显示一个人的体型。BMI指数,就是体重、身高的一个计算公式。公式是:BMI =体重÷身高的平方比如,老师的体重是81.6公斤,身高是1.71米。那么老师的BMI就是  81.6 ÷ 1.712     等于 27.906022365856163过轻:低于18.5正常:18.5-24.99999999过重:25-27.9999999肥胖:28-32非常肥胖, 高于32用JavaScript开发一个程序,让用户先输入自己的体重,然后输入自己的身高(弹出两次prompt框)。计算它的BMI,根据上表,弹出用户的身体情况。比如“过轻” 、 “正常” 、“过重” 、 “肥胖” 、“非常肥胖”。

答案

写法1:

//第一步,输入身高和体重var height = parseFloat(prompt("请输入身高,单位是米"));var weight = parseFloat(prompt("请输入体重,单位是公斤"));//第二步,计算BMI指数var BMI = weight / Math.pow(height, 2);//第三步,if语句来判断。注意跳楼现象if (BMI < 18.5) {    alert("偏瘦");} else if (BMI < 25) {    alert("正常");} else if (BMI < 28) {    alert("过重");} else if (BMI <= 32) {    alert("肥胖");} else {    alert("非常肥胖");}

写法2:

//第一步,输入身高和体重var height = parseFloat(prompt("请输入身高,单位是米"));var weight = parseFloat(prompt("请输入体重,单位是公斤"));//第二步,计算BMI指数var BMI = weight / Math.pow(height, 2);//第三步,if语句来判断。注意跳楼现象if (BMI > 32) {    alert("非常肥胖");} else if (BMI >= 28) {    alert("肥胖");} else if (BMI >= 25) {    alert("过重");} else if (BMI >= 18.5) {    alert("正常")} else {    alert("偏瘦");}

if语句的嵌套

我们通过下面这个例子来引出if语句的嵌套。

一个加油站为了鼓励车主多加油,所以加的多有优惠。92号汽油,每升6元;如果大于等于20升,那么每升5.9;97号汽油,每升7元;如果大于等于30升,那么每升6.95编写JS程序,用户输入自己的汽油编号,然后输入自己加多少升,弹出价格。

代码实现如下:

    //第一步,输入var bianhao = parseInt(prompt("您想加什么油?填写92或者97"));var sheng = parseFloat(prompt("您想加多少升?"));//第二步,判断if (bianhao == 92) {    //编号是92的时候做的事情    if (sheng >= 20) {        var price = sheng * 5.9;    } else {        var price = sheng * 6;    }} else if (bianhao == 97) {    //编号是97的时候做的事情    if (sheng >= 30) {        var price = sheng * 6.95;    } else {        var price = sheng * 7;    }} else {    alert("不好意思,没有这个编号的汽油!");}alert("价格是" + price);

switch语句(条件分支语句)

switch语句也叫条件分支语句。

格式:

switch(表达式) {    case 值1:        语句体1;        break;    case 值2:        语句体2;        break;    ...    ...    default:        语句体 n+1;        break;}

注意

  • switch 可以理解为“开关、转换” 。case 可以理解为“案例、选项”。
  • switch 后面的括号里可以是表达式或者, 通常是一个变量(通常做法是:先把表达式或者值存放到变量中)。
  • JS 是属于弱类型语言,case 后面的值1、值2可以是 'a'、6、true 等任意数据类型的值,也可以是表达式。

switch语句的执行流程

流程图如下:

执行流程如下:

(1)首先,计算出表达式的值,和case依次比较,一旦有对应的值,就会执行相应的语句,在执行的过程中,遇到break就会结束。

(2)然后,如果所有的case都和表达式的值不匹配,就会执行default语句体部分。

switch 语句的结束条件【非常重要】

  • 情况a:遇到break就结束,而不是遇到default就结束。(因为break在此处的作用就是退出switch语句)
  • 情况b:执行到程序的末尾就结束。

我们来看下面的两个例子就明白了。

case穿透的问题

switch 语句中的break可以省略,但一般不建议(对于新手而言)。否则结果可能不是你想要的,会出现一个现象:case穿透

举例1:(case穿透的情况)

    var num = 4;    //switch判断语句    switch (num) {        case 1:            console.log("星期一");            break;        case 2:            console.log("星期二");            break;        case 3:            console.log("星期三");            break;        case 4:            console.log("星期四");        //break;        case 5:            console.log("星期五");        //break;        case 6:            console.log("星期六");            break;        case 7:            console.log("星期日");            break;        default:            console.log("你输入的数据有误");            break;    }

上方代码的运行结果,可能会令你感到意外:

星期四星期五星期六

上方代码的解释:因为在case 4和case 5中都没有break,那语句走到case 6的break才会停止。

举例2

    //switch判断语句    var number = 5;    switch (number) {        default:            console.log("我是defaul语句");            // break;        case (2):              console.log("第二个呵呵:" + number);            //break;        case (3):              console.log("第三个呵呵:" + number);            break;        case (4):              console.log("第四个呵呵:" + number);            break;    }

上方代码的运行结果,你也许会意外:

我是defaul语句第二个呵呵:5第三个呵呵:5

上方代码的解释:代码走到 default 时,因为没有遇到 break,所以会继续往下走,直到遇见 break 或者走到程序的末尾。 从这个例子可以看出:switch 语句的结束与 default 的顺序无关。

switch 语句的实战举例:替换 if 语句

我们实战开发中,经常需要根据接口的返回码 retCode ,来让前端做不同的展示。

这种场景是业务开发中经常出现的,请一定要掌握。然而,很多人估计会这么写:

写法1:(不推荐。这种写法太挫了)

let retCode = 1003; // 返回码 retCode 的值可能有很多种情况if (retCode == 0) {    alert('接口联调成功');} else if (retCode == 101) {    alert('活动不存在');} else if (retCode == 103) {    alert('活动未开始');} else if (retCode == 104) {    alert('活动已结束');} else if (retCode == 1001) {    alert('参数错误');} else if (retCode == 1002) {    alert('接口频率限制');} else if (retCode == 1003) {    alert('未登录');} else if (retCode == 1004) {    alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');} else {    // 其他异常返回码    alert('系统君失联了,请稍候再试');}

如果你是按照上面的 if else的方式来写各种条件判断,说明你的代码水平太初级了,会被人喷的,千万不要这么写。那要怎么改进呢?继续往下看。

写法2:(推荐。通过 return 的方式,将上面的写法进行改进)

let retCode = 1003; // 返回码 retCode 的值可能有很多种情况handleRetCode(retCode);// 方法:根据接口不同的返回码,处理前端不同的显示状态function handleRetCode(retCode) {    if (retCode == 0) {        alert('接口联调成功');        return;    }    if (retCode == 101) {        alert('活动不存在');        return;    }    if (retCode == 103) {        alert('活动未开始');        return;    }    if (retCode == 104) {        alert('活动已结束');        return;    }    if (retCode == 1001) {        alert('参数错误');        return;    }    if (retCode == 1002) {        alert('接口频率限制');        return;    }    if (retCode == 1003) {        alert('未登录');        return;    }    if (retCode == 1004) {        alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');        return;    }    // 其他异常返回码    alert('系统君失联了,请稍候再试');    return;}

上面的写法2,是比较推荐的写法:直接通过 return 的方式,让 function 里的代码不再继续往下走,这就达到目的了。对了,因为要用到 return ,所以需要单独封装到一个 function 里面。

如果你以后看到有前端小白采用的是写法1,请一定要把写法2传授给他:不需要那么多的 if else,直接用 return 返回就行了。

写法3:(推荐。将 if else 改为 switch)

let retCode = 1003; // 返回码 retCode 的值可能有很多种情况switch (retCode) {    case 0:        alert('接口联调成功');        break;    case 101:        alert('活动不存在');        break;    case 103:        alert('活动未开始');        break;    case 104:        alert('活动已结束');        break;    case 1001:        alert('参数错误');        break;    case 1002:        alert('接口频率限制');        break;    case 1003:        alert('未登录');        break;    case 1004:        alert('(风控用户)提示 活动太火爆啦~军万马都在挤,请稍后再试');        break;    // 其他异常返回码    default:        alert('系统君失联了,请稍候再试');        break;}

在实战开发中,方式3是非常推荐的写法,甚至比方式2还要好。我们尽量不要写太多的 if 语句,避免代码嵌套过深。

switch 语句的优雅写法:适时地去掉 break

我们先来看看下面这段代码:(不推荐)

let day = 2;switch (day) {    case 1:        console.log('work');        break;    case 2:        console.log('work');        break;    case 3:        console.log('work');        break;    case 4:        console.log('work');        break;    case 5:        console.log('work');        break;    case 6:        console.log('relax');        break;    case 7:        console.log('relax');        break;    default:        break;}

上面的代码,咋一看,好像没啥毛病。但你有没有发现,重复代码太多了?

实战开发中,凡是有重复的地方,我们都必须要想办法简化。写代码就是在不断重构的过程。

上面的代码,可以改进如下:(推荐,非常优雅)

let day = 2;switch (day) {    case 1:    case 2:    case 3:    case 4:    case 5:        console.log('work');        break; // 在这里放一个 break    case 6:    case 7:        console.log('relax');        break; // 在这里放一个 break    default:        break;}}

你没看错,就是上面的这种写法,能达到同样的效果,非常优雅。

小白可能认为这样的写法可读性不强,所以说他是小白。我可以明确告诉你,改进后的这种写法,才是最优雅的、最简洁、可读性最好的。

相关推荐

# Python 3 # Python 3字典Dictionary(1)

Python3字典字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中,格式如...

Python第八课:数据类型中的字典及其函数与方法

Python3字典字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值...

Python中字典详解(python 中字典)

字典是Python中使用键进行索引的重要数据结构。它们是无序的项序列(键值对),这意味着顺序不被保留。键是不可变的。与列表一样,字典的值可以保存异构数据,即整数、浮点、字符串、NaN、布尔值、列表、数...

Python3.9又更新了:dict内置新功能,正式版十月见面

机器之心报道参与:一鸣、JaminPython3.8的热乎劲还没过去,Python就又双叒叕要更新了。近日,3.9版本的第四个alpha版已经开源。从文档中,我们可以看到官方透露的对dic...

Python3 基本数据类型详解(python三种基本数据类型)

文章来源:加米谷大数据Python中的变量不需要声明。每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建。在Python中,变量就是变量,它没有类型,我们所说的"类型"是变...

一文掌握Python的字典(python字典用法大全)

字典是Python中最强大、最灵活的内置数据结构之一。它们允许存储键值对,从而实现高效的数据检索、操作和组织。本文深入探讨了字典,涵盖了它们的创建、操作和高级用法,以帮助中级Python开发...

超级完整|Python字典详解(python字典的方法或操作)

一、字典概述01字典的格式Python字典是一种可变容器模型,且可存储任意类型对象,如字符串、数字、元组等其他容器模型。字典的每个键值key=>value对用冒号:分割,每个对之间用逗号,...

Python3.9版本新特性:字典合并操作的详细解读

处于测试阶段的Python3.9版本中有一个新特性:我们在使用Python字典时,将能够编写出更可读、更紧凑的代码啦!Python版本你现在使用哪种版本的Python?3.7分?3.5分?还是2.7...

python 自学,字典3(一些例子)(python字典有哪些基本操作)

例子11;如何批量复制字典里的内容2;如何批量修改字典的内容3;如何批量修改字典里某些指定的内容...

Python3.9中的字典合并和更新,几乎影响了所有Python程序员

全文共2837字,预计学习时长9分钟Python3.9正在积极开发,并计划于今年10月发布。2月26日,开发团队发布了alpha4版本。该版本引入了新的合并(|)和更新(|=)运算符,这个新特性几乎...

Python3大字典:《Python3自学速查手册.pdf》限时下载中

最近有人会想了,2022了,想学Python晚不晚,学习python有前途吗?IT行业行业薪资高,发展前景好,是很多求职群里严重的香饽饽,而要进入这个高薪行业,也不是那么轻而易举的,拿信工专业的大学生...

python学习——字典(python字典基本操作)

字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包含的元素个数不限,值...

324页清华教授撰写【Python 3 菜鸟查询手册】火了,小白入门字典

如何入门学习python...

Python3.9中的字典合并和更新,了解一下

全文共2837字,预计学习时长9分钟Python3.9正在积极开发,并计划于今年10月发布。2月26日,开发团队发布了alpha4版本。该版本引入了新的合并(|)和更新(|=)运算符,这个新特性几乎...

python3基础之字典(python中字典的基本操作)

字典和列表一样,也是python内置的一种数据结构。字典的结构如下图:列表用中括号[]把元素包起来,而字典是用大括号{}把元素包起来,只不过字典的每一个元素都包含键和值两部分。键和值是一一对应的...

取消回复欢迎 发表评论:

请填写验证码