JavaScript分支語(yǔ)句和循環(huán)語(yǔ)句示例詳解

更新時(shí)間：2025年08月04日 10:20:35 作者：良木林

JavaScript作為一種廣泛使用的編程語(yǔ)言,它的流程控制語(yǔ)句是構(gòu)建邏輯和實(shí)現(xiàn)功能的基礎(chǔ),這篇文章主要介紹了JavaScript分支語(yǔ)句和循環(huán)語(yǔ)句的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

分支語(yǔ)句

單分支if

只判斷一次，條件為真就執(zhí)行，為假直接跳過(guò)。

if (條件) {
  // 條件為真時(shí)執(zhí)行
}

let age = 18;
if (age >= 18) {
  console.log('成年');
}

雙分支if-else

條件為真執(zhí)行 A，否則執(zhí)行 B。

if (條件) {
  // 條件為真
} else {
  // 條件為假
}

let score = 59;
if (score >= 60) {
  console.log('及格');
} else {
  console.log('完蛋');
}

三元運(yùn)算符? :

把雙分支 if-else 縮成一行，必須有 else，并返回一個(gè)值。

條件 ? 值A(chǔ) : 值B

let num = prompt('請(qǐng)輸入一個(gè)數(shù)字')
num = num < 10 ? 0 + num : num
//0 + num是字符串相加的形式，給個(gè)位數(shù)補(bǔ)一個(gè)0

形式	關(guān)鍵字	行數(shù)	返回值	使用場(chǎng)景
單 if	`if`	多	無(wú)	只做一件事
if-else	`if...else`	多	無(wú)	二選一
三元運(yùn)算符	`? :`	1	有	簡(jiǎn)單二選一，要返回值

三元運(yùn)算符必須有 else；if 可以沒(méi)有。
三元運(yùn)算符不能寫(xiě)多條語(yǔ)句；復(fù)雜邏輯用 if-else。

switch分支

switch 就是“多選一”的快捷 if-else 鏈——把同一個(gè)變量/表達(dá)式的不同取值，一一對(duì)照?qǐng)?zhí)行。

基本語(yǔ)法

switch (表達(dá)式) {
  case 值1:
    語(yǔ)句塊1;
    break;          // 記得 break，否則會(huì)繼續(xù)往下“穿透”
  case 值2:
    語(yǔ)句塊2;
    break;
  ...
  default:          // 相當(dāng)于最后的 else
    默認(rèn)語(yǔ)句;
}

let day = 3;
switch (day) {
  case 1:
    console.log('周一');
    break;
  case 2:
    console.log('周二');
    break;
  case 3:
    console.log('周三');
    break;
  default:
    console.log('未知');
}
// 輸出：周三

幾個(gè)注意點(diǎn)

全等比較
switch 用的是 ===，不會(huì)自動(dòng)類型轉(zhuǎn)換。

switch ('2') {
  case 2:        // 不會(huì)命中，因?yàn)?'2' !== 2
    ...
}

break 穿透
忘寫(xiě) break 會(huì)把下面所有 case 都執(zhí)行一遍。
有時(shí)故意利用穿透做“合并”：
```
switch (score) {
  case 5:
  case 4:
    console.log('優(yōu)秀'); // 4 和 5 都會(huì)走這里
    break;
}
```
default 可省
如果所有 case 都不匹配且沒(méi)有 default，就什么都不做。

何時(shí)用 switch？

場(chǎng)景	推薦寫(xiě)法
同一個(gè)變量的離散值	switch
區(qū)間判斷（> <）	if-else
復(fù)雜邏輯 / 多條件	if-else / 對(duì)象映射

“變量等值多選一，switch 比 if-else 更清爽；記得 break 防穿透，default 兜底別忘掉。”

switch小練習(xí)：ATM存款機(jī)

利用while循環(huán)的特點(diǎn)創(chuàng)建無(wú)限循環(huán)的用戶彈窗與用戶進(jìn)行交互；用switch語(yǔ)句創(chuàng)建存款、取款等不同服務(wù)。注意處理余額不足、輸入不當(dāng)?shù)葐?wèn)題。

