JS （十一）选择语句

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

有时我们需要根据不同条件执行不同的操作。

我们可以使用 if 语句和三元运算符 ?（也称为“问号”运算符）来实现。

1.选择语句 - if

1.1 “if” 语句

if(...) 语句计算括号里的条件表达式，如果计算结果是 true，就会执行对应的代码块。

例如：

var year = prompt('哪一年发布了ES2015?');

if (year == 2015) {
    alert( 'You are right!');
}

在上面这个例子中，条件是一个简单的相等性检查（year == 2015），它还可以更复杂。

1.2 布尔转换

if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型。(隐式转换)

回顾一下 类型转换 一介中的转换规则：

数字 0、空字符串 ""、null、undefined 和 NaN 都会被转换成 false。
其他值被转换为 true。

所以，下面这个条件下的代码永远不会执行：

if (0) { // 0 是 false
  ...
}

但下面的条件 —— 始终有效：

if (1) { // 1 是 true
  ...
}

1.3 “else” 语句

if 语句有时会包含一个可选的 “else” 块。如果判断条件不成立，就会执行它内部的代码。

例如：

var year = prompt('哪一年发布了ES2015?');

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // 2015 以外的任何值
}

1.4 多个条件：“else if”

有时我们有多个不同的条件，需要执行各自不同的代码块。就可以使用 else if 子句实现。

例如：

var year = prompt('哪一年发布了ES2015');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

在上面的代码中，JavaScript 先先检查 year < 2015。如果条件不符合，就会转到下一个条件 year > 2015。如果这个条件也不符合，则会显示最后一个 alert。

可以有更多的 else if 块。结尾的 else 是可选的。

1.5 练习

根据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("偏瘦");
}

用户输入成绩，
如果成绩大于等于85，那么提示优秀；
否则如果成绩大于等于70，那么提示良好；
否则如果成绩60~69，那么提示及格；
否则，不及格

var score = prompt('请输入成绩');

        if (score >= 85) {
            alert("优秀");
        } else if (score >= 70) {
            alert("良好");
        } else if (score >= 60 && score <= 69) {
            alert("及格");
        } else {
            alert("不及格");
        }

一个加油站为了鼓励车主多加油，所以加的多有优惠。
95号汽油，每升9元；如果大于等于20升，那么每升8.5；
98号汽油，每升10元；如果大于等于30升，那么每升9.5;
编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格。

JS （十一）选择语句_代码块

代码实现如下：

//第一步，输入
var number = parseInt(prompt("您想加什么油？填写95或者98"));
var Litres = parseFloat(prompt("您想加多少升？"));

//第二步，判断
if (number == 95) {
    //编号是95的时候做的事情
    if (Litres >= 20) {
        var price = Litres * 8.5;
    } else {
        var price = Litres * 9;
    }
} else if (number == 98) {
    //编号是98的时候做的事情
    if (Litres >= 30) {
        var price = Litres * 9.5;
    } else {
        var price = Litres * 10;
    }
} else {
    alert("对不起，没有这个编号的汽油！");
}

alert("价格是" + price);

实现使用 `prompt` 进行登陆校验的代码。

如果访问者输入 `"Admin"`，那么使用 `prompt` 引导获取密码，如果输入的用户名为空 —— 显示 “Canceled”，如果是其他字符串 —— 显示 “I don’t know you”。

密码的校验规则如下：

- 如果输入的是 “TheMaster”，显示 “Welcome!”，
- 其他字符串 —— 显示 “Wrong password”，
- 空字符串，显示 “Canceled.”。

提示：将空字符串输入，prompt 会获取到一个空字符串 `''`。

流程图：

JS （十一）选择语句_字符串_02

2.选择语句 - switch

switch 语句可以替代多个 if 判断。

switch 语句为多分支选择的情况提供了一个更具描述性的方式。

2.1 “switch”语法

switch 语句有至少一个 case 代码块和一个可选的 default 代码块。

就像这样：

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    break

  case 'value2':  // if (x === 'value2')
    ...
    break

  default:
    ...
    break
}

比较 x 值与第一个 case（也就是 value1）是否严格相等，然后比较第二个 case（value2）以此类推。
如果相等，switch 语句就执行相应 case 下的代码块，直到遇到最靠近的 break 语句（或者直到 switch语句末尾）。
如果没有符合的 case，则执行 default 代码块（如果 default 存在）。

2.2 “switch”示例

switch 的例子（高亮的部分是执行的 case 部分）：

var a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
    break;
  case 4:
    alert( 'Exactly!' );
    break;
  case 5:
    alert( 'Too large' );
    break;
  default:
    alert( "I don't know such values" );
}

这里的 switch 从第一个 case 分支开始将 a 的值与 case 后的值进行比较，第一个 case 后的值为 3 匹配失败。

然后比较 4。匹配，所以从 case 4 开始执行直到遇到最近的 break。

如果没有 break，程序将不经过任何检查就会继续执行下一个 case。

无 break 的例子：

var a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
  case 4:
    alert( 'Exactly!' );
  case 5:
    alert( 'Too big' );
  default:
    alert( "I don't know such values" );
}

在上面的例子中我们会看到连续执行的三个 alert：

alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );

2.3 类型很关键

强调一下，这里的相等是严格相等。被比较的值必须是相同的类型才能进行匹配。

比如，我们来看下面的代码：

var arg = prompt("Enter a value?")
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );
    break;

  case '2':
    alert( 'Two' );
    break;

  case 3:
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' )
}

在 prompt 对话框输入 0、1，第一个 alert 弹出。
输入 2，第二个 alert 弹出。
但是输入 3，因为 prompt 的结果是字符串类型的 "3"，不严格相等 === 于数字类型的 3，所以 case 3不会执行！因此 case 3 部分是一段无效代码。所以会执行 default 分支。

2.4 练习

（1）将 “switch” 结构重写为 “if” 结构

将下面 switch 结构的代码写成 if..else 结构：

switch (browser) {
  case 'Edge':
    alert( "You've got the Edge!" );
    break;

  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( 'Okay we support these browsers too' );
    break;

  default:
    alert( 'We hope that this page looks ok!' );
}

（2）将 “if” 结构重写为 “switch” 结构

用 switch 重写以下代码：

var a = +prompt('a?', '');

if (a == 0) {
  alert( 0 );
}
if (a == 1) {
  alert( 1 );
}

if (a == 2 || a == 3) {
  alert( '2,3' );
}

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

返回列表

上一篇：美国私募十年

下一篇：JS （十） Math对象/Date对象

“JS （十一）选择语句” 的相关文章

【黄啊码】windows如何使用tp5.1配置workerman和gateway（不要看官方文档，不要抄网友文档，OK？）1年前 (2023-02-02)

非dbca静默安装~字符集设定1年前 (2023-02-02)

Angularjs——初识AngularJS1年前 (2023-02-02)

如何站在开发者的角度理解框架的设计思想？1年前 (2023-02-02)

day04-Vue011年前 (2023-02-02)

【Redis实战专题】「性能监控系列」全方位探索Redis的性能监控以及优化指南1年前 (2023-02-02)

golang 为图片加水印1年前 (2023-02-02)

C. Equal Frequencies1年前 (2023-02-02)

学习笔记——Spring中组件扫描（包含扫描、排除扫描）、Spring中完全注解开发；Spring整合Junit4步骤1年前 (2023-02-02)

go语言写http踩得坑1年前 (2023-02-02)

JS （十一） 选择语句