JavaScript的流程控制语句

最新推荐文章于 2025-08-21 23:22:44 发布
最新推荐文章于 2025-08-21 23:22:44 发布
阅读量61 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/huiyuantang/p/5355368.html
本文详细介绍了JavaScript中的流程控制语句，包括条件选择结构（如if语句、switch语句）和循环结构（如for语句、while语句），并提供了丰富的实例帮助理解。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看
一下这些语句。顺序结构我们在这里就不再提到，直接说条件和循环以及其他语句。
一、条件选择结构
       条件选择语句用于基于不同的条件来执行不同的动作，通常在写代码时，总是需要为不同的决定来执行不同的
动作，可以在代码中使用条件语句来完成该任务。
 在JavaScript中，我们可使用以下条件语句：
if 语句：只有当指定条件为true时，使用该语句来执行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>
  
<body>
  
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
  
<button οnclick="myFunction()">点击这里</button>
  
<p id="demo"></p>
  
<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
 var x="";
 if (time<20)
 {
  x="Good day";
 }
 document.getElementById("demo").innerHTML=x;
}
</script>
  
</body>
</html>

　　

       运行的结果为：

if...else语句：当条件为true时执行代码，当条件为 false 时执行其他代码

?

       运行的结果为：

 if...else if....else 语句：使用该语句来选择多个代码块之一来执行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>
  
<body>
  
<p>如果时间早于 20:00，会获得问候 "Good day"。如果时间晚于 20:00，会获得问候 "Good evening"。</p>
  
<button οnclick="myFunction()">点击这里</button>
  
<p id="demo"></p>
  
<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
var x="";
if (time<20)
 {
 x="Good day";
 }
else
 {
 x="Good evening";
 }
document.getElementById("demo").innerHTML=x;
}
</script>
  
</body>
</html>

　　


       运行的结果为：

 

switch语句： 使用该语句来选择多个代码块之一来执行。switch 语句用于基于不同的条件来执行不同的动作

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />
< title >JS流程控制语句2</ title >
</ head >
  
< body >
< p >点击下面的按钮来显示今天是周几：</ p >
  
< button onclick = "myFunction()" >点击这里</ button >
  
< p id = "demo" ></ p >
  
< script type = "text/javascript" >
var d=new Date().getDay();
document.write("今天的星期代表数字："+d);
function myFunction()
{ var x;
  switch (d)
  {
  case 0:
  x="Today it's Sunday";
  break;
  case 1:
  x="Today it's Monday";
  break;
  case 2:
  x="Today it's Tuesday";
  break;
  case 3:
  x="Today it's Wednesday";
  break;
  case 4:
  x="Today it's Thursday";
  break;
  case 5:
  x="Today it's Friday";
  break;
  case 6:
  x="Today it's Saturday";
  break;
  }
  document.getElementById("demo").innerHTML=x;
}
</ script >
</ body >
</ html >

       运行的结果：

 default关键字的使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />
< title >JS流程控制语句2</ title >
</ head >
  
< body >
< p >点击下面的按钮来显示今天是周几：</ p >
  
< button onclick = "myFunction()" >点击这里</ button >
  
< p id = "demo" ></ p >
  
< script type = "text/javascript" >
var d=new Date().getDay();
document.write("今天的星期代表数字："+d);
function myFunction()
{ var x;
  switch (d)
  {
  case 6:
  x="Today it's Saturday";
  break;
  case 0:
  x="Today it's Sunday";
  break;
  default:
  x="Looking forward to the Weekend";
  }
  document.getElementById("demo").innerHTML=x;
}
</ script >
</ body >
</ html >

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS流程控制语句</title>
</head>
  
<body>
  
<p>如果时间早于 10:00，会获得问候 "Good morning"。</p>
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<p>如果时间晚于 20:00，会获得问候 "Good evening"。</p>
  
<button οnclick="myFunction()">点击这里</button>
  
<p id="demo"></p>
  
<script type="text/javascript">
var time=new Date().getHours();
document.write("当前北京时间："+time);
function myFunction()
{
var x="";
if (time<10)
 {
 x="Good morning";
 }
else if (time<20)
 {
 x="Good day";
 }
else
 {
 x="Good evening";
 }
document.getElementById("demo").innerHTML=x;
}
</script>
  
</body>
</html>

　　

运行的结果为：

二、循环结构
  循环可以将代码块执行指定的次数。
  JavaScript支持不同类型的循环：
(1)for语句：循环代码块一定的次数

for(var box=1;box<=10;box++)
{
 document.write("box="+box+"<br/>"); 
}

运行的结果为：

(2)for...in语句： 循环遍历对象的属性

var box={
 name:"张三",
 age:24,
 sex:"男"
 };
for(x in box)
{
 document.write(box[x]+"<br/>"); 
}

运行的结果为：

(3)while语句：当指定的条件为 true 时循环指定的代码块。先判断，再执行语句，这种比较实用。

var box=1;
while(box<=5)
{
 document.write("box="+box+"<br/>"); 
 box++;
}

 运行的结果为：

 (4)do...while - 同样当指定的条件为 true 时循环指定的代码块。先执行一次，再判断

var box=1;
do{
 document.write("box="+box+"<br/>"); 
 box++;
}while(box<=10)

 运行的结果为：

三、其他语句
(1)break语句：用于跳出循环。

for(var box=1;box<=10;box++)
 {
 if(box==5)
 {
 break;//强制退出整个循环
 }
 document.write("box="+box+"<br/>"); 
 }

运行的结果为：

执行到第四次循环时不再继续执行，跳出了真个循环,，输出的少了box=5以后的循环。
(2)continue语句：用于跳过循环中的一个迭代。

for(var box=1;box<=10;box++)
{
 if(box==5)
 {
 continue;//退出当前循环，还会继续执行后面的循环 
 }
 document.write("box="+box+"<br/>");
}

执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了box=5。
(3)with语句：将代码的作用域设置到一个特定的对象中
      先来看一般我们是怎么样输出对象的属性的值的：

var box={
 name:"张三",
 age:24,
 sex:"男"
 };
 var n=box.name;
 var a=box.age;
 var s=box.sex;
 document.write(n+"<br/>"); 
document.write(a+"<br/>");
document.write(s);

运行的结果为：

 改用with语句来写：

var box={
 name:"张三",
 age:24,
 sex:"男"
 };
 with(box){
 var n=name;
 var a=age;
 var s=sex;
 };
document.write(n+"<br/>"); 
document.write(a+"<br/>"); 
document.write(s);

　　

运行的结果为：

从三大方面介绍了JavaScript的流程控制语句，希望大家仔细阅读，数量掌握JavaScript流程控制语句的使用方法。

转载于:https://www.cnblogs.com/huiyuantang/p/5355368.html

JavaScript流程控制语句
yz_518的博客
04-05 1191
今天我们继续来学习关于JavaScript的流程控制语句,我们将继续深入的去学习和了解一下关于JavaScript的更深层次的学习,这些都是我个人的学习的成果,欢迎大家的指导,如果我的文章有任何的问题也欢迎大家的指正。
（七）JavaScript 流程控制语句
weixin_46227563的博客
03-23 2488
文章目录一、流程控制语句1. if 语句(1) if 语句的基本使用(2) if else if 多条件分支二、数组 一、流程控制语句 1. if 语句 (1) if 语句的基本使用 if 语句是最简单的条件语句，也称选择语句，通常和 else 一起使用，表示 如果…就…否则… 单行 if 语句：如果 if 语句体中只有一行语句，可以省略大括号和换行 (2) if else if 多条件分支 else if() 条件分支“暗含”不符合之前所有条件，要理解什么叫“否则如果” 二、数组 ...
JavaScript 流程控制语句
Cc040909的博客
06-19 737
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。通常用于初始化一个计数器，该表达式可以使用 var 或者 let 关键字声明新的变量，这个变量帮我们来记录次数。：它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。⑦ ⑥ ⑤ ⑦ ⑥ ⑤ ...... ⑤ 内循环结束 ③ ...... ② 外循环结束。用于确定每一次循环是否能被执行，如果结果是 true 就继续循环，否则退出循环。每次循环的最后都要执行的表达式。
javascript 流程控制语句
萧十一郎博客
03-29 550
javascript 流程控制语句
JavaScript流程控制语句（ppt）
05-31
JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句（ppt）JavaScript流程控制语句...
JavaScript流程控制语句.doc
07-28
本章节将介绍流程控制语句的种类，包括次序控制语句、选择控制语句、循环控制语句和其他流程控制语句。 次序控制语句是JavaScript中最简单的语句形式，语句按照一定顺序执行，每条语句只执行一次，不重复也不遗漏。...
javascript流程控制语句集合
10-19
JavaScript中的流程控制语句是编写复杂逻辑和控制程序执行顺序的关键元素。在这篇文章中，我们将深入探讨其中的几种主要语句：if条件判断语句、if...else语句、if...else if语句、if语句的嵌套使用、switch语句、do....
03JavaScript流程控制语句.docx
04-22
以下是对JavaScript流程控制语句的详细说明： 1. 顺序结构：这是最基础的代码执行方式，代码按照编写时的顺序逐行执行，没有特殊的控制结构。例如： ```javascript console.log("Hello"); // 输出 "Hello" console....
11. HTML 中 DOCTYPE 的作用
weixin_64684095的博客
07-22 584
H5 的声明HTML5 的 DOCTYPE 声明HTML5 中的声明用于告诉浏览器当前文档使用的是 HTML5 的文档类型。它必须是文档中的第一行内容（在任何 HTML 标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE 的作用触发标准模式DOCTYPE声明的主要作用是让浏览器以标准模式（Standards Mode）来解析和渲染页面，而不是以兼容模式（Quirks Mode）。兼容性：在没有DOCTYPE声明的情况下，浏览器可能会进入兼容模式，这会导致页面的布局和样式表现不一致。
JavaScript基础语法five
最新发布
2301_79744908的博客
08-21 251
本文介绍了JavaScript中对象的基本概念和使用方法。对象是一种无序的数据集合，由属性和方法组成，可以通过点语法或方括号访问属性。文章详细讲解了对象的增删改查操作、方法的定义与调用，以及使用for-in遍历对象的技巧。同时介绍了Math内置对象及其常用方法（如ceil、floor、round等），包括随机数生成公式和猜数字案例的实现。最后指出null属于object类型，并提供了生成N-M范围随机数的通用公式。
三十四、Vue3项目大屏之SCSS自适应适配屏幕方法
张先森的博客
08-19 356
其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。
从入门到精通：Java设计模式——单例模式
m0_73590302的博客
08-21 656
本文先解析单例模式 “确保类仅一个实例、提供全局访问点” 的定义，及唯一性、自我实例化、全局访问三大特点，说明其节省资源、保数据一致性的作用。接着详解饿汉式、懒汉式（含线程安全与不安全）、双重检查锁、静态内部类、枚举 6 种实现方式，分析各方式代码、原理、优缺点，尤其聚焦懒汉式多线程安全问题与双重检查锁中 volatile 的作用。还介绍单例在日志记录器、配置管理器等场景的应用，对比优缺点，关联 Spring 框架中 Bean 的单例管理，最后总结要点并给出设计模式学习建议。
学习链接。
weixin_49035434的博客
08-18 512
hello 算法 0.2 如何使用本书 - Hello 算法代码随想录: 代码随想录被删的前端游乐场 被删的前端游乐场Github漫游指南 : Github ebookJaveScript源码: https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js世峰的刷题网站: labuladong 的算法笔记 | labuladong 的算法笔记编程导航: 编程导航 - 程序员一站式编程学习交流社
Layui COP证书管理系统
bemyrunningdog
08-18 447
本文介绍了一个基于Layui和SpringBoot的COP证书管理系统的完整实现方案。系统采用前后端分离架构，前端使用Layui2.8.3框架实现响应式界面，后端基于SpringBoot3.1.0和Java17开发，MySQL8.0作为数据库存储。系统实现了证书全生命周期管理（草稿、已提交、审核中、已签发、已拒绝五种状态），包含证书增删改查、批量操作、操作日志记录等核心功能。技术实现上，后端采用RESTful API设计，通过MyBatis操作数据库，前端使用Layui表格和表单组件实现数据展示和交互。系统
【tips】unsafe-eval线上页面突然空白
Dorcas_FE的博客
08-18 257
页面因违反CSP策略的unsafe-eval限制而无法展示，原因是后端安全升级后原CSP策略仅允许script-src 'self' 'unsafe-inline'，
JavaScript 性能优化实战大纲
luomoyoushang的博客
08-19 305
【代码】JavaScript 性能优化实战大纲。
Babylon.js学习之路《实现模型距离线的显示【物体间直线距离】》
想了半天，还不知道写点什么
08-21 171
三维场景中：显示模型边界框，及距离墙体的虚线指示
Java与Vue深度融合，构建资产设备全周期管理系统，集成移动端实时操作与后台智能管理，功能完备且附完整源码，助力企业实现资产数字化高效运维
2301_81867536的博客
08-21 548
在当今企业运营中，资产设备作为重要的生产要素，其管理效率和质量直接影响到企业的生产能力、成本控制和整体竞争力。传统的资产设备管理模式往往存在信息分散、流程繁琐、监控不及时等问题，难以满足企业现代化管理的需求。为了实现资产设备的精细化、智能化管理，提高资产利用率、降低运营成本，资产设备全生命周期管理系统应运而生。该系统通过对资产设备从采购、入库、使用、维护到报废的全过程进行跟踪与管理，为企业提供全面、准确、实时的资产设备信息，助力企业实现科学决策和高效运营。
CreateRef和useRef
北海几经夏的博客
08-20 349
在 React 中，createRef 和 useRef 都是用于创建引用（ref）来访问 DOM 元素或组件实例的工具，但它们在 使用场景、生命周期行为 和 功能范围 上有显著区别。
深入解析JavaScript流程控制语句及其应用实例
在深入学习JavaScript编程的过程中，理解并掌握流程控制语句是至关重要的。本文主要介绍了三种基本的流程控制语句：if语句、if...else语句以及if...else嵌套语句。 1. **if语句**：这是JavaScript中最基础的条件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值