JavaScript分支语句和循环语句示例详解

更新时间：2025年08月04日 10:20:35 作者：良木林

JavaScript作为一种广泛使用的编程语言,它的流程控制语句是构建逻辑和实现功能的基础,这篇文章主要介绍了JavaScript分支语句和循环语句的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

分支语句

单分支if

只判断一次，条件为真就执行，为假直接跳过。

if (条件) {
  // 条件为真时执行
}

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

双分支if-else

条件为真执行 A，否则执行 B。

if (条件) {
  // 条件为真
} else {
  // 条件为假
}

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

三元运算符? :

把双分支 if-else 缩成一行，必须有 else，并返回一个值。

条件 ? 值A : 值B

let num = prompt('请输入一个数字')
num = num < 10 ? 0 + num : num
//0 + num是字符串相加的形式，给个位数补一个0

形式	关键字	行数	返回值	使用场景
单 if	`if`	多	无	只做一件事
if-else	`if...else`	多	无	二选一
三元运算符	`? :`	1	有	简单二选一，要返回值

三元运算符必须有 else；if 可以没有。
三元运算符不能写多条语句；复杂逻辑用 if-else。

switch分支

switch 就是“多选一”的快捷 if-else 链——把同一个变量/表达式的不同取值，一一对照执行。

基本语法

switch (表达式) {
  case 值1:
    语句块1;
    break;          // 记得 break，否则会继续往下“穿透”
  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 都执行一遍。
有时故意利用穿透做“合并”：
```
switch (score) {
  case 5:
  case 4:
    console.log('优秀'); // 4 和 5 都会走这里
    break;
}
```
default 可省
如果所有 case 都不匹配且没有 default，就什么都不做。

何时用 switch？

场景	推荐写法
同一个变量的离散值	switch
区间判断（> <）	if-else
复杂逻辑 / 多条件	if-else / 对象映射

“变量等值多选一，switch 比 if-else 更清爽；记得 break 防穿透，default 兜底别忘掉。”

switch小练习：ATM存款机

利用while循环的特点创建无限循环的用户弹窗与用户进行交互；用switch语句创建存款、取款等不同服务。注意处理余额不足、输入不当等问题。

<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 之间的数字！');
                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>

循环语句

while循环

while (判断条件) {
	循环命令
	条件增量
}

continue & break

break 直接跳出整个循环（或 switch），循环结束；

continue 立即跳过本次迭代，继续下一轮循环。

关键字	作用范围	效果描述	常见场景
`break`	循环 / switch	立即终止当前结构，后续不再执行	找到目标值后提前结束
`continue`	仅循环	跳过本次剩余代码，继续下一轮	过滤/跳过不想要的值

代码示例

// 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 “炸” 整个循环，continue “跳过” 这一回。

for循环

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

三个格子：起点; 条件; 步长
let 代替 C 的 int，用完就丢（不会泄漏出来）。

坑	例子	结果
忘更新	`for(let i=0; i<3; ) { ... }`	死循环
用 `var`	`for(var i=0; i<3; i++) { }` `console.log(i)`	循环外还能打印 i（3）
条件写错	`for(let i=0; i>-1; i++)`	死循环

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

明确循环次数用for，不明确用while

for循环小练习1：九九乘法表

固定的两层for循环。主要需要动脑子的点在于在输出中添加标签并设置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循环小练习2：冒泡排序

和C语言冒泡排序基本相同，在数组的声明上略微有些不同。

<script>
        let n = +prompt('您想输入几个数字？')
        let arr = []
        for (let i = 0; i < n; i++) {
            arr[i] = + prompt(`请您输入第${i + 1}个数字：`)
        }
        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分支语句和循环语句的文章就介绍到这了,更多相关js分支语句和循环语句内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支

JavaScript 中 avalon绑定属性总结
avalon是前端MVVM框架，在js中经常会用到。这篇文章主要介绍了JavaScript 中 avalon绑定属性总结的相关资料,需要的朋友可以参考下
2016-10-10
基于JavaScript实现文件共享型网站
Any Share 是一种简单、轻量、快速的文件共享服务。使用 Javascript 编写，并搭建在 Firebase 平台。本文将利用它实现创建文件共享型网站，感兴趣的可以了解一下
2022-11-11
常用js字符串判断方法整理
js常用方法及字符串的常用判断方法都是在工作中经常用到的，在本文整理了一些，感兴趣的朋友可以参考下
2013-10-10
javascript中sort() 方法使用详解
sort()方法主要是用于对数组进行排序，默认情况下该方法是将数组元素转换成字符串，然后按照ASC码进行排序，这个大家都能理解，但如果数组元素是一个Object呢，转不了字符串，难道不能进行排序？答案当然是否定的,那么我们就来详细探讨下sort()方法的使用
2015-08-08
document.all还是document.getElementsByName?
document.all还是document.getElementsByName?...
2006-07-07
js表格排序实例分析（支持int,float,date,string四种数据类型）
这篇文章主要介绍了js表格排序实例分析（支持int,float,date,string四种数据类型）,涉及javascript常用的升序、降序及数据类型转换等相关技巧,需要的朋友可以参考下
2015-05-05
uniapp踩坑实战之文件查找失败:'uview-ui' at main.js解决办法
这篇文章主要给大家介绍了关于uniapp踩坑实战之文件查找失败:'uview-ui' at main.js的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
JavaScript检查弹出窗口是否被阻拦的方法技巧
这篇文章主要介绍了JavaScript检查弹出窗口是否被阻拦的方法技巧,本文用于检测window.open弹出的窗口是否被阻拦,需要的朋友可以参考下
2015-03-03
JS 中 reduce()方法使用小结
reduce是一个对数组累积操作的方法,使用时要加上 return 返回累积操作的数据,这样 prev 才能获取上一次执行的结果,否则是 undefined,这篇文章主要介绍了JS 中 reduce()方法及使用详解,需要的朋友可以参考下
2023-12-12
微信小程序上线发布具体流程简析
众所周知,微信小程序制作成功后,是需要提交到微信公众平台去审核的,审核通过后,才可以发布上线的,上线了之后才可以进行运营的,下面这篇文章主要给大家介绍了关于微信小程序上线发布具体流程的相关资料,需要的朋友可以参考下
2022-10-10