JavaScript流程控制篇

JavaScript分支判断语句

if 条件语句

• 判断语句中的一种，最长使用的一种判断语句

// 1.语法 
if(条件){
   代码块1；
} 
// 2.语法 
if(条件){
   代码块1；
}else{
		 	  代码块2；
}

// 2.语法 
if(条件){
   代码块1；
}else if(条件){
		 	  代码块2；
}... else{
	   代码块3；
}

// 注释；... else 前面可以写多个 else if (),条件判断

/*
		   拓展知识
		   1.语法： prompt('提示内容');
	   2.功能： 弹出输入框
   3.点击确定，返回 输入内容
   4.点击取消，返回 null
   
   		1.语法： alert('弹出内容');
	   2.功能： 警告框
*/

1.案例

// 1.用户输入年龄
// 2.小于18岁--- 未成年
// 3.大于18岁--- 成年了 
var age = prompt('输入你的年龄！');
if( age < 18){
   	  alert('未成年');
}else{
     alert('成年了');
}
/*
	   1.程序根据条件去判断执行哪一个代码块的内容
	   2.条件判断则是 根据 布尔值去判断，true 满足条件/ false 不满足条件
*/

2.案例

/*
	1.打开浏览器时，弹出一个输入框，提示用户输入成绩 ---提示  prompt('提示内容');
2.当输入的成绩小于60时，弹出警告框，提示“不及格”
3.当输入的成绩大于80时，弹出警告框，提示“您的成绩为优”
4.当输入的成绩在60~80之间时，弹出警告框，提示“您的成绩刚及格”
*/
var age =  prompt('提示用户输入成绩');
if(age < 60){
   alert('不及格');
}else if(age >= 80){
   alert('您的成绩为优');     
}else{
   alert('您的成绩刚及格');     
}
// 用接收了数据的“变量”去跟“指定的值”去比较，如果成立则会执行当前代码块下的代码，否则会跳到👇下一个判断条件，检查条件是否成立，如果成立则会执行当前代码块下的代码，否则会跳到👇下一个判断条件。。。依此类推。

if条件嵌套

/*
		   综合案例分析流程结构：
                                密码
                       👇                  👇     
                  长度不等于6位           长度等于6位  
                     👇                 👇      👇    
               请输入6位数的数字密码      非数字      数字
                                        👇         👇 
                                  密码必须是6位数字  密码设置正确
                                  
  
  
  拓展知识：如何去判断密码 是不是 6位数？？？？ 
  👇 
  	语法：string.leng
  	功能：获取string变量字符串的长度
  	返回值： number
  
  语法：isNaN(password)
  功能：检测一个值 是不是 非数字
  返回值： 
  	       true  -----   证明是： 不是一个数字
  	       false -----   证明是： 数字
*/

// prompt 点击确定，返回 输入内容，点击取消，返回 null
var password = prompt('提示用户输入成绩');

// 判断 密码长度是 6位数
if (password.length == 6) {
    //  密码是6位！检测它是不是 是数字
    if ( isNaN(password)) {
        // 返回值是true  证明这个密码，不全是数字!
        alert('密码必须是6位数字！')

    } else {
        //  返回值是false 证明这个密码，6位全是数字!
        alert('密码正确！')
    }
} else {
    // 密码长度不是6位数
    alert('请输入6位数密码');
}

小结总结案例

var num = parseInt('adc123');
if (num == NaN){
    alert('NaN')
} else if ( num == 123){
    alert(123);
} else if ( typeof  num == 'number'){
    alert('number')
} else {
    alert('string');
}
/*
*  推理：
*       1.adc123 转换为 数字,返回值是 NaN，非数值转换都会返回 NaN
*       2.判断 NaN == NaN  ,条件不成立，NaN 不等于任何值，包括它本身
*       3.判断 NaN == 123  ,条件不成立，NaN 不等于任何值，包括 数字
*       4.判断 （检测NaN,返回值是 number） number  == 'number'  条件成立
* */

