JS流程控制

1.流程控制介绍

程序的三种基本结构

顺序结构:从上到下执行的代码就是顺序结构(程序默认就是由上到下顺序执行的)

分支结构:根据不同的情况,执行对应代码

循环结构:重复做一件事情

2.分支结构

  1. 、if语句

if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码

if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码

if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

语法格式:

第一种

if (/* 条件表达式 */) {
 // 执行语句
}
第二种
if (/* 条件表达式 */){
 // 成立执行语句
} else {
 // 否则执行语句
}
第三种
if (/* 条件1 */){
 // 成立执行语句
} else if (/* 条件2 */){
 // 成立执行语句
} else if (/* 条件3 */){
 // 成立执行语句
} else {
 // 最后默认执行语句
}

演示示例:if案例判断一个人的年龄是否满18岁(是否成年)

var age = prompt("请输入年龄:");

  console.log(age);

  console.log( typeof age);//string */

  // NaN与任何值都不相等,包括它本身

  // console.log("NaN:"+NaN == NaN);

  // var age = 18;

  age = Number (age);

  if (isNaN(age) == true){

    console.log("请重新输入")

  } else if (age >= 18){

    console.log("成年人");

  } else  {

    console.log("未成年人");

  } 

演示示例:if案例百分制转换成等级制

百分制转换成等级制

  var score = "鸡蛋";

  if(score < 60) {

    console.log("不及格");

  } else if (score >= 60&&score < 70){

    console.log("一般");

  } else if (score >=70 && score <80){

    console.log("良好");

  } else if (score >= 80 && score < 90){

    console.log("优秀")

  } else if (score >= 90 && score < 100){

    console.log("厉害");

  } else if (score == 100){

    console.log("牛逼");

  } else {

    console.log("卧槽无情!")

  }

(2)、三元运算符

表达式1 ? 表达式2 : 表达式3

是对if……else语句的一种简化写法

(3)、switch语句

switch 语句 - 使用该语句来选择多个代码块之一来执行

语法格式:

switch (expression) {
 case 常量1:
   语句;
   break;
 case 常量2:
   语句;
   break;
 case 常量3:
   语句;
   break;
 
 case 常量n:
   语句;
   break;
 default:
   语句;
   break;
}

break可以省略,如果省略,代码会继续执行下一个case。

default 关键词来规定匹配不存在时做的事情

switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)

演示示例:switch案例显示星期几

 var day = Number(prompt("请输入周几"));

switch (day) {

    case 1:

      console.log("周一");

      break;//必须加上,表示终止

    case 2:

      console.log("周二");

      break;

    case 3:

      console.log("周三");

      break;

    case 4:

      console.log("周四");

      break;

    case 5:

      console.log("周五");

      break;

    case 6:

      console.log("周六");

      break;

    case 7:

      console.log("周日");

      break;

    default:// else

      console.log("重新输入");

      break;

  }

(4)、分支结构总结

if语句和switch语句的区别:

if语句:

表达式的结果为boolean类型。常用于区间判断

switch语句:

switch case 使用严格比较(===),值必须与要匹配的类型相同,只有操作数属于同一类型时,严格比较才能为 true。在以下这个例子中,x 将不匹配。

var x = "0";

switch (x) {

 case 0:

  text = "Off";

  break;

 case 1:

  text = "On";

  break;

 default:

  text = "No value found";

}

能用switch语句实现的就一定可以使用if实现,但是反之不一定,如果是区间范围就采用if,如果是等值判断使用switch

布尔类型的隐式转换

If语句会把后面的值隐式转换成布尔类型

转换为true   非空字符串  非0数字  true  任何对象

转换成false  空字符串  0  false  null  undefined

3.循环结构

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

(1)、while语句

while 循环会在指定条件为真时循环执行代码块。

基本语法:

// 当循环条件为true时,执行循环体,
// 当循环条件为false时,结束循环。
while (循环条件) {
 //循环体
}

演示示例:while案例打印1-100之间所有数的和

// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
 // 循环体
 sum += i;
 // 自增
 i++;
}
console.log(sum);

演示示例:while案例打印100以内 7的倍数

打印100以内 7的倍数

  var j = 0;

  while (j <= 100) {

    // console.log(j);

    if (j % 7 == 0) {

      console.log(j);

    }

    j++;

  }

