第四节JavaScript 条件语句、循环语句、break与continue语句

一、JavaScript条件语句

在通常的代码中,我们有一些需要决定执行不同动作,这就可以在代码中使用条件语句来完成。

下面是我们常使用的条件语句:

  1. if语句:只有当指定条件是true时,执行条件内代码。
  2. if...else语句:当条件为true时执行代码,当条件为false时执行其它代码。
  3. if...else if...else:使用该语句来选择多个代码块之一来执行。
  4. switch:使用该语句来选择多个代码块之一来执行。

1 、if语句

只有当指定条件是true时,执行条件内代码。

语法:

if(condition){
	// 当条件为true时执行该区域代码
}

注意:请使用小写的if。如果使用了大写的IF会生成JavaScript错误。

实例:

if(time < 20){
x = "Good Day";
}

即:当time小于20时,才会运行"x = "Good Day";"代码。

2 、if....else语句

当条件为true时执行代码,当条件为false时执行其它代码。

语法:

if(condition){
	// 当条件为true时执行该区域代码
} else {
	//当条件不为true时执行该区域代码
}

实例:

if (time<20) { 
  x="Good day"; 
} else { 
  x="Good evening"; 
}

即:当time小于20时,才会运行"x = "Good Day";"代码。当time不小于20时,会执行else中代码"x="Good evening";

"。

3 、if....else if....else语句

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

语法:

if (condition1) {
    当条件 1 为 true 时执行的代码
} else if (condition2) {
    当条件 2 为 true 时执行的代码
} else {
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

实例:

if (time<10) { 
  document.write("<b>早上好</b>"); 
} else if (time>=10 && time<20) { 
  document.write("<b>今天好</b>"); 
} else { 
  document.write("<b>晚上好!</b>"); 
}

即:根据不同时间段,显示生成不同的问候语,当time小于10点之前,问候语时"早上好",当time大于等于10 且小于20点时,问候语是"今天好",当time大于等于20点时,问候语是"晚上好"。

5 、switch语句

switch 语句用于基于不同的条件来执行不同的动作。

语法:

switch(n) {
 case 1: 
    // 执行代码块 1 
break; 
case 2: 
    // 执行代码块 2 
break; 
default: 
    // 非1和2时执行的代码 
}

注意:

设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。

实例:

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击下面的按钮,会显示出基于今日日期的消息:</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x;
	var d=new Date().getDay();
	switch (d)
    {
  		case 6:x="今天是星期六";
    	break;
  		case 0:x="今天是星期日";
    	break;
  		default:
    	x="期待周末";
  	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

二、JavaScript 循环

1 、for循环

循环可以使某代码块指定循环的次数。

说明:

平时如果我们想打印出cars数组中6个数字,这样可以写:

document.write(cars[0] + "<br>");

document.write(cars[1] + "<br>");

document.write(cars[2] + "<br>");

document.write(cars[3] + "<br>");

document.write(cars[4] + "<br>");

document.write(cars[5] + "<br>");

但是,你没发现这样写需要写跟多冗余代码,且不方便,那么我们可以用循环方式来写:

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

从中可以看出,代码简洁了许多。

for 循环的语法:

for (语句 1; 语句 2; 语句 3)

{

被执行的代码块

}

说明:

语句 1 (代码块)开始前执行

语句 2 定义运行循环(代码块)的条件

语句 3 在循环(代码块)已被执行之后执行

实例:

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

执行结果:

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4

从上述:

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件(i 必须小于 5)。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。

2 、for/in循环

for/in 语句循环遍历对象的属性:

var person={fname:"Bill",lname:"Gates",age:56}; 
var txt = "";
for (x in person) {  // x 为属性名
    txt = txt + person[x];
}

输出结果:

BillGates56

说明:

循环遍历对象 "person" 的属性,根据x的属性名称,获取该名称对应的内容,并赋值。

3 、while循环

只要指定条件为 true,循环就可以一直执行代码块。

while 循环会在指定条件为true时循环执行代码块。

语法

while (条件 )
{
需要执行的代码
}

实例:

while (i<5) {
    x=x + "The number is " + i + "<br>";
    i++;
}

执行结果:

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4

注意:如果您忘记增加条件中所用变量的值,该循环永远不会结束。这可能导致浏览器崩溃。

4 、do/while循环

do/while 循环是 while 循环的变体。

该循环会在检查条件是否为true之前执行一次代码块,然后如果条件为true的话,就会重复这个循环。

语法:

do {
需要执行的代码
}
while (条件);

实例:

do {
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

执行结果:

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4

三、break与continue语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

1 、break语句

实例:

for (i=0;i<10;i++) {
    if (i==3)  {
        break;
    }
    x=x + "The number is " + i + "<br>";
}

执行结果:

该数字为 0
该数字为 1
该数字为 2

说明:

如果上述实例中不加break语句,那么打印的结果就是0~9了,加上break之后,在i=3时触发break语句,跳出for循环,所以只打印到2就结束了。

2 、continue语句

实例:

for (i=0;i<=10;i++) {
if (i==3) {
 continue;
}
   x=x + "The number is " + i + "<br>";
}

输出结果:

该数字为 0
该数字为 1
该数字为 2
该数字为 4
该数字为 5
该数字为 6
该数字为 7
该数字为 8
该数字为 9

说明:

从结果可以看出,只有i = 3时执行了continue语句,导致跳出了本次循环,但是又不影响下次继续循环。

相关推荐
Q_19284999066 分钟前
基于Spring Boot的九州美食城商户一体化系统
java·spring boot·后端
张国荣家的弟弟23 分钟前
【Yonghong 企业日常问题 06】上传的文件不在白名单,修改allow.jar.digest属性添加允许上传的文件SH256值?
java·jar·bi
真滴book理喻26 分钟前
Vue(四)
前端·javascript·vue.js
ZSYP-S35 分钟前
Day 15:Spring 框架基础
java·开发语言·数据结构·后端·spring
yuanbenshidiaos38 分钟前
c++------------------函数
开发语言·c++
yuanbenshidiaos42 分钟前
C++----------函数的调用机制
java·c++·算法
程序员_三木1 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
是小崔啊1 小时前
开源轮子 - EasyExcel01(核心api)
java·开发语言·开源·excel·阿里巴巴
tianmu_sama1 小时前
[Effective C++]条款38-39 复合和private继承
开发语言·c++
黄公子学安全1 小时前
Java的基础概念(一)
java·开发语言·python