前端第二阶段-5（JavaScript的if分支语句、for循环语句、switch循环语句、while循环）

已于 2022-08-17 22:51:21 修改
阅读量217 收藏
点赞数
分类专栏： # 前端开发第二阶段 文章标签： 前端 开发语言 visual studio javascript ecmascript
于 2022-08-16 20:01:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Victory_bad/article/details/126373159
版权

if分支语句

判断条件是否为真

单分支

语法：

if(条件){

        语句

}

···

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 单分支
    /*
        根据年龄判断
        18一下未成年  18-60成年人  60以上老年人
    */ 
    const age=parseInt(window.prompt("请输入年龄："));
    if(age>0 && age<18){
        alert("未成年");
    }
    if(age>=18 && age<60){
        alert("成年人");
    }
    if(age>60){
        alert("老年人");
    }
    alert("输入错误");
</script>
</html>

双分支

语法：

if(条件){

        语句

} else if(条件){

        语句

}

···

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script>
    // 双分支
    /*
        小明考了100分就去游乐园，否则写作业
    */
    const scores = Number(window.prompt("小明的分数："));
    if (scores === 100) {
      console.log("去游乐园");
    } else {
      console.log("写作业");
    }
  </script>
</html>

多分支

语法：

if(条件){

        语句

}

if(条件){

        语句

}

···

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 多分支
    /*
        年龄小于18，周一到周五上课
        年龄18-70，周日逛街
        年龄大于70，周二看电影
    */
    const age=Number(window.prompt("请输入年龄："));
    const day=Number(window.prompt("请输入星期几："));
    if (age < 18 && day <= 5) {
      alert("上课");
    } else if (age >= 18 && day === 7) {
      alert("逛街");
    } else if (age > 70 && day === 2) {
      alert("看电影");
    }
  </script>
</html>

嵌套分支

if(条件){

        语句

        if(条件){

                语句

        } else if(条件){

                语句

       }

}

···

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 嵌套分支
    //尽量不要用嵌套，它会增加代码复杂度
    /*
        年龄小于18岁，周一到周五上课，反之打游戏

    */
    const age = Number(window.prompt("输入年纪："));
    const day = Number(window.prompt("今天星期几："));
    if (age < 18) {
      if (day >= 1 && day <= 5) {
        console.log("上学");
      } else {
        console.log("打游戏");
      }
    }
  </script>
</html>

循环语句

        1.重复执行代码就需要用到循环

        2.满足条件才会循环，条件不满足就会退出

死循环：循环条件表达式永远为真，循环体语句一直执行

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body></body>
<script>
    /*
        死循环
    */
    while(true){
        console.log("死循环");
    }

</script>

</html>

 

for循环语句

语法：

for(初始值;循环次数;步长){

            循环体

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 循环
    /*
        for(循环条件){
            循环体
        }
    */ 
    for(let i=1; i<6; ++i){
        document.write("for循环\n")
    }
    /*
        let i=1; i<6; ++i

        第一次循环 i=1；1<6；执行循环体；++i；
    */ 
</script>
</html>

switch循环语

语法：

switch(变量){
        case 值:
            循环体1;
            break;
        case 值:
            循环体2;
            break;

             ······

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        输入一个数字
        输出今天是星期几，超出7之后就提示输入错误
    */ 
    let myDay=Number(window.prompt("输入数字："));
    switch(myDay){
        case 1:
            document.write("今天星期一");
            break;
        case 2:
            document.write("今天星期二");
            break;
        case 3:
            document.write("今天星期三");
            break;
        case 4:
            document.write("今天星期四");
            break;
        case 5:
            document.write("今天星期五");
            break;
        case 6:
            document.write("今天星期六");
            break;
        case 7:
            document.write("今天星期天");
            break;
    }
</script>
</html>

while循环

语法：

while(循环条件){

        循环体

        ++i;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

    // while
    while(i<=5){
        document.log("while使用场景循环次数不确定");
        ++i;
    }

</script>
</html>

do while循环（不建议用）

语法：

do{

        循环体

        ++i;

}while(循环条件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // do while
    do{
        document.log("do while，先执行后验证");
        ++i;
    }while(i<=5)
</script>
</html>

for循环、while循环和do while循环区别：

for：循环次数是固定的，先执行后验证

while：循环次数不固定，先执行后验证

do while：先验证后执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*
        循环
        1.重复执行代码就需要用到循环
        2.满足条件才会循环，条件不满足就会退出

    */ 
    // for
    for(let j=1;j<=5;++j){
        document.log("for使用场景循环次数是固定的");
    }
    // while
    while(i<=5){
        document.log("while使用场景循环次数不确定");
        ++i;
    }
    // do while
    do{
        document.log("do while，先执行后验证");
        ++i;
    }while(i<=5)
</script>
</html>

BadVictory
关注
专栏目录
switch循环_JS流程控制与循环语句
weixin_30209121的博客
01-22 441
参考网道文档：https://wangdoc.com/javascript/basic/grammar.html语雀文档：https://www.yuque.com/docs/share/70dbde2d-1dd6-470a-8df6-c932b3e5590a?# 《JS流程控制与循环语句》流程控制JavaScript提供3种流程结构，不同的流程结构可以实现不同的运行流程。这3种流程结构分别是顺序...
switch循环
Anansoul的博客
01-15 7775
switch语句 (1)格式： switch(表达式) { case 值1: 语句体1; break; case 值2: 语句体2; break; … default: 语句体n+1; break; } switch后面的括号内的表达式,ANSI标准允许为任何类型 当表达式与某一个case后面的常量表达式相等时,就执行case后面的语句,若没有匹配,则执行default后面的语句. 每一个case...
前端与移动开发----JavaScript 基础----switch语句，循环，关键词
東三城的博客
11-15 455
javaScript基础 switch语句 语法 switch ( 变量 ) { case 值1: 代码语句.. break; case 值2: 代码语句... break; default: break; } 执行过程 执行过程 1. 先通过 switch 得到变量的值 2. 通过 case 后面的值与变量的值进行比较是否相等,如果不相等,则继续向下比较.如果相等则执行对应的逻辑代码,后面的不再执行 3. 如果所有的比较都不相等
前端 js中 if 语句、for循环、switch语句
weixin_48672377的博客
08-14 698
1.基本结构(顺序执行)2.分支结构(分支语句)3.循环结构(循环语句)
JavaScript switch语句和循环
m0_53561448的博客
03-31 3487
JavaScript中循环运行相同的代码，非常的方便
JavaScript中的Switch case语句&循环语句
XWQ_Q7的博客
10-13 2385
计算1+2+3+4+…+100的和 打印九九乘法表 Switch case语句&循环语句
js第三天---switch语句、while循环、do while循环、for循环.pdf
12-16
本话题主要探讨了四种循环语句：switch语句、while循环、do...while循环以及for循环。 首先，`switch`语句是一种多分支选择结构，常用于替代多个`if...else if...else`语句。它通过将一个表达式与多个`case`后的...
详解JavaScript中循环控制语句的用法
12-12
JavaScript提供完全控制来处理循环和switch语句。可能有一种情况，当你需要退出一个循环，但未达到其底部。也可能有一种情况，当要跳过的码块的一部分，并直接开始下一个迭代。 为了处理这些情况下，JavaScript提供...
Javascript核心读书有感之语句
11-30
- **循环语句**：`for`和`while`循环用于重复执行代码。`for`循环常用于已知迭代次数的情况，如`for (var i = 0; i ; i++) {...}`，而`while`循环在满足某个条件时持续执行，如`while (condition) {...}`。 - **...
JavaScript While 循环 教程
10-30
此外，While 循环语句还可以与其他控制流语句结合使用，例如 If 语句和 Switch 语句，以便实现更加复杂的逻辑功能。 在 JavaScript 中，我们还可以使用 Switch 语句来选择执行不同的代码块。Switch 语句的基本语法...
2024年Java基础（三） switch、循环及Random详解_rn 对应java switch，准备Java面试
最新发布
a19815156的博客
05-05 801
这份面试题几乎包含了他在一年内遇到的所有面试题以及答案，甚至包括面试中的细节对话以及语录，可谓是细节到极致，甚至简历优化和怎么投简历更容易得到面试机会也包括在内！也包括教你怎么去获得一些大厂，比如阿里，腾讯的内推名额！某位名人说过成功是靠99%的汗水和1%的机遇得到的，而你想获得那1%的机遇你首先就得付出99%的汗水！你只有朝着你的目标一步一步坚持不懈的走下去你才能有机会获得成功！成功只会留给那些有准备的人！本文已被。
JavaScript基础——switch结构( switch和多重if结构区别)、 while循环、 do-while循环、for循环
TKY666的博客
03-31 2589
1、switch结构 switch (表达式) { case 常量 1: 语句; break; case 常量 2: 语句; break; default: 语句; } 例子：请根据用户输入的数字判断菜单 <script> var a = prompt("今天是周几,看看中午吃啥子", "
不用if,switch书写判断语句
qq_31619295的博客
05-05 2049
前提 平时我们编写js代码遇到判断的情况下,通道使用if/else或者switch来实现条件判断,但有些业务场景的逻辑复杂度比较特殊,随着需求的更改,代码中的if/else/switch会越来越臃肿,本文就是教你如何优化的编写判断逻辑. 例子一: 先看代码 /** * @description 活动点击 * @param {Number | String} statu...
switch和for循环的案例
wen0627的博客
03-17 2324
按照顺序看下去 1、Switch循环时间显示:首先设置一个div里面添加button(也可以按照自己的模板去设置),在设置id。 2、在添加style，设置div和button按钮的样式。 3、在设置JavaScript部分，在body里面设置或在body外设置都可以。 4、设置页面载入时要执行的js代码，先声明变量获取按钮和现在的星期。 5、再设置鼠标点击按钮的设置，设置一个变量后面接收星期。 6、设置switch循坏，按照声明的变量d判断今天星期几，如果今..
前端笔记56——switch语句
裕博的博客
01-04 1万+
switch语句语法 switch(状态值){ case 状态值1： code...1 break; case 状态值2: code...2 break; case 状态值3: code...3 break; default: code...4 ...
js中 switch 语句用法详解和 for in、for of循环相关用法
热门推荐
陈坚泓的博客
10-27 1万+
js中switch语法,js循环相关操作,for in;for of;white;do white;break;continue等相关介绍及例子
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值