switch判断语句

/*
	拓展知识:
	var manme = new Date().getDay()
	功能：获取星期
	返回值：number(0-6) 返回值0代表星期日 
	
	语法： document.write('内容');
	功能：向浏览器输出内容
*/


// 👇案例实践，仔细看规律，多条件判断，比if判断语句，更适合这种多条件判断，有性能上的提升

// 返回值：number(0-6) 返回值0代表星期日 
        var dat = Date().getDay();
        // 接收 dat 的返回值，只写要判断的 值！！ 判断是通过case去判断俩个值是否相等。
        switch (dat) {
            // 如果返回值是 0 则执行，该代码块
            case "0": 
                document.write('今天是星期日');
                break; // 如果条件满足，则退出判断，后面的条件就没必要再做判断了。
            // 如果返回值是 1 则执行，该代码块
            case "1":
                document.write('今天是星期一');
                break;
            // 如果返回值是 2 则执行，该代码块
            case "2":
                document.write('今天是星期二');
                break;
            // 如果返回值是 3 则执行，该代码块
            case "3":
                document.write('今天是星期三');
                break;
            // 如果返回值是 4 则执行，该代码块
            case "4":
                document.write('今天是星期四');
                break;
            // 如果返回值是 5 则执行，该代码块
            case "5":
                document.write('今天是星期五');
                break;
            // 该位置可以继续写条件判断 .......

            // 如果返回值不满足上面所有的条件， 则执行，该代码块
            default:
                document.write('今天是星期六');
        }
// 判断条件：expression 
// 判断结果：vualue 
// 当代码执行之后，自动退出代码块：break
// 最后的条件：default，相当于else 
// ⭐⭐注意：，每个case后面没有break语句，所以它会向后面一直执行，输出每个case的执行代码；

// ⭐⭐⭐优化代码
        // 获取今天的是星期几
        var dat = Date().getDay();
        //  优化： 把判断后的值，存储在变量中。
        var weekstr = '';
        // 接收 dat 的返回值
        switch (dat) {
            // 如果返回值是 0 则执行，该代码块
            case "0":
                weekstr = '日';
                break; // 退出
            // 如果返回值是 1 则执行，该代码块
            case "1":
                weekstr = '一';
                break;
            // 如果返回值是 2 则执行，该代码块
            case "2":
                weekstr = '二';
                break;
            // 如果返回值是 3 则执行，该代码块
            case "3":
                weekstr = '三';
                break;
            // 如果返回值是 4 则执行，该代码块
            case "4":
                weekstr = '四';
                break;
            // 如果返回值是 5 则执行，该代码块
            case "5":
                weekstr = '五';
                break;
            // 该位置可以继续写条件判断 .......

            // 如果返回值不满足上面所有的条件， 则执行，该代码块
            default:
                weekstr = '六';
        };
        //  调用一次"今天是星期"即可， 几，是通过判断后，返回的值，存在变量中，直接拼接上 ，再输出页面。 
        document.write('今天是星期' + weekstr);

JavaScript循环语句

for 循环

/*
语法：
for(语句1;语句2;语句3){
	被执行的代码块;
}	
解析：
	语句1:在循环（代码块）开始前执行
	语句2:定义运行代码（代码块）的条件
	语句3: 在循环（代码块）已经被执行之后执行
*/

