[快速入门前端 44] JavaScript：条件判断 (1) if-else 语句

if-else

在 if-else 条件判断中，又依结构分为 if、if-else、和 if-elseif-else。

if 语句

if 语句在执行中，会先对括号中的条件表达式进行求值，若条件为 true，会执行后面区块内 (大括号内) 的一行或多行程式，而若条件为 false 则跳过此区块的程式继续往下执行。

语法：

if ( 条件表达式 ) {// 条件为 true 时会执行区块中的程式}

範例：

if (true) {    console.log("範例一"); // 执行}if (false) {    console.log("範例二"); // 不执行}if (2 > 1) { // 条件 2 > 1 为 true    console.log("範例三"); // 执行}let a = 10;if (a > 30) { // 条件 a > 30 为 false    console.log("範例四"); // 不执行}// 此範例会输出 "範例一"、"範例三"

前面我们的範例中都只有写一个条件，但其实 if 中的条件可以以逻辑运算子连接，例如 变数 > 1 && 变数 < 10，同时进行多个条件的判断。

範例：

let a = 10;let b = 20;if (a > 8 && b < 30) { // true    console.log("a 大于 8，且 b 小于 30"); // 执行}if (a > 15 || b < 30) { // true    console.log("a 大于 15，或 b 小于 30"); // 执行}if (a > 15 || b < 10) { // false    console.log("a 大于 15，或 b 小于 10"); // 不执行}

if-else 语句

在 if 语句中，我们只能靠判断来决定是否要执行区块中的程式，那当我们需要在判断为 false 时执行另一段程式时就会需要用到 else 来表示「 除了满足 if 条件之外的其他状况 」。

语法：

if ( 条件表达式 ) {// 条件为 true 时会执行区块中的程式}else {    // 不满足 if 条件时执行这边}

範例：

// 在情境中有两种情况，及格或不及格，所以我们可以利用变数是否 >= 60 判断及格与否并决定要输出哪个字串let score = 87;if (score >= 60) { // true    console.log("你及格了"); // 执行}else {    console.log("你没及格");}

if-elseif-else 语句

当我们需要判断是否满组多种情境时，可以使用 if... else if ... else if ... else，JavaScript 会从if 开始依序进行判断，直到最后若 if 和所有的 else if 皆不满足时才会执行 else。而若在判断某一条件时满足，就会执行该条件后面区块中的程式，且不会继续往下判断，而是直接跳出整组 if-elseif-else 语句。

语法：

if (条件一) {// 当条件一为 true 时会直接进来这个区块中，并且不会继续检核后面的条件是否满足}else if (条件二) {    // 当条件一不满足时，会往下判断条件二是否成立，若成立则执行这个区块，不继续往下}else if (条件三) {    // 当条件一和二皆不满足时才会判断条件三}else {    // 若上述条件一到条件N皆不满足时才会执行最后的 else}

範例：

let score = 90;if (score > 90) { // false，继续判断下一个    console.log("优等");}else if (score > 80) { // true 执行区块中的程式，停止往下判断    console.log("甲等"); // 执行}else {    console.log("乙等"); // 不执行}

if-else 语句的问题

基于 if-else 语句判断成立后就不会继续往下进行判断的特性，若前面的条件包含后面的条件的话，后面的条件就永远不会成立。

let a = 30;if (a > 10) {    console.log("a 大于 10");}else if (a > 20) { // 若 a > 20 的话 a 必定 > 10，会先满足 if 的判断 (a > 10)，所以这个条件的区块永远不会被执行    console.log("a 大于 20")}else {    console.log("其他");}

巢状结构

条件语句其实是一个巢状结构，也就是可以在 if-else 中写另一个 if-else 判断，例如

if(条件) {     if(条件) {    }     else {    }}else {}

(图源自网路)

多层嵌套範例

prompt

在这边我们先来介绍弹出视窗的一种 - prompt()，它是一个用于文字输入的对话视窗，在视窗中会有一个类似于 input 的输入栏位，并且会直接返回使用者输入的值，所以只需要拿变数去接回传值就可以轻鬆的取得输入值。

範例：

let input = prompt();console.log(input);

範例

情境：
让使用者输入分数，判断是否为合理数字并回传转换后的成绩。

// 需要先製作一个让使用者输入值的地方// 并且赋值到变数中以便后续判断或使用let input = prompt();console.log(input); // 在 JS 中可以随时以 console.log 输出变数确认是否正确// 第一步，判断输入值是否合理 (分数不可能为负数且不高于一百)// 若值不合理则根本不需要做进一步判断if (input >= 0 && input <= 100) { // 逻辑为 "且"，所以使用 && 连接    // 如果为 true 会进来这个区块        // 第二步，判断分数并输出转换后的成绩    if (input > 85) {        alert("优等，你很棒");    }    else if (input > 70) {        alert("甲等，再接再励");    }    else if (input > 60) {        alert("乙等，低空飞过");    }    else {        alert("不及格，罚写一百遍");    }}else {    // 如果为 false 会进来这边    alert("你在乱写什么"); // 输出当输入值不合理时的回应}

上一篇：[快速入门前端 43] JavaScript：流程控制和区块
下一篇：[快速入门前端 45] JavaScript：条件判断 (2) switch 语句
系列文章列表：[快速入门前端] 系列文章索引列表