重学前端之（2）流程控制

流程控制

程序的三种基本结构

顺序结构

• 从上到下执行的代码就是顺序结构

• 程序默认就是从上到下,一行一行的顺序执行的

• console.log("哈哈1");
  console.log("哈哈2");
  console.log("哈哈3");
  复制代码

分支结构

• 分支结构, 也叫选择结构 , 根据不一样的状况,,执行对应的代码

循环结构

• 循环结构：重复作一件事情

分支语句 (3个)

分支语句目的 : 解决不一样条件不一样效果的问题

第1个分支语句 : if语句

• 单独的if语句 ==> 可能性只有一种

  // 语法
  if (条件) {
      // 只有当条件为 true 时,执行代码
  }
  
  var age = 10;
  if (age >= 18) {
      console.log('能够访问该网站')
  }
  复制代码

  ​

• if..else 语句 ==> 可能性有2种

  // 语法
  if (条件) {
      // 当条件为 true 时执行的代码
  }else {
      // 当条件不为 true 时执行的代码
  }
  
  var age = 10;
  if (age >= 18) {
      console.log('能够访问该网站')
  }else {
      console.log('不能够玩王者荣耀')
  }
  复制代码

  ​

• if..else if ..else 语句 ==> 可能性有2种以上

  if (条件1) {
      // 当条件1为 true 时执行的代码
  }else if (条件2){
      // 当条件2 为true 时执行的代码
  }else {
      // 当条件1和 条件2 都不为true 时执行的代码
  }
  
    var age = 10;
  
    if(age >= 18) {
  
      console.log("准玩王者荣耀");
  
    }else if(age > 12){
  
      console.log("能够玩王者荣耀2个小时");
  
    }else {
  
      console.log("不能够玩王者荣耀");
  
    }
  
  复制代码

---

第2个分支语句 : 三元运算符

条件 ? 值1 : 值2    /*或者*/   条件 ? 表达式1 : 表达式2  
1. 三元运算符会获得一个结果，结果根据`条件`来肯定。
2. 若是`条件`的值为true，会返回表达式1的值/值1
3. 若是`条件`的值为false，会返回表达式2的值/值2
复制代码

案例 :

//求两个数的最大值
var max = n1 > n2 ? n1 : n2;

//思考1：求两个数的最小值
//思考2：判断成年仍是未成年, 并返回字符串
//思考3：求三个数的最小值
复制代码

第3个分支语句 :switch语句

if..else适用于范围的判断，switch..case适用于具体的值的判断

语法格式 :

switch case break default

switch (变量) {
  case 值1:
    语句1;
    break;
  case 值2:
    语句2;
    break;
  case 值3:
    语句3;
    break;
  …
  default:
    默认语句;
    break;
}
复制代码

注意 :

break能够省略，若是省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操做符, 所以不会发生类型转换（例如，字符串'10' 不等于数值 10）
复制代码

案例 :

输入一个数字，显示星期几
复制代码

//思考题：
var num = "10"; // 10
switch (num) {
    case 10:
        console.log("10");
    case 20:
        console.log("20");
    case 30:
        console.log("30");
    default:
        console.log("lalala");
}
复制代码

使用场景

1. 若是是范围性的判断，使用if..else会更加方便
2. 若是是对具体值的判断，使用switch..case语句会更加方便，固然用if..else也是能够的。
3. 若是if..else比较简单，可使用三元运算符进行替代。

//练习1：土豪的儿子, 输入ABCDE 
	//若是考了A： 买法拉利
	//若是考了B： 买宝马
	//若是考了C： 买三轮
	//若是考了D： 买摩拜自行车
	//若是考了E： 断绝父子关系
	//若是是其余值，提示代码有bug

//练习2： 买手机，输入本身的工资
   //若是超过30000: 买苹果手机
   //若是10000-30000： 买vivo手机
   //若是5000-10000 ： 买魅族手机
   //若是低于5000 ： 还买个锤子

//练习3： 输入本身的每个月薪资
	//若是超过15000 : 高富帅
    //若是不超过 ：穷矮丑
复制代码

循环语句 (3个)

在javascript中，循环语句有三种，while、do..while、for循环。

循环语句的目的 : 解决须要重复执行某些语句的代码

第1个循环语句 : while循环

基本语法 :

//当循环条件为true时，执行循环体，
//当循环条件为false时，结束循环。
while(循环条件){
  //循环体：须要循环执行的语句
}
复制代码

代码示例:

//1. 打印1-100之间全部的数
//2. 计算1-100之间全部数的和
// 初始化变量
var i = 1;
var sum = 0;
while(i <= 100){//判断条件
  sum += i;//循环体
  i++;//自增，修改循环条件（不能省略）
}
console.log(sum);
复制代码

第2个循环语句 : do..while循环

do..while循环和while循环很是像，两者常常能够相互替代，可是do..while的特色是无论条件成不成立，都会执行一次。

基础语法 :

do {
   //循环体;
}while(条件)
复制代码

代码示例 :

//初始化变量
var i = 1;
var sum = 0;
do{
  sum += i;//循环体
  i++;//自增
}while(i <= 100);//循环条件
复制代码

第3个循环语句 : for循环

写while循环的常常会忘记自增，for循环实际上是while循环演化过来的，语法更加的简洁明了，使用很是的普遍。

for循环语法：

//1. for循环使用分号分隔
//2. for循环有2个分号，两个分号不能少
for(初始化语句;判断语句;自增语句){
  //循环体
}
复制代码

执行顺序：1243 ---- 243 -----243(直到循环条件变成false)

1. 初始化语句
2. 判断语句
3. 自增或者自减
4. 循环体

for循环代码示例：

//1. 打印1-5之间全部数
for ( var i = 1;i<=5;i++ ) {
    console.log(i);
}

复制代码

break和continue

break: 结束/停止for循环

​ 当即跳出当前整个循环，即循环结束，开始执行循环后面的内容（直接跳传出大括号）

​ 通常写在打印以后

continue: 结束本次循环,进行下一个循环

​ 当即跳出当前循环，继续下一次循环（跳到i++的地方） (放打印代码前面)

​ 通常写在打印以前

代码示例：

//输出结果是什么？
for(var i = 1; i <=10; i++) {
  if(i == 5){
    continue;
  }
  if(i == 7){
    break;
  }
  console.log(i);
}
复制代码

总结 :

1. 循环有不少种，可是之后用得最多的是for循环
2. 当不明确循环次数的时候，可使用while循环
3. 当不管如何都要执行一次代码的时候，可使用do..while循环。
4. 循环能够相互替代。