Explication détaillée des instructions de contrôle de flux JavaScript_compétences Javascript-js tutoriel-php.cn

Explication détaillée des instructions de contrôle de flux JavaScript_compétences Javascript

WBOY

Libérer： 2016-05-16 15:29:03

original

1626 Les gens l'ont consulté

Les instructions de contrôle de flux spécifiées par ECMAScript, le cœur de JS, sont assez similaires à celles d'autres langages de programmation. Choisissons quelques exemples pratiques à regarder
Regardez ces phrases. Nous ne mentionnerons plus ici la structure séquentielle, parlons simplement des conditions, des boucles et autres instructions.
1. Structure de sélection conditionnelle
Les instructions de sélection conditionnelle sont utilisées pour effectuer différentes actions en fonction de différentes conditions. Habituellement, lors de l'écriture de code, vous devez toujours effectuer différents
pour différentes décisions. Action, vous pouvez utiliser des instructions conditionnelles dans votre code pour accomplir cette tâche.
En JavaScript, nous pouvons utiliser les instructions conditionnelles suivantes :
Instruction if : Utilisez cette instruction pour exécuter du code uniquement lorsque la condition spécifiée est vraie

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

Copier après la connexion

Le résultat de la course à pied est :

instruction if...else : Exécuter le code lorsque la condition est vraie, exécuter un autre code lorsque la condition est fausse

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

Copier après la connexion

Le résultat de la course à pied est :

if...else if....else instruction : Utilisez cette instruction pour sélectionner l'un des multiples blocs de code à exécuter

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

Copier après la connexion

Le résultat de la course à pied est :

Instruction switch : Utilisez cette instruction pour sélectionner l'un des multiples blocs de code à exécuter. L'instruction switch est utilisée pour effectuer différentes actions en fonction de différentes conditions

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

Copier après la connexion

Résultat en cours d'exécution :

Utilisation du mot clé par défaut

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

Copier après la connexion

Le résultat de la course à pied est :

2. Structure de la boucle
Une boucle peut exécuter un bloc de code un nombre de fois spécifié.
JavaScript prend en charge différents types de boucles :
(1) for instruction : boucler le bloc de code un certain nombre de fois

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

Copier après la connexion

Le résultat de la course à pied est :

(2) for...in instruction : boucle dans les propriétés de l'objet

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

Copier après la connexion

Le résultat de la course à pied est :

(3)instruction while : Boucle le bloc de code spécifié lorsque la condition spécifiée est vraie. Il est plus pratique de juger d’abord, puis d’exécuter la déclaration.

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

Copier après la connexion

Le résultat de la course à pied est :

(4)do...while - Boucle de la même manière le bloc de code spécifié lorsque la condition spécifiée est vraie. Exécutez d'abord une fois, puis jugez

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

Copier après la connexion

运行的结果为：

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

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

Copier après la connexion

运行的结果为：

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

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

Copier après la connexion

运行的结果为：

执行到第四次循环时，跳出第五次循环，继续向下面执行，输出的少了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);

Copier après la connexion

运行的结果为：

改用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);

Copier après la connexion

运行的结果为：

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