Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der JavaScript-Flusskontrollanweisungen_Javascript-Fähigkeiten
Detaillierte Erläuterung der JavaScript-Flusskontrollanweisungen_Javascript-Fähigkeiten
- WBOYOriginal
- 2016-05-16 15:29:031656Durchsuche
Die von ECMAScript, dem Kern von JS, spezifizierten Flusskontrollanweisungen sind denen anderer Programmiersprachen sehr ähnlich. Schauen wir uns einige praktische Beispiele an
Schauen Sie sich diese Sätze an. Wir werden hier nicht mehr auf die sequentielle Struktur eingehen, sondern nur noch über Bedingungen, Schleifen und andere Anweisungen sprechen.
1. Bedingte Auswahlstruktur
Bedingte Auswahlanweisungen werden verwendet, um unterschiedliche Aktionen basierend auf unterschiedlichen Bedingungen auszuführen. Normalerweise müssen Sie beim Schreiben von Code immer unterschiedliche
für unterschiedliche Entscheidungen ausführen.
Aktion: Sie können in Ihrem Code bedingte Anweisungen verwenden, um diese Aufgabe auszuführen.
In JavaScript können wir die folgenden bedingten Anweisungen verwenden:
if-Anweisung: Verwenden Sie diese Anweisung, um Code nur dann auszuführen, wenn die angegebene Bedingung wahr ist
<!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>
Das Ergebnis des Laufens ist:
if...else-Anweisung: Code ausführen, wenn die Bedingung wahr ist, anderen Code ausführen, wenn die Bedingung falsch ist
<!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>
Das Ergebnis des Laufens ist:
if...else if....else-Anweisung: Verwenden Sie diese Anweisung, um einen von mehreren Codeblöcken zur Ausführung auszuwählen
<!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>
Das Ergebnis des Laufens ist:
switch-Anweisung: Verwenden Sie diese Anweisung, um einen von mehreren Codeblöcken zur Ausführung auszuwählen. Die switch-Anweisung wird verwendet, um verschiedene Aktionen basierend auf unterschiedlichen Bedingungen auszuführen
<!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>
Laufergebnis:
Verwendung des Standardschlüsselworts
<!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>
Das Ergebnis des Laufens ist:
2. Schleifenstruktur
Eine Schleife kann einen Codeblock eine bestimmte Anzahl von Malen ausführen.
JavaScript unterstützt verschiedene Arten von Schleifen:
(1) for-Anweisung: Schleife den Codeblock eine bestimmte Anzahl von Malen
for(var box=1;box<=10;box++)
{
document.write("box="+box+"<br/>");
}
Das Ergebnis des Laufens ist:
(2) for...in-Anweisung: Schleife durch die Eigenschaften des Objekts
var box={
name:"张三",
age:24,
sex:"男"
};
for(x in box)
{
document.write(box[x]+"<br/>");
}
Das Ergebnis des Laufens ist:
(3)while-Anweisung: Schleift den angegebenen Codeblock, wenn die angegebene Bedingung wahr ist. Es ist praktischer, zuerst zu urteilen und dann die Aussage auszuführen.
var box=1;
while(box<=5)
{
document.write("box="+box+"<br/>");
box++;
}
Das Ergebnis des Laufens ist:
(4)do...while - Durchläuft den angegebenen Codeblock auf ähnliche Weise, wenn die angegebene Bedingung wahr ist. Zuerst einmal ausführen, dann beurteilen
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流程控制语句的使用方法。
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse