javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js分支语句和循环语句

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

作者：良木林

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

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('未知');
}
// 输出：周三

几个注意点

  1. 全等比较
    switch 用的是 ===，不会自动类型转换。

    switch ('2') {
  case 2:        // 不会命中，因为 '2' !== 2
    ...
}

  2. break 穿透
    忘写 break 会把下面所有 case 都执行一遍。
    有时故意利用穿透做“合并”：

    switch (score) {
  case 5:
  case 4:
    console.log('优秀'); // 4 和 5 都会走这里
    break;
}

  3. 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
}
坑例子结果
忘更新for(let i=0; i<3; ) { ... }死循环
用 varfor(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分支语句和循环语句内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文