前端基础(六)_流程控制语句(if、if-else、if-else嵌套、switch)

news2024/11/24 0:31:29

流程控制语句主要分为 :

  • 顺序结构:即按顺序执行代码 ;
  • 条件选择结构 ( 分支语句 ):包括 if-else 以及 switch;
  • 循环结构:包括 for循环,while,do-while,for-in 等;
  • 其他语句: break 和continue。

一、流程控制之分支语句

条件选择结构又叫分支语句,主要包括if-else、switch等,通过条件判断,有选择性的执行某段代码

1.1、if

if 即如果,就是假设一个条件,如果条件成立,就做某一个操作,即如果怎么样就会怎么样。
语法:if(条件){ 条件成立执行 }
例1:如果年龄大于 7 岁,就上学

<!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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var age = 8;
    if (age > 7) { console.log("上学"); }
    //{}可以省略,省略了if就只能控制()后面的第一行语句。虽然可以省略,但是我们
    //建议每次都加上,这样代码结构逻辑更清晰
    if (age > 7) console.log("上学");// 控制台输出"上学"
    alert(1);// 不管条件是否成立都会执行,因为这行代码不受if的控制
  </script>
</body>

</html>

在这里插入图片描述

1.2、if-else

if-else是在if的基础上加了一个条件不成立时要做的操作,即条件成立做某个操作,条件不成立做某个操作。
语法:if( 条件 ){条件成立做的事情}else{条件不成立做的事情}
例1:如果成绩大于60就是及格,反之不及格

<!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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var s = 70;
    if (s > 60) {
      //条件成立执行的代码
      console.log('及格');
    } else {
      //条件不成立执行的代码
      console.log('不及格');
    }
  </script>
</body>

</html>

在这里插入图片描述

1.3、if-else嵌套

if-else 能用于一个条件的成立和不成立,但是如果问题存在多个假设就不能够满足要求,如成绩大于 90 为优秀,80-90 为良好,70-80 为还行,60-70 为及格,60 以下为不及格,像这种情况就没有办法用if-else去实现,这个时候就需要用到 if-else 嵌套。
语法:if( 判断条件 ){ 条件成立执行的代码 }else if( 判断条件 ){ 条件成立执行的代码 }else{ 以上条件都不成立时执行 }
例1:

<!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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    // if-else 可以一直嵌套,只要有 else 前面肯定有 if
    var a = 85;
    if (a > 90) {
      alert("优秀");
    } else if (a > 80) {
      alert("良好");
    } else if (a > 70) {
      alert("还行");
    } else if (a > 60) {
      alert("及格")
    }
  </script>
</body>

</html>

在这里插入图片描述

1.4、switch

switch一般用于假设的个数有限,并且是同等级的关系,相对于if来说,结构更清晰。使用该语句来选择多个代码块之一来执行。
例1:

<!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>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    // switch(选择项)根据这个选择项(确定的数据)选择要执行的代码
    var s = "+";
    switch (s) {
      case "+": alert(10 + 10); break;
      case "-": alert(10 - 10); break;
      case "*": alert(10 * 10); break;
      default: alert("都没有匹配到");
    }
  </script>
</body>

</html>

在这里插入图片描述
上面代码中,将所有可能出现的情况都使用case列举出来,变量s会去匹配对应的case,匹配到了以后执行case后面的代码,如果所有的case都匹配不到则会执行default后面的代码。
上面代码中,所有的case后面都会加一个关键字break,break的作用是防止穿透,如果不加break,当匹配到其中一个case以后,从当前case开始,后面代码不会再进行匹配,直接执行。
如果需要用到判断执行某些代码,可以使用if-else和switch,一般情况下,如果条件明确,并且是一些简单字符,数字等,会选择使用switch。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/142111.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java学习(23)Java一维数组概述

什么是数组 数组是相同类型的数据按顺序组成的一种引用数据类型。 数据类型分为基本数据类型和引用数据类型&#xff0c;引用数据类型分为类、接口、数组。要学习的内容 一维数组的声明、创建、初始化、元素的引用、长度。数组声明 语法格式&#xff1a; 数据类型[] 数组名; 数…