// ⭐简单的案例： 从页面输出 1 ~ 100 
for(var i = 0; i <= 100; i++){
    docment.write(i + '<br/>');
}
/*
    var i = 1 ;  是循环的初始值
    i < 100  ;   循环的条件
    i++ 		 变量的变量
    
模拟代码执行过程：
第1轮:
    第一步：i 等于 0 ，
    第二步：0 < 100 条件成立,
    第三步：docment.write 会执行一下，输出到页面 当前 i （ 当前 i 是 0 ）
    第四步：0 自增 1 变成 1
第50轮:
    第一步：i 等于 50 ，
    第二步：50 < 100 条件成立,
    第三步：docment.write 会执行一下，输出到页面 当前 i （ 当前 i 是 50 ）
    第四步：50 自增 1 变成 51
第100轮:
    第一步：i 等于 100 ，
    第二步：100 < 100 条件不成立, 
    第三步：当前代码不会执行了
    第四步：当前代码不会执行了
              
*/ 
// ⭐⭐简单的案例： 从页面输出 100 98 96 94 ... 1 (输出倒序,并且是偶数)
// 初始值应该是 100， 条件是不小于 1 ，就给我执行， 变量的变化 每次减 2
for(var i = 100; i >= 1; i-=2 ){
    console.log(i + '<br/>');
}
alert(i)

for循环 嵌套

循环与循环嵌套时，先执行外层，再执行内层

如果外层为假，内层则不执行，如果为真，则执行内层

// 外层输出 123
for (var i = 0; i < 10; i++) {
    document.write('--' + i + '<br/>');
 // 内层输出 i 如果是1 ：则内层会输出 2345，如果 i = 2； 则内层会输出 345;以此类推
    for (var j = i + 1; j <= 10; j++) {
         document.write("----" + j + '<br/>');
    }
}

/*
  ⭐⭐⭐循环嵌套规则
  1.外层为假时，内层则不会执行；
  2.先执行外层，再执行内层，直到内层的条件为假时，再返回外层去执行。
*/

综合案例99乘法表

for (var i = 1; i < 10; i++){
      for (var j = 1; j <= i; j++){
           document.write( j + '*' + i +'=' + (i *j ) + "&nbsp&nbsp")
      }
	document.write('<br/>')
}
/*
⭐⭐⭐⭐⭐推理找规律：
第1轮：
	 外层循环: i = 1; 1 < 10，条件满足
	 内层循环: j = 1; 1 <= 1, 条件满足
	 	页面输出: j *  i = 1;  内层代码执行完毕
	 外层代码: 这里是增加了一个换行符，会添加一个换行 
	 i++, 变成 2
	 👇
第2轮：
	 外层循环: i = 2; 2 < 10，条件满足
         内层循环: j = 1; 1 <= 2, 条件满足，  
	 		页面输出: 
	 			1 *  1 = 1;
	 			1 *  2 = 2; 
            
      	 j++ j  变成了2👇
         内层循环: j = 1; 1 <= 2, 条件满足，j++ 2
      	 	页面输出: 
	 			1 *  1 = 1;
	 			1 *  2 = 2;  2 * 2 = 4; 
	 👇	 此时内层条件判断不满足则跳出内层循，继续执行下面的代码
	 外层代码: document.write('<br/>')
	 i++, 变成 3
第3轮：
	 外层循环: i = 3; 3 < 10，条件满足
         内层循环: j = 1; 3 <= 3, 条件满足，  
	 		页面输出: 
	 			1 *  1 = 1;
	 			1 *  2 = 2; 
	 			1 *  3 = 3; 
      	 j++ j  变成了2👇
         内层循环: j = 2; 2 <= 2, 条件满足，
      	 	页面输出: 
	 			1 *  1 = 1;
	 			1 *  2 = 2;  2 * 2 = 4; 
	 			1 *  3 = 3;  2 * 3 = 3; 
	 			
	 	 j++ j  变成了3👇
         内层循环: j = 3; 3 <= 3, 条件满足，
      	 	页面输出: 
	 			1 *  1 = 1;
	 			1 *  2 = 2;  2 * 2 = 4; 
	 			1 *  3 = 3;  2 * 3 = 3; 3 * 3 = 6; 	
	 👇	 此时内层条件判断不满足则跳出内层循环，
	 	 继续执行下面的换行代码
	 	 然后回到外层自增，再进入内层，内层再自增...
	 	 当内层 j 值等于 外层 i ,则内层循环就会停止,跳出到外层换行代码
	 	 回到i++ 自增
	 	 
	 
	 
	.....
	
	以此类推！！

		
	
*/

