详解JavaScript的流程控制语句_javascript技巧

 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 if语句、javascript 语句、javascript输出语句、javascript with语句,以便于您获取更多的相关知识。

时间: 2024-08-22 14:35:14

详解JavaScript的流程控制语句_javascript技巧的相关文章

详解JavaScript基本类型和引用类型_javascript技巧

一.值的类型        早在介绍JS的数据类型的时候就提到过基本类型和引用类型,不过在说两种类型之前,我们先来了解一下变量的值的类型.在ECMAScript中,变量可以存在两种类型的值,即原始值和引用值.(1)原始值        存储在栈中的简单数据段,也就是说,它们的值直接存储在变量访问的位置.(2)引用值        存储在堆中的对象,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处.        为变量赋值时,ECMAScript的解释程序必须判断该值是原始类型,还是引

详解Javascript继承的实现_javascript技巧

本文从以下四个方面展开话题: •1. 混合方式实现及问题 •2. 期望的调用方式 •3. 继承库的详细实现 •4. 总结 感兴趣的朋友可以继续往下阅读详情. 我最早掌握的在js中实现继承的方法是在xx学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用原型链继承父类prototype 对象的方法,满足我遇到过的所有继承的场景.正因如此,我从没想过下次写继承的时候,我要换一种方式来写,直到今天晚上看了三生

详解Javascript数据类型的转换规则_javascript技巧

一.数据类型 5种基本数据类型:Null/Undefined/String/Boolean/Number 1种复杂数据类型:Object 二.数据类型检测 传送门<JS中检测数据类型的几种方式及优缺点小结> 1.typeof 2.instanceof/constructor 3.Object.prototype.toString.call(value) 4.Object.prototype.toString 三.数据类型转换 JS内部提供不同数据类型的自动转换机制,在某处预期为某种类型而不是某

详解JavaScript的回调函数_javascript技巧

本文的目录: 什么是回调或高级函数 回调函数是如何实现的 实现回调函数的基本原则 回调地狱的问题和解决方案 实现自己的回调函数 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值". 因为function是内置对象,我

详解javascript实现自定义事件_javascript技巧

我们平时在操作dom时候经常会用到onclick,onmouseover等一系列浏览器特定行为的事件, 那么自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,在合适的时候需要哪个事件类型,就去调用哪个处理程序 1.js所支持的浏览器默认事件 浏览器特定行为的事件,或者叫系统事件,js默认事件等等都行,大家知道我指的什么就行,下文我叫他js默认事件. js默认事件的事件绑定,事件移出等一系列操作,相信大家都有用到过,如: //DOM0级事件处理程序 var oDiv = docum

详解javascript数组去重问题_javascript技巧

首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据.遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复.于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var result = []; var isRepetition; for(var i=0; i<this.length; i++){ isRepetition = false; for(var j=0; j<result.length; j++)

详解javascript函数的参数_javascript技巧

javascript函数可以用任意多个参数来调用,而不用管函数定义时指定了几个参数.因为函数是弱类型的,没有方法去声明它所期望的参数类型,并且给任何函数传递任何类型的值都是合法的. 1.Js函数可以传入不同的参数,如 function writeNString(strMsg){ document.write(strMsg + "<br>"); } 2.Js函数返回值,js函数可以将运行的结果返回,函数可以视为一个黑盒子,使用参数输入数据后产生所需的运行结果,如 functi

详解JavaScript UTC时间转换方法_javascript技巧

一.前言 1.UTC: Universal Time Coordinated,协调世界时. 2.格林尼治标准时(GMT)     格林尼治标准时间(Greenwich Mean Time,GMT)是指位于伦敦郊区的皇家格林尼治天文台的标准时间,因为本初子午线被定义在通过那里的经线. 理论上来说,格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时的时间.由于地球在它的椭圆轨道里的运动速度不均匀,这个时刻可能和实际的太阳时相差16分钟. 地球每天的自转是有些不规则的,而且正在缓慢减速.所以,格林尼

详解JavaScript对象和数组_javascript技巧

许多高级编程语言都是面向对象的,比如C++.C#和Java等高级程序设计语言,那么一种面向对象语言有哪些基本要求呢?下面我们就通宿地说一下面向对象的一些知识. 一种面向对象语言需要向开发者提供四种基本能力:        (1)封装:把相关的信息(无论数据或方法)存储在对象中的能力        (2)聚集:把一个对象存储在另一个对象内的能力        (3)继承:由另一个类(或多个类)得来类的属性和方法的能力        (4)多态:编写能以多种方法运行的函数或方法的能力