卡尔曼滤波原理公式详细推导过程[包括引出]

卡尔曼滤波在很多项目中都有用到&#xff0c;但是对于原理却很少有详细分析&#xff0c;而只是直接应用&#xff0c;在看完b站up主DR_CAN视频推导后自行推导一遍和查看其他资料后进行总结&#xff0c;将从最初的递归算法&#xff0c;利用数据融合&#xff0c;协方差矩阵&#x…

[vp] 2021 山东省赛 CDGHM

目录前言G. Grade Point Average ( 难度有先后)M. Matrix ProblemH. Adventurers GuildD.Dyson BoxC. Cat Virus前言 打满 2个小时30分钟 基本都在做题 体验非常好 传送门 : https://codeforces.com/gym/103118 G. Grade Point Average ( 难度有先后) 题意 : 让你求sum/ns…

UG/NX二开Siemens官方实例解析 4.4 EX_Curve_ProjCurves(创建投影曲线)

前言 本系列文章主要讲解NXOpen UF API&#xff08;简称ufun函数&#xff09;的使用&#xff0c;之前看教学视频大都建议用ufun进行开发&#xff0c;这里西门子官方还专门给了一套系列文章来讲&#xff0c;说明官方也是特别推崇ufun。 本人从事二开也有一段时间了&#xff0c;我…

干货 | 测试人职场晋升“潜规则”:15 年经验资深测试经理的职场忠告

大家好&#xff0c;我是云胖虎&#xff0c;有近 15 年工作经验&#xff0c;在测试专业上擅长的方向是自动化测试&#xff0c;测试工具平台开发和探索测试相关的一些领域&#xff0c;也拿到过项目管理和敏捷教练的认证&#xff0c;目前是在某知名金融银行企业担任技术经理。今天…

dataworks调度问题

文章目录名词解释月调度关于空跑名词解释 业务日期 定时日期 - 1 自定义参数示例&#xff1a; 月调度 调度详情&#xff1a; 重要 使用补数据功能对月调度任务执行补数据操作时&#xff0c;请注意补数据选择的为业务日期 &#xff0c;业务日期定时调度日期-1。 例如&#xf…

初始C++(一)

文章目录前言cout的用法cin的用法endl的用法一.命名空间1.:: (域作用限定符)2.命名空间定义3.命名空间的使用4.命名空间的一些其它使用5.全局展开6.部分展开二.缺省参数2.1全缺省2.2半缺省前言 既然这篇文章叫初始C&#xff0c;看我文章的应该和我一样&#xff0c;基本是个小白…

React-Router6路由相关二(路由传参、编程式路由导航、路由相关hooks)(八)

系列文章目录 第一章&#xff1a;React基础知识&#xff08;React基本使用、JSX语法、React模块化与组件化&#xff09;&#xff08;一&#xff09; 第二章&#xff1a;React基础知识&#xff08;组件实例三大核心属性state、props、refs&#xff09;&#xff08;二&#xff0…

ffmpeg vs2017录制vp9格式的桌面视频

ffmpeg本身不支持vp8,vp9&#xff1b;若要支持&#xff0c;则需要自己事先编译好vpx库&#xff0c;然后在ffmpeg中显式支持vpx库。 windows下采用mingw编译器编译vpx&#xff1b;本人采取的是MSYS2&#xff0c;并且本人编译vpx和ffmpeg时&#xff0c;编译的都是静态库&#xf…

【云原生】在Ubuntu18/20上部署Kubernetes/k8s集群详细教程——亲测可用!!网上其他教程均有问题!

在Ubuntu18/20上部署Kubernetes/k8s详细教程一、设置Docker二、安装Kubernetes第 1 步&#xff1a;添加Kubernetes签名密钥第 2 步&#xff1a;添加软件存储库第 3 步&#xff1a;Kubernetes 安装工具三、部署 Kubernetes步骤 1&#xff1a;准备 Kubernetes 部署步骤 2&#xf…