综合案例游戏计数

var yxd = '游戏第';
var ldf = '轮，得分';
var i;
for ( i = 1; i <= 5; i++) {
    // 循环开始 就输出游戏是第几轮，以及得分数
     document.write(yxd + i + ldf + '<br/>');
     for (var j = 10; j <= 100; j+= 10) {
                document.write(j + '分' + '&nbsp' )
     }
     // 当内层循环结束后，换行换行
     document.write( '<br/>' + '<br/>');
}

while

语法：
while ( 条件 ){
需要执行的代码；
}

⚠️注意⚠️：while 循环会一直循环代码块，只要指定的条件为 true。

// 输出1～100 之间的所有数。
var i = 1;
while( i <= 100){
	   document.write();
    i++; // 自增条件
	}
							

// 案例， 1+2+3+4+5...+100 = ?
		var sum = 0; // sum 就是存储和的值
		var n = 1;   // 变量条件
		while( n <= 100){ // 判断条件
   sum += n; // sum = sum + n;  sum = 0 + 1; 1 = 1+ 2; 3 = 3 + 3;  6 = 6 + 4.....
   n++ // 变量变化语句，一定要写，不然会造成死循环，页面奔溃。
		}
		console.log(sum); // 控制台输出

// 猜数字案例

while ('5'){
        var input = prompt('猜数字游戏 = "？" ');

        if (input > '8'){
            alert('数字猜大了！')
        } else if (input < '8') {
            alert('数字猜小了！')
        }else {
            alert('恭喜，数字：' + input + '答对了！' );
            break;
        }

    }

do…while

语法：

do{

需要执行的代码；

}while(条件)

说明：⭐这种语法的循环至少要被执行一次。

var j = 0;
do{
	if (j % 2 == 0 ) {
		console.log(j);
	}	

}while(j <= 10);

for-in

循环总结

• for 循环，循环次数少固定的
• while 循环，循环次数不是固定的**
• do…while 循环 不管条件符合不符合，先运行一次代码

综合案例

// ⭐⭐⭐任务提示
// 用两个while循环实现，第一个判断是否是默认密码，第二个判断两次输入的是否一致。



    // 默认密码
    var mima = 123456;
    // 提示用户输入密码
    var mm = prompt('输入密码！');
    // 第一次判断，如果不等于默认密码则无限循环，如果正确，进入下面都第二次循环并判断...
    while ( mm != mima){
        mm = prompt('输入正确密码!');
    };

    // 第二次输入密码，检测俩个输入都密码是否相等。

    // 检测上一个值，必须等于 默认密码才能进入此循环。
    while ( mm == 123456 ) {
        // 第二次输入密码/
        mmm = prompt('请再次输入密码!');
        // 判断第二次，跟 第一次是否 一致，如果一致，弹出提示，退出循环，否则无限循环。
        if (mmm == mima){
            alert('密码一致!')
            break;
        }
    }

// 打印所有0-100（包含100）之间除了22，44，66以及88之外的'偶数'，并求他们的和。

    // 接收和变量值
    var sum = 0;
    // 循环，100以内的偶数
    for (var i = 0; i <= 100; i += 2) {
        // 判断如果是 22，44，66，88， 则跳过这一次循环
        if (i == 22 || i == 44 || i == 66 || i == 88) {
            continue;
        }
        // sum 赋值的情况，如下：👇
        // 2 = 2 +  4  6  8......100;
        // 6 = 6 +  6  8......100;
   	     // 12 = 12 +  8......100;
        // 20 = 20 + 10 ......1000
        sum += i;
        console.log(i);
    }
    document.write(sum + '<br/>');