学习前端的第二十天——循环结构

感觉这一块学习的节奏有丶慢，不过也正好把基础打牢固，能学得更细一些。还是说说今天学习的内容吧，今天重点学习了循环结构。不过再说循环之前在讲讲一些其他知识

一、三元运算符

• 也叫三目运算符
• 其实它是判断结构的简写形式
• 比较适合判断条件较少的结构
• 语法：
  判断条件 ? 执行的代码1 : 执行的代码2;
• 含义：
  如果条件为true，则执行代码1；如果条件为false，则执行代码2

例题：

// 判断一个年份是闰年还是平年
var year = prompt('请输入年份');
 year%4==0 && year%100!=0 || year%400==0 ? console.log('闰年') : console.log('平年');

多个条件的情况：
// 判断一个数是正数还是负数 ？如果是0，既不是正数也不是负数
var num = prompt('请输入一个数字');
num > 0 ? console.log('正数') : num ==0 ? console.log('既不是正数也不是负数') : console.log('负数');

二、switch多分支结构

语法：
switch(条件判断)
{
	case: 值1;
		代码1;
		break;
	case: 值2;
		代码2;
		break;
	case: 值3;
		代码3;
		break;
	default:
		如果以上条件都不满足，则执行该代码;
}

说明：
1、switch、case、default都是系统提供的关键字
2、switch后面的括号里面放的是条件，这个条件是一个变量
3、switch条件判断是全等于判断，既判断值也判断类型，只有两个都相等才会返回true
4、case后面的值是做匹配使用的
5、break是结束当前的程序，防止穿透
6、default相当于是其他的情况else类似


例题：

//实现一个简单的计算器
//计算器由四个部分组成，需要两个数值、需要符号、还需要结果，所以需要声明四个变量
var num1 = Number(prompt('请输入一个数字'));

//使用符合做匹配
var fh = prompt('请输入+、-、*、/');
var num2 = Number(prompt('请输入一个数字'));

//输出结果的变量
var res = 0;

//switch匹配
switch(fh){
	case '+' :
		res = num1 + num2;		//将num1和num2转换成数值型，就不会起到+的连接作用
		break;
	case '-' :
		res = num1 - num2;
		break;
	case '*' :
		res = num1 * num2;
		break;
	case '/' :
		res = num1 / num2;
		break;
	default :
		res = '请重新输入';
}   
document.write(res);

三、循环结构

• 循环的意思就是重复或者反复做某件事情
• 生活中也有关于循环的词语，熟能生巧，一直重复做某件事情
• 在程序中循环结构可以帮助我们节省代码量，也可以优化代码，解放自己
• 大家发现手动一遍又一遍做这些事情太麻烦了，所以可以使用循环结构更为简单

while循环结构

语法：


//表示循环从什么地方开始，专业术语叫做变量初始化。当在外面时，变量初始化只能执行一次
var i = 1;
 		  
//while是系统关键字，while后面的括号里面放的是循环条件，到什么时候结束 ，代码执行多少次
while(){  		 
	要执行的代码
	
	//步长，专业术语叫做变量更新
	i++;   		
}


例题：

var i = 1;
while(i<=100){
    document.write('<h1>循环次数：'+i+'</h1>');
    i++; 
}


分析while循环执行顺序：

	第一次循环的时候：
		1、第一步，先执行变量初始化 var i = 1;	//注意：变量初始化只执行一次
		2、第二步，执行判断条件i<=100，如果条件满足就进入循环体里面，如果条件不满足就就不执行
		3、第三步，进入循环体，输出要执行的代码document.write('<h1>循环次数：'+i+'</h1>');
		4、第四步，执行变量更新
		
	第二次循环的时候：
		1、第一步，执行判断条件i<=100，如果条件满足就进入循环体里面，如果条件不满足就就不执行
		2、第二步，进入循环体，输出要执行的代码document.write('<h1>循环次数：'+i+'</h1>');
		3、第三步，执行变量更新
		
	······

do while循环结构

语法：

var i = 1;
do{
	要执行的代码;
	i++;
}while();
注意：被称之为直到型循环结构，无论条件成立与否都会执行一次

例题：

//计算1+2+3+……+100之和
var i = 1;
var sum = 0;
do{
	sum += i;
	i++;
}while(i<=100);
console.log(sum);

for循环结构

语法：

for(变量初始化; 判断条件; 变量更新){
	要执行的代码;
}


例题：

//输出1-100之间的数字，并求出偶数的和
var sum = 0;
for(var i=1; i<=100; i++){
	//判断，求出偶数
	if(i%2==0){
	sum += i;
	}
}
console.log(sum);


分析for循环结构执行顺序：

	第一次执行：
		1、先执行变量初始化，var i = 1;
		2、再执行判断条件，如果为真就进入循环体
		3、执行循环体里面的代码
		4、最后执行变量更新 i++
		
	第二次执行：
		1、先执行判断条件，如果为真就进入循环体
		2、再执行循环体里面的代码
		3、最后执行变量更新 i++
		
	······

循环对比

1、while循环和for循环执行顺序是一样的；do while循环是先执行代码，再进行条件判断，无论条件成立与否都会执行一次
2、while循环适用于循环次数不确定的情况下，这样结构会更加清晰
3、for循环适用于循环次数确定的情况下


例题：

//用户可以猜5次 ,若用户猜的数小于50，提示：猜小了，否则提示猜大了；若猜中了，则提示：中奖了(不能继续猜数)
for(var i=1;i<=5;i++){
    var num = prompt('请输入猜数');
    if(num<50){
        alert('猜小了!');
    }else if(num>50){
        alert('猜大了!');
    }else{
        alert('猜中了!');
        break;
    }
}

//不限定用户猜测次数，若用户猜的小于50，提示：猜小了，否则提示猜大了；若猜中了，则提示：中奖了(不能继续猜谜)
while(true){
    var num = prompt('请输入谜底');
    if(num<50){
        alert('猜小了!');
    }else if(num>50){
        alert('猜大了!');
    }else{
        alert('猜中了!');
        break;
}

循环执行顺序：

• 遇到双层循环结构的时候一定记住，外层循环执行一次，内层循环执行一轮
• 变量初始化，判断条件，变量更新，要执行的代码几个顺序根据循环结构体的不同要分清

终止循环执行:

• breack 直接终止循环执行，跳出整个循环，后面的代码不再执行了
• continue 终止本次循环，后面的代码还会执行

死循环：

• 当循环结构的条件一直为true就进入了死循环
• 当没有设置变量更新的时候也会陷入死循环
• 注意点：
  1、千万、千万、千万不要写死循环会出大问题
  2、会导致浏览器卡死，内存溢出，电脑系统会cpu占用过高，导致电脑直接不动

 while(true){
     document.write('一直执行下去');
 }

正所谓孰能生巧，比起看那么多概念，还不如动手做做实在，所以还是多做练习吧。