web前端学习笔记10-流程控制——循环结构

一、循环结构分类

1. while循环
2. do…while循环
3. for循环
4. for…in循环

二、while型循环   while(条件表达式){循环体}

死循环：判断条件永远为真的循环

// while循环
// 输出1-100——————————————————————————
var num=1;
while(num<=100){
	document.write(num);
	document.write(' ');
	num++;
}
// 求1-100的和——————————————————————————
var total=0;
var i=1;
while(i<=100){
	total+=i;
	i++;
}
document.write(total);

// 生成一个1行10列表格——————————————————————————
// 输出表格标签
document.write('<table border="1">');
document.write('<tr>');
// 循环输出td标签
var j=0;
while(j<10){
	document.write('<td>'+(j+1)+'</td>');
	j++;
}			
document.write('</tr>');
document.write('</table>');

// 生成一个10行10列表格——————————————————————————
// 输出表格标签
document.write('<table border="1">');
// 循环生成10行
var k=0;
while(k<10){
	document.write('<tr>');
	// 循环输出td标签
	var j=0;
	while(j<10){
		document.write('<td>'+(j+1)+'</td>');
		j++;
	}			
	document.write('</tr>');
	k++
}
document.write('</table>');

三、do…while型循环   do{循环体}while(条件表达式)

至少会执行一次循环体

// do...while循环——————————————————————————————————————————————————————
// 与while区别：开始判断条件为假时，do...while会执行一次循环体，但while不会
// 输出1-30
var num1=1;
do{
	console.log(num1);
	num1++;
}while(num1<=30)

四、for循环   for(变量定义;判断条件;变量自增或自减){循环体}

// for循环
// 输出1-100
for(var num2=1;num2<=100;num2++){
	console.log(num2);
}

五、for…in 遍历对象专用的循环   for(var 变量 in 对象){使用对象中的内容}

// for...in循环	
var obj=new Object();  //声明对象
// 向对象中添加内容
obj.name='小明';
obj.age=30;
obj.sex='男';
obj.id=1701;
console.log(obj);
for(var attr in obj){
	console.log(attr,obj[attr]);
}

结果如图

五、其他流程控制语句

5.1 with

// 其他流程控制语句——with
var obj=new Object();  //声明对象
// 向对象中添加内容
obj.name='小明';
obj.age=30;
obj.sex='男';
obj.id=1701;
console.log(obj);
// 输出对象中的内容
console.log(obj.name);
console.log(obj.id);
// with
with(obj){ //表示以下内容都是obj中的内容
	console.log(name);
	console.log(age);
}

5.2 break

1. 在switch…case分支中，break可破坏分支
2. 终止循环

// break
// 遍历输出1-100的数
for (var u=1;u<=100;u++){
	// 检测循环中是否遇到22，若遇到，循环停止
	if (u==22){
		break;  //终止循环
	}
	console.log(u);
}

5.3 continue

跳过当前循环，开始下一次循环。其作用是在遍历数据的同时进行数据过滤

// continue
for (var u=1;u<=50;u++){
	// 检测循环中是否遇到22，若遇到，循环停止
	if (u==22){
		continue;  //跳过当前循环，开始下一次循环
	}
	console.log(u);
}

var p=1;
while(p<=50){
	// 判断22
	if (p==22){
		p++;   //若没有此句，循环至22就会开始死循环
		continue;  //跳过当前循环，开始下一次循环
	}
	console.log(p);
	p++;  
}