Detailed explanation of JavaScript flow control statements

The flow control statements specified by ECMAScript, the core of JS, are quite similar to other programming languages. Let’s choose some practical examples to look at
Look at these sentences. We won’t mention the sequential structure here anymore, just talk about conditions, loops and other statements.
1. Conditional selection structure
Conditional selection statements are used to perform different actions based on different conditions. Usually when writing code, you always need to perform different
for different decisions. Action, you can use conditional statements in your code to accomplish this task.
In JavaScript, we can use the following conditional statements:
if statement: Use this statement to execute code only when the specified condition is 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>

Copy after login

The result of running is:

if...else statement: Execute code when the condition is true, execute other code when the condition is 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>

Copy after login

The result of running is:

if...else if....else statement: Use this statement to select one of multiple code blocks to execute

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

Copy after login

The result of running is:

switch statement: Use this statement to select one of multiple blocks of code to execute. The switch statement is used to perform different actions based on different 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>

Copy after login

Running result:

Use of default keyword

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

Copy after login

The result of running is:

2. Loop structure
A loop can execute a block of code a specified number of times.
JavaScript supports different types of loops:
(1) for statement: loop the code block a certain number of times

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

Copy after login

The result of running is:

(2) for...in statement: Loop through the properties of the object

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

Copy after login

The result of running is:

(3)while statement: Loops the specified code block when the specified condition is true. It is more practical to judge first and then execute the statement.

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

Copy after login

The result of running is:

(4)do...while - Similarly loops the specified code block when the specified condition is true. Execute once first, then judge

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

Copy after login

运行的结果为：

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

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

Copy after login

运行的结果为：

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

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

Copy after login

运行的结果为：

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

Copy after login

运行的结果为：

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

Copy after login

运行的结果为：