怎么找回笔记本的数据?笔记本数据恢复,6个教程

“我不小心删除了笔记本电脑里面的重要数据&#xff0c;请问被误删的数据还可以恢复吗&#xff1f;如果可以恢复&#xff0c;我应该怎么恢复笔记本里面的数据&#xff1f;” 很多人在使用笔记本电脑的时候&#xff0c;经常误删一些数据&#xff0c;有时是工作文档&#xff0c;…

我是如何将同事的代码改成DDD风格的

DDD是领域驱动设计的简写。前段时间听群友说行业里少有DDD的代码案例&#xff0c;进而对DDD没有一个感性的认识。我想这是行业里普遍存在的现象吧。所以&#xff0c;就有了写此文的想法。文章标题说的是“同事的代码”&#xff0c;其实只是为了让此文更具传播&#xff0c;没别的…

组件的生命周期、vue2中使用axios、插槽

目录 一、组件的生命周期 1、什么是组件的生命周期 2、生命周期函数 3、生命周期的阶段划分 4、钩子函数 5、keep-alive组件 6、生命周期函数&#xff1a; 二、vue2中使用axios 1、axios&#xff1a;是一个基于Promise的网络请求库。既可以在node.js&#xff08;服务器…

【MySQL】1. 了解数据库以及MySQL安装

了解数据库和SQL什么是数据库为什么使用数据库MySQL下载,安装,配置客户端连接MySQL方法一方法二SQLSQL分类SQL的基本规则命名规则最后大家好, 我是路不停_。 上学期学校学习了MySQL之后,课后也没有做很多总结,加上课时紧凑,后续考试也是考前草草备考了一下. 最近读了本MySQL必知…

C 程序设计教程(03)—— C 语言的数据类型(一):基本数据类型

C 程序设计教程&#xff08;03&#xff09;—— C 语言的数据类型&#xff08;一&#xff09;&#xff1a;基本数据类型 一、数据类型简介 C 语言提供了丰富的数据类型&#xff0c;每一个常量和变量必须属于某一种数据类型。C 语言中的数据类型如下&#xff1a; &#xff08…

基础数学(八)——期末考试复习

文章目录考试要求考试内容简单复习插值拟合和回归数值积分直接法迭代法非线性方程求根微分方程数值解去年考题第一题&#xff0c;插值&#xff08;12分&#xff09;第二题&#xff0c;回归和拟合第三题&#xff0c;数值积分第四题&#xff0c;线性方程组求解第五题&#xff0c;…

MGRE实验配置(华为)

华为ENSP的MGRE实验&#xff1a; 建立好拓扑图 之后就是对各个路由器的配置&#xff1a; R2配置&#xff1a; int s3/0/0 link-protocol hdlc 更改接口为hdlc认证 ip address 12.1.1.2 24 int lo0 ip add 2.2.2.2 24 int s3/0/1 [r2-Serial3/0/1]ip address 23.1.1.2 24 [r2-Se…

【ML】 基本概念

ML 基本概念1. different types of functions2. how to find the function - training data3. unseen during training4. Back to ML Framework4.1 Step1: function with unknown4.2 Step2: define loss from training data4.3 step3: optimization4.4 其他4.4.1 Sigmoid → Re…

基础算法(五)——双指针算法

双指针算法 介绍 双指针算法分为两大类&#xff1a; 两个指针指向两个不同序列&#xff0c;用两个指针维护某一种逻辑&#xff0c;例如归并排序 两个指针指向一个序列&#xff0c;即用两个指针维护一段区间&#xff0c;例如快排 核心思想&#xff1a; 若能证明出题目存在…

Linux工具学习之【vim】

✨个人主页&#xff1a; Yohifo &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f38a;每篇一句&#xff1a; 图片来源 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 Whatever is worth doing is worth doing well. 任何值得去做的事情&#xff0…