JS——流程控制

《一》代码块：

我们的程序是由一条一条的语句构成；语句是按照自上向下的顺序一条一条执行的；

{ var str = '撩课学院'; console.log("itlike.com"); document.write("喜欢IT，就上撩课"); } console.log("str=" + str);

在JS中可以使用 {} 来为语句进行分组；同一个 {} 中的语句我们称是一组语句；它们要么都执行，要么都不执行；一个 {} 中的语句我们也称为叫一个代码块；在代码块的后边就不用再编写；了。

JS中的代码块，只具有分组的作用，没有其他用途。

《二》流程控制语句：

1  三种流程结构：1顺序结构、2选择结构、3循环结构

2  if：

<1>if的基本格式：if（条件表达式）{

    语句1

} 后续语句

<2>如果条件表达式为真，执行语句块1，否则不执行

var age=20; if(age> 18){ console.log("可以上网") } console.log("哈哈哈");

<2>如果条件表达式为真，则执行语句块1，否则执行语句块2

var age=2; if(age > 18) { console.log('可以上网哈'); } else { console.log('不可以上网'); }

<3>如果条件表达式为真，则执行语句块1，否则执行语句块2；如果条件表达式为真，则执行语句块2，否则再判断条件表达式3；如果条件表达式为真， 则执行语句块3，当表达式1、2、3都不满足，会执行最后一个else语句。

var age=20; if(age > 40){ console.log('老年人'); }else if(age >20 ){ console.log('中年人'); } else if (age > 12){ console.log('成年人'); }else { console.log('未成年'); }

 

<4>注意点：

1 如果只有一条语句时if后面的大括号可以省略 （建议不要省略大括号）

var age=10; if (age>18) console.log("成年人"); console.log("你控制不了我！")

2 分号”；“也是一条语句，空语句

if(4>6); { console.log('4>6'); }

3  if else是一个整体，else匹配的时候匹配离它最近的一个if

if (0) if (1) console.log("A"); else console.log("B"); else if (1) console.log("c");// c else console.log("D");

所以这个匹配输出的就是 C。

4  对非Boolean类型的值，会先转换为Boolean类型后再判断

if (1){ console.log("itlike") }

5 判断变量与字面量的问题

if (0==a){ console.log("a的值是0\n"); }else { console.log("a的值不是0\n"); }

6  if语句可以嵌套使用

var num=20; if (num>=10){ if (num<=30){ console.log("满足条件!"); } } var num=20; if (num>=10 && num<=30){ console.log("满足条件！"); }

5 课堂练习：石头剪刀布的实现

       0——剪刀，1——石头，2——布 

//1 定义变量 var player,computer; //2 电脑出拳 computer=parseInt(Math.random()*3) console.log( parseInt(computer)); //3 玩家出拳 player=parseInt(+(window.prompt('请出拳：0—>剪刀，1->石头，2->布'))); // console.log(player); //4判断用户输入内容 if (player<0||player>2){// 不满足条 player=parseInt(+(window.prompt('请出拳：0—>剪刀，1->石头，2->布'))); console.log(player); }else {// 满足条件 if ( (player===0 && computer===2) || (player===0 && computer===2) || (player===0 && computer===2) ){ alert('恭喜你，赢了'); }else if ( (player===0 && computer===1) || (player===1 && computer===2) || (player===2 && computer===0) ){ alert('很遗憾，输了'); }else { alert('平局'); } }

 

3 Switch:

<1>switch示例：

var num=3; switch (num) { case 1: console.log('壹'); break; case 2: console.log('贰'); break; case 3: console.log('叁'); break; default: console.log('其他数字'); }

<2>注意事项：

1 case全等问题

var str="123"; switch (str) { case 123: console.log("123数字"); break; case "123": console.log("123"); break; default: console.log("default"); } var num=120; switch (120) { case num: console.log("120"); break; case 110: console.log("110"); break; default: console.log("default"); break; }

2  表达式判断问题

switch (110+1) { case 110: console.log("110"); break; case 1: console.log("1"); break; console.log("1+110"); break; default: console.log("default"); break; }

3  case的穿透问题

var num=1; switch (num) { case 1: console.log("壹"); break; case 2: console.log("贰"); case 3: console.log("叁"); default: console.log("非法数字") }

4 循环：重要的结构，其他特点在给定条件成立时，反复执行某程序段，直到条件不成立为止。

<1给定的条件称为循环条件，反复执行的程序称为循环体。

循环结构简单来说就是：一次又一次的执行相同的代码块。

<2while循环特点:如果while中的条件一开始就不成立，那么循环体中的语句永远不会被执行。

<3 while

示例：

爱你3000遍 var num=0; while (num<3000){ num++; console.log('爱你' +num+'遍！\n'); } var num=10; while (num<10){ alert(num); num++; }

1 提示用户输入一个正整数n，计算1+2+3+...+n的和

var sum=0; var num=1; while (num<10){ sum+=num; num++; } console.log(sum);

2 获取1~100之间7的倍数的个数并打印，并统计个数

var count=1; var num=0; while (count<=100){ if (count % 7===0){ console.log(count); num++; } count++; } console.log(num);

 

4 for循环

// 爱你3000遍 for (var i=0;i<=3000;i++){ console.log('爱你'+i+'遍\n' ); } // 好友列表1 // 好友1 // 好友2 // 好友3 // 好友列表2 // 好友1 // 好友2 // 好友3 for (var i=1; i<=2; i++){ console.log('好友列表'+i); for (var j=1;j<=3;j++){ console.log('好友'+j); } }

 

2 for循环嵌套实现：打印99乘法表 for (var i=1; i<=9;i++){ for(var j=1;j<=i;j++){ document.write('<span>'+j+'*'+i+'='+i*j+'</span>') } document.write('<br/>') }

想做出乘法表还需要一些样式，才能有乘法表的感觉。