打印100以内所有偶数、奇数、偶数和、奇数和

  var x = 0,sumO = 0,sumJ = 0;

  var sumj;

  while (x <= 100) {

    if(x % 2 == 0){

      console.log(x + "是偶数");

      sumO += x;

    } else {

      console.log(x + "是奇数");

      sumJ += x;

    }

    x++;

  }

  console.log("偶数和:" + sumO);

  console.log("奇数和:" + sumJ);

  // a not is defined :a没有通过var定义声明,程序是报错

  // undefined :表示一个变量通过var定义声明了,数据类型是undefined ,程序无错

(2)、do...while语句

do..while循环和while循环非常像,二者经常可以相互替代,但是do..while的特点是不管条件成不成立,都会执行一次。

基础语法:

do {
 // 循环体;
} while (循环条件);

演示示例:do...while案例打印1-100之间所有数的和

求1-100之间的所有数的和 

  var i = 0,sum = 0;

  do {

    sum += i;

    i++;

  }while (i <= 100)

  console.log(sum);

(3)、for语句

while和do...while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

for循环语法:

// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
 // 循环体4
}

打印100以内所有偶数、奇数、偶数和、奇数和

  var sumO = 0;

  var sumJ = 0;

  for (var i = 0; i <= 100; i++) {

    // console.log(i);

    if (i % 2 == 0) {

      console.log(i + "是偶数");

      sumO += i;

    } else {

      console.log(i + "是奇数");

      sumJ += i;

    }

  }

(4)、for循环多个变量的判断原理

 看完下面两个例子的比较就明白了,其实就是逗号表达式,总是依据最后一个表达式的值。

for(i=0, j=0; i<10, j<6; i++, j++){

k = i + j;

console.log(i+"+"+j+"="+k);

}

for(i=0, j=0; i<6, j<10; i++, j++){

k = i + j;

console.log(i+"+"+j+"="+k);

}

课堂练习:for循环案例打印直角三角形(嵌套循环)

for (var i = 0; i <= 4; i++) {

    for (var j = 0; j <= i; j++) {

      document.write("♠");

    }

    document.write("<br>");

  }

(5)、continue和break

break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)

continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)

演示示例:求整数1~100的累加值,但要求碰到个位为3的数则停止累加(break)
演示示例:求整数1~100的累加值,但要求跳过所有个位为3的数(continue)

for (var i = 0;i <= 100; i++){

      if (i % 7 == 0 ){

        if (i == 21){

          continue;//跳出当前循环,继续执行下一次循环

        }

        if (i == 49){

          continue

        }

        if (i == 77){

          break; //跳出整个大循环,不往下执行了

        }

        console.log(i);

      }

    }

(6)、循环语句区别

1、循环结构的表达式不同

do-while循环结构表达式为:do{循环体;}。

for循环的结构表达式为:for(单次表达式;条件表达式;末尾循环体){中间循环体;}。

while循环的结构表达式为:while(表达式){循环体}

2、执行时判断方式不同

do-while循环将先运行一次,因为经过第一次do循环后,当检查条件表达式的值时,其值为 不成立时而会退出循环。保证了至少执行do{ }内的语句一次。

for循环执行的中间循环体可以为一个语句,也可以为多个语句,当中间循环体只有一个语句时,其大括号{}可以省略,执行完中间循环体后接着执行末尾循环体。

while循环执行时当满足条件时进入循环,进入循环后,当条件不满足时,执行完循环体内全部语句后再跳出(而不是立即跳出循环)。

3、执行次数不同

do-while循环是先执行后判断,执行次数至少为一次。

for循环是先判断后执行,可以不执行中间循环体。

while循环先判断后执行,可以不执行中间循环体。

4、执行末尾循环体的顺序不同

do-while循环是在中间循环体中加入末尾循环体,并在执行中间循环体时执行末尾循环体。

for循环的中间循环体在条件判断语句里,执行末尾循环体后自动执行中间循环体。

while循环的末尾循环体也是在中间循环体里,并在中间循环体中执行。

  1. 调试

(1)、alert()

(2)、console.log()

(3)、debugger 关键字

debugger 关键字用于停止执行 JavaScript,并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。如果没有调试可用,debugger 语句将无法工作。开启 debugger ,代码在第三行前停止执行。

var x = 15 * 5;

debugger;

document.getElementById("demo").innerHTML = x;

//开启调试工具,在代码执行到第三行前会停止执行。

(4)、断点调试

断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

调试步骤:

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点

调试中的相关操作:

Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
F10: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
F8:跳到下一个断点处,如果后面没有断点了,则程序执行结束。

注意: 监视变量,不要监视表达式,因为监视了表达式,那么这个表达式也会执行。

代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。

今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值