<script>
        let money = 1000;
        while (true) {
            const num = Number(prompt(
                `請(qǐng)選擇操作：\n1. 存錢\n2. 取錢\n3. 查看余額\n4. 退出`
            ));

            if (num === 4) break;            // 退出
            if (isNaN(num) || num < 1 || num > 3) {
                alert('請(qǐng)輸入 1~4 之間的數(shù)字！');
                continue;
            }

            switch (num) {
                case 1: {
                    const add = Number(prompt('請(qǐng)輸入存錢金額'));
                    if (isNaN(add) || add <= 0) { alert('金額無(wú)效'); break; }
                    money += add;
                    alert(`存入成功，余額：${money} 元`);
                    break;
                }
                case 2: {
                    const take = Number(prompt('請(qǐng)輸入取錢金額'));
                    if (isNaN(take) || take <= 0) { alert('金額無(wú)效'); break; }
                    if (take > money) { alert('余額不足'); break; }
                    money -= take;
                    alert(`取出成功，余額：${money} 元`);
                    break;        // 漏掉的 break 已補(bǔ)上
                }
                case 3:
                    alert(`當(dāng)前余額：${money} 元`);
                    break;
            }
        }
        alert('感謝使用，再見(jiàn)！');
    </script>

循環(huán)語(yǔ)句

while循環(huán)

while (判斷條件) {
	循環(huán)命令
	條件增量
}

continue & break

break 直接跳出整個(gè)循環(huán)（或 switch），循環(huán)結(jié)束；

continue 立即跳過(guò)本次迭代，繼續(xù)下一輪循環(huán)。

關(guān)鍵字	作用范圍	效果描述	常見(jiàn)場(chǎng)景
`break`	循環(huán) / switch	立即終止當(dāng)前結(jié)構(gòu)，后續(xù)不再執(zhí)行	找到目標(biāo)值后提前結(jié)束
`continue`	僅循環(huán)	跳過(guò)本次剩余代碼，繼續(xù)下一輪	過(guò)濾/跳過(guò)不想要的值

代碼示例

// break：找到 5 就停
for (let i = 1; i <= 10; i++) {
  if (i === 5) break;   // 遇到 5 立即跳出
  console.log(i);       // 1 2 3 4
}

// continue：跳過(guò) 5
for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // 跳過(guò) 3
  console.log(i);        // 1 2 4 5
}

break “炸” 整個(gè)循環(huán)，continue “跳過(guò)” 這一回。

for循環(huán)

for (let i = 0; i < 3; i++) {
  console.log(i);   // 0 1 2
}

三個(gè)格子：起點(diǎn); 條件; 步長(zhǎng)
let 代替 C 的 int，用完就丟（不會(huì)泄漏出來(lái)）。

坑	例子	結(jié)果
忘更新	`for(let i=0; i<3; ) { ... }`	死循環(huán)
用 `var`	`for(var i=0; i<3; i++) { }` `console.log(i)`	循環(huán)外還能打印 i（3）
條件寫(xiě)錯(cuò)	`for(let i=0; i>-1; i++)`	死循環(huán)

let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum += i;
}
console.log(sum);   // 15

明確循環(huán)次數(shù)用for，不明確用while

for循環(huán)小練習(xí)1：九九乘法表

固定的兩層for循環(huán)。主要需要?jiǎng)幽X子的點(diǎn)在于在輸出中添加標(biāo)簽并設(shè)置css屬性。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            border: 1px solid blue;
            border-collapse: collapse;
            margin: 2px 2px;
            height: 25px;
            width: 80px;
            text-align: center;
            border-radius: 4px;
            box-shadow: 1px 1px 1px 1px grey;
            color: hotpink;
        }
    </style>
</head>

<body>
    <script>
        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${i} x ${j} = ${i * j}</span>`)
            }
            document.write('
')
        }
    </script>
</body>

for循環(huán)小練習(xí)2：冒泡排序

和C語(yǔ)言冒泡排序基本相同，在數(shù)組的聲明上略微有些不同。

<script>
        let n = +prompt('您想輸入幾個(gè)數(shù)字？')
        let arr = []
        for (let i = 0; i < n; i++) {
            arr[i] = + prompt(`請(qǐng)您輸入第${i + 1}個(gè)數(shù)字：`)
        }
        for (let i = 0; i < arr.length - 1; i++) {
            for (let j = i + 1; j < arr.length; j++) {
                if (arr[i] > arr[j]) {
                    let t = arr[i]
                    arr[i] = arr[j]
                    arr[j] = t
                }
            }
        }
        document.write('排序后的順序?yàn)椋?)
        for (let i = 0; i < arr.length; i++) {
            if (i != arr.length - 1) document.write(`${arr[i]}，`)
            else document.write(`${arr[i]}。`)
        }
    </script>

總結(jié)

到此這篇關(guān)于JavaScript分支語(yǔ)句和循環(huán)語(yǔ)句的文章就介紹到這了,更多相關(guān)js分支語(yǔ)句和循環(huán)語(yǔ)句內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: