详解JavaScript的流程控制语句

2024-12-09 21:25:21

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 onclick="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 时执行其他代码

<!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 onclick="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>

运行的结果为：

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>如果时间早于 10:00，会获得问候 "Good morning"。</p>
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<p>如果时间晚于 20:00，会获得问候 "Good evening"。</p> 

<button onclick="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>

运行的结果为：

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

<!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关键字的使用

<!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>

运行的结果为：

二、循环结构
循环可以将代码块执行指定的次数。
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流程控制语句的使用方法。

JavaScript基础之流程控制语句的用法

第三部分:流程控制语句 JavaScript代码是书写位置: JavaScript代码应该写在<script type="text/javascript"></script>这一对标记中. 或者作为外部引用<script src="JavaScript代码路径"></script> JavaScript的每一句代码请用分号作为结束. 输出语句 1.控制台输出:console.log(); 它可以在控制台中输出一些信息,
javascript流程控制语句集合

一.if语句 if语句是最基本的条件判断语句.根据表达式条件来执行相应的处理.语法示例如下: var a=5; //声明变量a,并赋值为5. var b; //声明变量b. if(a==b){ //判断,如果a=b,则执行下面内容 alert("b=5"); //弹窗,b=5. } 1.a==b是if语句中的条件. 2.alert("a=c")是if语句中的结果. 此段脚本的含义是:声明变量a.b,且赋值a=5:当a=b时,弹窗b=5. 注:
浅谈js算法和流程控制

代码整体结构是执行速度的决定因素之一. 代码量少不一定运行速度快, 代码量多也不一定运行速度慢. 性能损失与代码组织方式和具体问题解决办法直接相关. 倒序循环可以提高性能,如: for (var i=items.length; i--; ){ process(items[i]); } 控制件与 true 值进行比较,任何非零数字自动强制转换为 true,而零等同于 false.实际上,控制条件已经从两次比较(迭代少于总数吗?它等于 true 吗?)减少到一次比较(它等于 true 吗?).将每个
详解Node.js串行化流程控制

串行任务:需要一个接着一个坐的任务叫做串行任务. 可以使用回调的方式让几个异步任务按顺序执行,但如果任务过多,必须组织一下,否则过多的回调嵌套会把代码搞得很乱. 为了用串行化流程控制让几个异步任务按顺序执行,需要先把这些任务按预期的执行顺序放到一个数组中,这个数组将起到队列的作用:完成一个任务后按顺序从数组中取出下一个. 数组中的每个任务都是一个函数.任务完成后应该调用一个处理器函数,告诉它错误状态和结果. 为了演示如何实现串行化流程控制,我们准备做个小程序,让它从一个随机选择的RSS预定源中获
整理Javascript流程控制语句学习笔记

1.做判断(if语句) if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件){ 条件成立时执行代码 } 例子:假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司. <script type="text/javascript"> var mycarrer = "HTML"; if (mycarrer == "HTML"){ document.write("你面试成功,欢迎加入公
JavaScript程序中的流程控制语句用法总结

条件判断语句 1.if语句 if (condition) statement1 else statement2 其中的condition条件可以是任意表达式,而且对这个表达式的求值结果不一定是布尔值.ECMAScript会自动调用Boolean()转换函数将这个表达式的结果转换为一个布尔值.如果对condition求值的结果为true,则执行statement1,如果对condition求值结果为false,则执行statement2.这两个语句既可以是一行代码,也可以是一个代码块(推荐). i
js 性能优化之算法和流程控制

循环处理是最常见的编程模式之一,也是提升性能必须关注的要点之一. 常见的优化方案有: ①JavaScript的四种循环(for.do-while.while.for-in)中,for-in循环比其他几种明显要慢.由于每次迭代操作会同时搜索实例或原型属性,for-in循环的每次迭代都会产生更多的开销,所以比其他类型要慢.因此遍历一个属性数量有限的已知属性列表,可以这样优化: var props = ['prop1', 'prop2'],i = 0; whlie(i < props.length){
详解JavaScript的流程控制语句

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

目录概述判断语句 if if...else if..else if...else if语句和三元运算符的互换选择语句 switch case的穿透性循环语句 for while do...while for 和 while 的小区别跳出语句 break continue 死循环嵌套循环概述在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.也就是说,程序的流程对运行结果有直接的影响.所以,我们必须清楚每条语句的执行流程.而且,很多时候我们要通过控制语句的执行顺序
详解JavaScript中循环控制语句的用法

JavaScript提供完全控制来处理循环和switch语句.可能有一种情况,当你需要退出一个循环,但未达到其底部.也可能有一种情况,当要跳过的码块的一部分,并直接开始下一个迭代. 为了处理这些情况下,JavaScript提供了break和continue语句.这些语句是用来马上退出任何循环或启动循环的下一次迭代. break 语句: break语句,这是简单地用switch语句介绍,用于提前退出循环,打破封闭的花括号. 例子: 这个例子说明了如何使用break语句同while循环.请注意循环打
详解JavaScript引擎V8执行流程

目录一.V8来源二.V8的服务对象三.V8的早期架构四.V8早期架构的缺陷五.V8的现有架构六.V8的词法分析和语法分析七.V8 AST抽象语法树八.字节码九.Turbofan 一.V8来源 V8的名字来源于汽车的"V型8缸发动机"(V8发动机).V8发动机主要是美国发展起来,因为马力十足而广为人知.V8引擎的命名是Google向用户展示它是一款强力并且高速的JavaScript引擎. V8未诞生之前,早期主流的JavaScript引擎是JavaScriptCore引
详解JavaScript中的执行上下文及调用堆栈

一.执行上下文是什么代码运行是在一定的环境之中运行的,这个运行环境我们就成为执行环境,也就是执行上下文,按照执行环境不同,我们可以分为三类: 全局执行环境:代码首次执行时候的默认环境函数执行环境:每当执行流程进入到一个函数体内部的时候 Eval执行环境:当eval函数内部的文本执行的时候二.执行上下文栈是什么既然是'栈',那就得符合'栈'的特性,即数据结构是先进后出.下面我们看一段代码: function cat(a){ if(a<0){ return false; } console.
详解JavaScript 中的批处理和缓存

场景最近在生产环境遇到了下面这样一个场景: 后台在字典表中存储了一些之前需要前后端共同维护的枚举值,并提供根据 type/id 获取字典的 API.所以在渲染列表的时候,有很多列表的字段直接就是字典的 id,而没有经过后台的数据拼装. 起初,吾辈解决问题的流程如下确定字典字段,添加转换后的对象类型接口将对象列表进行转换得到其中字典字段的所有值对字典 id 列表进行去重根据 id 列表从后台获取到所有的字典数据将获得的字典数据转换为 id => 字典的 Map 遍历最初的列表,对里面
详解JavaScript实现简单的词法分析器示例

目录正文什么是词法分析器? 实现一个简单的词法分析器总结正文词法分析是编译器的一项重要工作,其目的是将源代码转换成单个单词(token)的序列,方便后续语法分析器(parser)对其进行分析.在本文中,我们将使用 JavaScript 实现一个简单的词法分析器,以便更好地理解其原理. 什么是词法分析器? 在编译器中,词法分析器是将源代码分割成单个单词的程序.它将输入的字符流转换为单词流,这些单词(token)在后续的编译过程中将被用来构建语法树(parse tree). 词法分析器通常
详解JavaScript基于面向对象之创建对象（2）

接着上文<详解JavaScript基于面向对象之创建对象(1)>继续学习. 4.原型方式我们创建的每个函数都有一个通过prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.逻辑上可以这么理解:prototypt通过条用构造函数而创建的那个对象的原型对象.使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法.也就是说,不必在构造函数中定义对象信息,而是直接将这些信息添加到原型中. 原型方式利用了对象的pr
详解JavaScript基于面向对象之继承实例

javascript面向对象继承的简单实例: 作为一门面向对象的语言,继承自然是它的一大特性,尽管javascript的面向对象的实现机制和和c#和java这样典型的面向对象不同,但是继承的基本特点还是具有的,简单的说就是获得父级的方法和属性,下面是一段简单的实例,大家有兴趣可以分析一下: window.onload = function(){ function parent(age,name){ this.age = age; this.name = name; } parent.protot
详解JavaScript基于面向对象之继承

一.面相对象继承机制这个实例使用UML很好的解释了继承机制. 说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种,具有不同数量的边.正方形是矩形的一种,所有的边等长.这就构成了一种完美的继承关系,很好的解释了面向对象的继承机制. 在这个例子中,形状是椭圆形和多边形的基类(通常我们也可以叫它父类,所有类都由

详解JavaScript的流程控制语句

相关推荐

随机推荐