JavaScript分支語句和循環(huán)語句示例詳解
更新時間：2025年08月04日 10:20:35 作者：良木林
JavaScript作為一種廣泛使用的編程語言,它的流程控制語句是構建邏輯和實現(xiàn)功能的基礎,這篇文章主要介紹了JavaScript分支語句和循環(huán)語句的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
分支語句
單分支if
只判斷一次，條件為真就執(zhí)行，為假直接跳過。
if (條件) {
// 條件為真時執(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('完蛋');
}
三元運算符? :
把雙分支 if-else 縮成一行，必須有 else，并返回一個值。
條件 ? 值A : 值B
let num = prompt('請輸入一個數(shù)字')
num = num < 10 ? 0 + num : num
//0 + num是字符串相加的形式，給個位數(shù)補一個0
| 形式 | 關鍵字 | 行數(shù) | 返回值 | 使用場景 |
|---|---|---|---|---|
| 單 if | if | 多 | 無 | 只做一件事 |
| if-else | if...else | 多 | 無 | 二選一 |
| 三元運算符 | ? : | 1 | 有 | 簡單二選一，要返回值 |
- 三元運算符必須有 else；
if可以沒有。 - 三元運算符不能寫多條語句；復雜邏輯用 if-else。
switch分支
switch 就是“多選一”的快捷 if-else 鏈——把同一個變量/表達式的不同取值，一一對照執(zhí)行。
基本語法
switch (表達式) {
case 值1:
語句塊1;
break; // 記得 break，否則會繼續(xù)往下“穿透”
case 值2:
語句塊2;
break;
...
default: // 相當于最后的 else
默認語句;
}
let day = 3;
switch (day) {
case 1:
console.log('周一');
break;
case 2:
console.log('周二');
break;
case 3:
console.log('周三');
break;
default:
console.log('未知');
}
// 輸出：周三
幾個注意點
全等比較
switch用的是===，不會自動類型轉換。switch ('2') { case 2: // 不會命中，因為 '2' !== 2 ... }break 穿透
忘寫break會把下面所有 case 都執(zhí)行一遍。
有時故意利用穿透做“合并”：switch (score) { case 5: case 4: console.log('優(yōu)秀'); // 4 和 5 都會走這里 break; }default 可省
如果所有 case 都不匹配且沒有 default，就什么都不做。
何時用 switch？
| 場景 | 推薦寫法 |
|---|---|
| 同一個變量的離散值 | switch |
| 區(qū)間判斷（> <） | if-else |
| 復雜邏輯 / 多條件 | if-else / 對象映射 |
“變量等值多選一，switch 比 if-else 更清爽；記得 break 防穿透，default 兜底別忘掉。”
switch小練習：ATM存款機
利用while循環(huán)的特點創(chuàng)建無限循環(huán)的用戶彈窗與用戶進行交互；用switch語句創(chuàng)建存款、取款等不同服務。注意處理余額不足、輸入不當?shù)葐栴}。
<script>
let money = 1000;
while (true) {
const num = Number(prompt(
`請選擇操作：\n1. 存錢\n2. 取錢\n3. 查看余額\n4. 退出`
));
if (num === 4) break; // 退出
if (isNaN(num) || num < 1 || num > 3) {
alert('請輸入 1~4 之間的數(shù)字！');
continue;
}
switch (num) {
case 1: {
const add = Number(prompt('請輸入存錢金額'));
if (isNaN(add) || add <= 0) { alert('金額無效'); break; }
money += add;
alert(`存入成功，余額：${money} 元`);
break;
}
case 2: {
const take = Number(prompt('請輸入取錢金額'));
if (isNaN(take) || take <= 0) { alert('金額無效'); break; }
if (take > money) { alert('余額不足'); break; }
money -= take;
alert(`取出成功，余額：${money} 元`);
break; // 漏掉的 break 已補上
}
case 3:
alert(`當前余額：${money} 元`);
break;
}
}
alert('感謝使用，再見！');
</script>
循環(huán)語句
while循環(huán)
while (判斷條件) {
循環(huán)命令
條件增量
}
continue & break
break 直接跳出整個循環(huán)（或 switch），循環(huán)結束；
continue 立即跳過本次迭代，繼續(xù)下一輪循環(huán)。
| 關鍵字 | 作用范圍 | 效果描述 | 常見場景 |
|---|---|---|---|
break | 循環(huán) / switch | 立即終止當前結構，后續(xù)不再執(zhí)行 | 找到目標值后提前結束 |
continue | 僅循環(huán) | 跳過本次剩余代碼，繼續(xù)下一輪 | 過濾/跳過不想要的值 |
代碼示例
// break：找到 5 就停
for (let i = 1; i <= 10; i++) {
if (i === 5) break; // 遇到 5 立即跳出
console.log(i); // 1 2 3 4
}
// continue：跳過 5
for (let i = 1; i <= 5; i++) {
if (i === 3) continue; // 跳過 3
console.log(i); // 1 2 4 5
}
break “炸” 整個循環(huán)，continue “跳過” 這一回。
for循環(huán)
for (let i = 0; i < 3; i++) {
console.log(i); // 0 1 2
}
- 三個格子：
起點; 條件; 步長 - let 代替 C 的
int，用完就丟（不會泄漏出來）。
| 坑 | 例子 | 結果 |
|---|---|---|
| 忘更新 | for(let i=0; i<3; ) { ... } | 死循環(huán) |
用 var | for(var i=0; i<3; i++) { }console.log(i) | 循環(huán)外還能打印 i（3） |
| 條件寫錯 | 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)小練習1：九九乘法表
固定的兩層for循環(huán)。主要需要動腦子的點在于在輸出中添加標簽并設置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)小練習2：冒泡排序
和C語言冒泡排序基本相同，在數(shù)組的聲明上略微有些不同。
<script>
let n = +prompt('您想輸入幾個數(shù)字？')
let arr = []
for (let i = 0; i < n; i++) {
arr[i] = + prompt(`請您輸入第${i + 1}個數(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('排序后的順序為：')
for (let i = 0; i < arr.length; i++) {
if (i != arr.length - 1) document.write(`${arr[i]}，`)
else document.write(`${arr[i]}。`)
}
</script>
總結
到此這篇關于JavaScript分支語句和循環(huán)語句的文章就介紹到這了,更多相關js分支語句和循環(huán)語句內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文為大家詳細介紹下js中自動清除ie緩存的幾種方法，大家可以根據(jù)自己的需求自由選擇適合自己的，希望對大家學習js有所幫助2013-07-07
這篇文章主要為大家詳細介紹了uni-app實現(xiàn)獲取驗證碼倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
bootstrap datepicker限定可選時間范圍實現(xiàn)方法
這篇文章主要介紹了bootstrap datepicker限定可選時間范圍的實現(xiàn)方法，本文涉及到相關知識點，通過實例給大家介紹的非常詳細,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了微信小程序事件綁定傳參冒泡及捕獲的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要教大家如何使用Bootstrap自定義文件上傳下載樣式，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細介紹了微信小程序websocket實現(xiàn)即時聊天功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了一個不錯的js html頁面倒計時可精確到秒,很簡單，但和實用，需要的朋友可以參考下2014-10-10
這篇文章主要介紹了javascript實現(xiàn)當前頁導航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
只有msg是必須的，后面的參數(shù)可以省略。如果中間的參數(shù)為空則在對應位置上''或者""表示（根據(jù)實際情況選擇單雙引號） 調用此方法須在每個使用的頁面的head區(qū)域加入下面代碼。2009-11-11
淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問題
下面小編就為大家?guī)硪黄獪\談javascript控制HTML5的全屏操控,瀏覽器兼容的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10