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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
avalon是前端MVVM框架，在js中經(jīng)常會用到。這篇文章主要介紹了JavaScript 中 avalon綁定屬性總結的相關資料,需要的朋友可以參考下2016-10-10
基于JavaScript實現(xiàn)文件共享型網(wǎng)站
Any?Share?是一種簡單、輕量、快速的文件共享服務。使用?Javascript?編寫，并搭建在?Firebase?平臺。本文將利用它實現(xiàn)創(chuàng)建文件共享型網(wǎng)站，感興趣的可以了解一下2022-11-11
js常用方法及字符串的常用判斷方法都是在工作中經(jīng)常用到的，在本文整理了一些，感興趣的朋友可以參考下2013-10-10
sort()方法主要是用于對數(shù)組進行排序，默認情況下該方法是將數(shù)組元素轉換成字符串，然后按照ASC碼進行排序，這個大家都能理解，但如果數(shù)組元素是一個Object呢，轉不了字符串，難道不能進行排序？答案當然是否定的,那么我們就來詳細探討下sort()方法的使用2015-08-08
document.all還是document.getElementsByName?
document.all還是document.getElementsByName?...2006-07-07
js表格排序實例分析（支持int,float,date,string四種數(shù)據(jù)類型）
這篇文章主要介紹了js表格排序實例分析（支持int,float,date,string四種數(shù)據(jù)類型）,涉及javascript常用的升序、降序及數(shù)據(jù)類型轉換等相關技巧,需要的朋友可以參考下2015-05-05
uniapp踩坑實戰(zhàn)之文件查找失敗:'uview-ui'?at?main.js解決辦法
這篇文章主要給大家介紹了關于uniapp踩坑實戰(zhàn)之文件查找失敗:'uview-ui'?at?main.js的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JavaScript檢查彈出窗口是否被阻攔的方法技巧,本文用于檢測window.open彈出的窗口是否被阻攔,需要的朋友可以參考下2015-03-03
reduce是一個對數(shù)組累積操作的方法,使用時要加上 return 返回累積操作的數(shù)據(jù),這樣 prev 才能獲取上一次執(zhí)行的結果,否則是 undefined,這篇文章主要介紹了JS 中 reduce()方法及使用詳解,需要的朋友可以參考下2023-12-12
眾所周知,微信小程序制作成功后,是需要提交到微信公眾平臺去審核的,審核通過后,才可以發(fā)布上線的,上線了之后才可以進行運營的,下面這篇文章主要給大家介紹了關于微信小程序上線發(fā)布具體流程的相關資料,需要的朋友可以參考下2022-10-10