详解JavaScript的流程控制语句

前端之家收集整理的这篇文章主要介绍了详解JavaScript的流程控制语句前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JS的核心ECMAScript规定的流程控制语句和其他的程序设计语言还是蛮相似的。我们选择一些实用的例子来看 一下这些语句。顺序结构我们在这里就不再提到,直接说条件和循环以及其他语句。

一、条件选择结构

条件选择语句用于基于不同的条件来执行不同的动作,通常在写代码时,总是需要为不同的决定来执行不同的 动作,可以在代码中使用条件语句来完成该任务。 在JavaScript中,我们可使用以下条件语句: if 语句:只有当指定条件为true时,使用该语句来执行代码

JS流程控制语句

如果时间早于 20:00,会获得问候 "Good day"。

<button onclick="myFunction()">点击这里

<p id="demo">

<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;
}

运行的结果为:

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

JS流程控制语句

如果时间早于 20:00,会获得问候 "Good day"。如果时间晚于 20:00,会获得问候 "Good evening"。

<button onclick="myFunction()">点击这里

<p id="demo">

<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;
}

运行的结果为:

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

JS流程控制语句

如果时间早于 10:00,会获得问候 "Good morning"。

如果时间早于 20:00,会获得问候 "Good day"。

如果时间晚于 20:00,会获得问候 "Good evening"。

<button onclick="myFunction()">点击这里

<p id="demo">

<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;
}

运行的结果为:

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

JS流程控制语句2

点击下面的按钮来显示今天是周几:

<button onclick="myFunction()">点击这里

<p id="demo">

<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;
}

运行的结果:

default关键字的使用

JS流程控制语句2

点击下面的按钮来显示今天是周几:

<button onclick="myFunction()">点击这里

<p id="demo">

<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;
}

运行的结果为:

二、循环结构

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

Box=1;Box<=10;Box++) { document.write("Box="+Box+"
"); }

运行的结果为:

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

Box={ name:"张三",age:24,sex:"男" }; for(x in Box) { document.write(Box[x]+"
"); }

运行的结果为:

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

Box=1; while(Box<=5) { document.write("Box="+Box+"
"); Box++; }

运行的结果为:

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

Box=1; do{ document.write("Box="+Box+"
"); Box++; }while(Box<=10)

运行的结果为:

三、其他语句

(1)break语句:用于跳出循环。

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

运行的结果为:

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

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

运行的结果为:

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

Box={ name:"张三",sex:"男" }; var n=Box.name; var a=Box.age; var s=Box.sex; document.write(n+"
"); document.write(a+"
"); document.write(s);

运行的结果为:

改用with语句来写:

Box={ name:"张三",sex:"男" }; with(Box){ var n=name; var a=age; var s=sex; }; document.write(n+"
"); document.write(a+"
"); document.write(s);

运行的结果为:

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

猜你在找的JavaScript相关文章