javaScript:分支语句的理解与使用(附带案例)

这篇具有很好参考价值的文章主要介绍了javaScript:分支语句的理解与使用(附带案例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

补充

另一种说法 

分支语句

1.if语句 

a.单分支语句

注意 

b.双分支语句 

注意点 

c.多分支语句(分支语句的联级语句) 

补充 

 2.三元运算符

三元运算符 ? :

使用场景

3.switch语句

解释

释义:

注意事项:

相关代码 

案例 

1.在input框输入两个数字判断大小

效果图 

代码 

2.判断闰年

效果图

代码 

3.判断成绩 

效果图

代码 


前言

        分支语句是编程中常用的一种控制结构,它允许根据条件的不同执行不同的代码。通过合理运用分支语句,可以根据不同的条件执自己行不同的代码,实现更精确的控制流程。在实际编程中,我们可以根据需求选择适当的分支语句来解决问题。  

补充

• 程序三大流程控制语句

1. 顺序结构

2.分支结构

3.循环结构

另一种说法 

程序结构

1.基本结构(顺序执行)

2.分支结构(分支语句)

3.循环结构(循环语句)

分支语句

分支语句主要包括以下三种,接下来我将对下面三种分支语句进行讲解。

a.if语句           (if语句分为单分支,双分支,多分支)

b.三元运算符  (简化版的分支语句)

c.switch语句   (switch是开关的意思)

1.if语句 

a.单分支语句

if(判断条件){
    只有当if中的判断条件为true的时候,{}中的代码才会被执行,如果判断
    条件不为true,则跳过{}中的代码,程序继续往下执行
}
注意 

       if后面()中的判断条件,不管里面的表达式有多复杂,返回的值永远只有true

或者false。括号内的条件为true时,进入大括号里执行代码 。   小括号内的结果若不是布尔类型时,会发生隐式转化为布尔类型。     如果大括号只有一个语句,大括号可以省略,但是,不提倡这么做~(虽然可以在if语句中省略大括号,但这样做可能会导致代码可读性和维护性的问题。特别是当if语句后面紧跟着一个缩进的代码块时,如果没有大括号明确定义代码块的范围,可能会引发错误。为了代码的一致性和可读性,建议始终使用大括号,即使代码块中只有一条语句。)

b.双分支语句 

if(判断条件){
    如果判断条件 为true,则执行这里的代码
}else{
    如果判断条件 不为true,则执行else中的代码
}
注意点 

       if 可以单独使用,else必须结合if一起使用。else指的是除了满足if条件

之外的所有条件。只有一行的时候可以转成三元,多行不行,建议只有一行的时候转化为三元

c.多分支语句(分支语句的联级语句) 

         在使用if语句的时候,else的范围有时候会比较大,因此可以使用else if,对具体的情况进行细分,else if 可以根据情况设置多个。使用场景:适合于有多个结果的时候,比如学习成绩可以分为; 优良中差

if(判断条件){
    执行语句
}slse if(判断条件){
    执行语句
}else{
    执行语句
}

补充 

注意

   1.当你书写判断条件的时候,注意等于是 == 不是 = , = 是赋值

   2.0 '' null  undefind 如果写在判断条件中,都被解析为false

   非0 , 非''  非null 非 undefined 如果写在判断条件中,都被解析为true

 2.三元运算符

三元运算符 ? :

判断条件判断条件为真,则执行当前代码判断条件为假,则执行当前代码

使用场景

使用场景:其实比if双分支更简单的写法,可以使用三元表达式 。 一般用来取值。

javaScript:分支语句的理解与使用(附带案例),javascript,javascript,开发语言,ecmascript

 文章来源地址https://www.toymoban.com/news/detail-639606.html

3.switch语句

        switch语句,特点是,默认贯穿整个结构,可以使用关键字break阻止贯穿,break的作用是阻断当前结构语句,可以阻断switch 也可以阻断 循环

 switch (数据) {
    case 值1:
        代码1
        break;
    case 值2:
        代码2
       break;
    default:
        代码n
        break;
  }

解释

释义:

1,找到跟小括号里数据全等的case值,并执行里面对应的代码。

2,若没有全等=== 的则执行default里的代码。 列:数据若根值2全等,则执行代码2      

注意事项:

1.switch case 语句一般用于等值判断,不适合用于区间判断     

 2.switch cass 一般需要配合break关键字使用,没有break会造成case穿透。

相关代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch语句</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    switch语句,特点是,默认贯穿整个结构,可以使用关键字break阻止贯穿
    break的作用是阻断当前结构语句,可以阻断switch 也可以阻断 循环
    */ 
   let count = 70;
    switch (count) {
        case 30:
            console.log('天涯何处无芳草');
            break;  //阻断switch语句,跳出switch
        case 170:
            console.log('一曲肝肠断');
            break;
            // default: 是默认的意思,如果上面的条件都不能执行则会执行default中的代码
        default:
            console.log('只因你太美+default');
            break;
    }

    let num = 1;

    switch (num) {
        case 1:
           console.log('当前是1');
           num+=10
           console.log(num);
          
           case 2:
            console.log('当前是2');
            num++
            console.log(num);
            break;
        default:
            num--
            console.log('当前是default');
            console.log(num);
            break;
            
    }
</script>

案例 

1.在input框输入两个数字判断大小

效果图 

javaScript:分支语句的理解与使用(附带案例),javascript,javascript,开发语言,ecmascript

代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>
<body>
    数据1:  <input type="number" value="" id="a" > <br>
  数据2:  <input type="number" value="" id="b"> <br>
  <button id="bth">比较大小</button>
  <hr>
</body>
</html>
<script>
    let a = document.getElementById('a')
    let b = document.getElementById('b')
    let bth = document.getElementById('bth')
    bth.onclick = function(){
        let num1= a.value - 0
        let num2= b.value - 0
        // num1>num2? alert(num1):alert(num2)
         if (num1>num2) {
            alert(num1)
         }else if(num2==num1){
            alert('相等')
        }else{
            alert(num2)
        }
    }
</script>

2.判断闰年

效果图

javaScript:分支语句的理解与使用(附带案例),javascript,javascript,开发语言,ecmascript

 

代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if语句练习</title>
</head>
<body>
  输入年份:<input type="number" value="" id="year" > <br>
  <button id="bth2">查看是否是润年</button>
</body>
</html>
<script>
    let year = document.getElementById('year')
    let bth2 = document.getElementById('bth2')
    bth2.onclick = function(){
        let n = year.value - 0
        if (n % 4 == 0 && n % 100 > 0 ||n % 400 == 0) {
            alert(n+'是闰年')
        }else{
            alert(n+'是平年')
        }
    }
</script>

3.判断成绩 

效果图

javaScript:分支语句的理解与使用(附带案例),javascript,javascript,开发语言,ecmascript 

 

javaScript:分支语句的理解与使用(附带案例),javascript,javascript,开发语言,ecmascript

 

代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if语句练习</title>
</head>
<body>
</body>
</html>
<script>
    let f = +prompt('输入考试成绩')
   if (f == 100) {
     alert('恭喜你的成绩为满分,奖励一个对象')
   }else if (f>=90) {
       alert('优秀')
   }else if(f>=80){
       alert('良好')
   }else if(f>=70){
       alert('中等')
   }else if(f>=60){
       alert('及格')
   }else{
      alert('开除学籍')
   }
</script>

到了这里,关于javaScript:分支语句的理解与使用(附带案例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【JavaScript】案例1:使用JS完成注册页面校验

    🔎这里是【JavaScript】,关注我学习前端不迷路 👍如果对你有帮助,给博主一个免费的点赞以示鼓励 欢迎各位🔎点赞👍评论收藏⭐️ 【JavaScript】 目前主要更新JavaScript,一起学习一起进步。 本期主要介绍案例1:使用JS完成注册页面校验 1. 需求说明 2. 知识讲解-JavaScript(

    2024年02月06日
    浏览(47)
  • 分别用JavaScript,Java,PHP,C++实现桶排序的算法(附带源码)

    桶排序是计数排序的升级版。它利用了函数的映射关系,高效与否的关键就在于这个映射函数的确定。为了使桶排序更加高效,我们需要做到这两点: 在额外空间充足的情况下,尽量增大桶的数量 使用的映射函数能够将输入的 N 个数据均匀的分配到 K 个桶中 同时,对于桶中

    2024年02月22日
    浏览(49)
  • JavaScript 其他循环语句和跳转语句

    一、while语句 While 循环会在指定条件为真时循环执行代码块。 While循环,先进行条件判断,再执行循环体的代码 如果条件不满足,则不会执行循环体,一次都不会 案例: 二、do.....while循环 do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前

    2024年02月06日
    浏览(36)
  • 7 JavaScript循环语句

    7 循环语句 在js中有三种循环语句. 首先是while循环. 它的逻辑和咱们python中的while几乎一模一样, 就是符号上有些许的区别.

    2024年02月12日
    浏览(38)
  • JavaScript语句和声明

    2024年02月07日
    浏览(37)
  • 值得收藏的JavaScript 语句

    有些时候,在创建对象时,希望根据特定的条件或变量更改对象的属性名,就可以借助方括号 [] 。 为变量设置默认值,避免无法处理的数据出现异常。 缩短数组的简单方法是重新定义它的长度属性,不过这样会更改数组,意味着将丢失数组中其他值。

    2024年02月07日
    浏览(41)
  • JavaScript如何执行语句

    目录 语法/词法分析 预编译 解释执行 预编译什么时候发生 js运行三步曲 预编译前奏 预编译步骤 巩固基础练习 编译原理中的词法分析和语法分析是编译过程中的两个基本阶段。它们的区别如下: 1. 词法分析:词法分析阶段负责将源代码按照字符序列划分成一个个的词法单元

    2024年02月12日
    浏览(44)
  • JavaScript语句(七)

    1、条件语句 名称 描述 if 当指定条件为 true 时,执行 if 语句对应的代码 if…else 当条件为 true 时,执行 if 语句对应的代码 当条件为 false 时,执行 else 语句对应的代码 if…else if… 满足条件时,执行它所对应的代码 case 在 switch 中使用,表示要匹配的每一种情况 default 在 swi

    2024年02月08日
    浏览(36)
  • 前端开发——JavaScript的条件语句

      世界不仅有黑,又或者白 世界而是一道精致的灰  ——Lungcen     目录 条件判断语句 if 语句 if else 语句 if else if else 语句  switch语句 break case 子句 default语句 while循环语句 do while循环语句 for循环语句 for 循环中的三个表达式 for 循环嵌套 for 循环变体——for in for 循环

    2023年04月21日
    浏览(46)
  • JavaScript条件判断if 语句

    一、if语句的分支 分类:单分支,双分支,多分支,分支嵌套 ()中可以是一个值,也可以是一个表达式 案例: 二、switch ()只能是变量或值,不能是表达式 案例: break必须添加,否则会继续往下执行 问题: 什么时候用if,什么时候用switch if:条件是一个范围 或者 是具体的

    2024年02月06日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包