【前端系列教程之JavaScript】04_JavaScript流程控制语句

JavaScript从入门到精通视频直通车:

        【1-200】JavaScript视频教程,从入门到精通,超多案例实践,通俗易懂!

        【201-300】JavaScript视频教程,从入门到精通,超多案例实践,通俗易懂!

JavaScript流程控制语句

语句的定义

        在ECMAScript 中,所有的代码都是由语句来构成的。

        一行代码就是一条简单语句。形式上可以是单行语句,或者由一对大括号“{}”括起来的复合语句,复合语句包含若干条简单语句,它可以作为一个单行语句处理。复合语句也称为语句块。

        单行语句:一行代码简单语句

        复合语句:由一对大括号“{}”括起来的若干条简单语句,也叫语句块

流程控制语句分类

【前端系列教程之JavaScript】04_JavaScript流程控制语句

        任何复杂的程序逻辑都可以通过”顺序”、”条件(分支)”和”循环”三种基本的程序结构来实现。

        顺序程序结构就是从上往下顺序执行语句;程序默认就是由上到下顺序执行的

        条件(分支)程序结构就是根据不同的情况执行不同的语句;

        循环程序结构就是某些语句要循环执行多次。

条件语句(分支语句)

        if单分支语句

​         if-else双分支语句

        if - else if多分支语句

​         switch开关语句

循环语句

        for循环语句

        while循环语句

        do-while循环语句

        for/in循环语句 (增强for循环、foreach循环)

条件语句

        if语句即条件判断语句,一共有三种格式:

                单分支的条件语句;

                双分支的条件语句

                多分支的条件语句。

        条件语句用于基于不同的条件来执行不同的动作。

单分支的条件语句

【前端系列教程之JavaScript】04_JavaScript流程控制语句

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

if (/* 条件表达式 */) {
  // 执行语句
}

注意:

        (1) 放在if之后的括号里的返回值为boolean类型的表达式或boolean值,即这个表达式的返回值只能是true或false。

        (2) 如果表达式的值为true,则执行语句;如果表达式的值为false,则什么也不执行。

        (3) 花括号括起来的语句块可以只有一行语句,也可以由多行代码构成。一个语句块通常被当成一个整体来执行。 如果语句块只有一行语句时,则可以省略花括号,因为单行语句本身就是一个整体,无须花括号来把它们定义成一个整体。建议都加花括号;

双分支的条件语句

【前端系列教程之JavaScript】04_JavaScript流程控制语句

         if()...else 语句 - 当条件为 true 时执行语句1,当条件为 false 时执行语句2

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (条件表达式){
    语句1;
}else {
    语句2;
}

注意:

        (1)放在if之后的括号里的返回值为boolean类型的表达式或boolean值,即这个表达式的返回值只能是true或false。

        (2)如果if表达式的值为true,则执行语句1;如果表达式的值为false,则执行语句2。

多分支的if条件语句

【前端系列教程之JavaScript】04_JavaScript流程控制语句

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

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

语法:

if (条件表达式) {
    语句1;
} else if (条件表达式) {
   语句2;
} ...
else{
   语句n;
}

        注:if语句()中的表达式会自动转换成布尔值。

        满足条件即执行对应语句,然后语句就结束;如果都不满足,则执行else语句块;当然else语句块可以不存在。

switch多条件选择语句

【前端系列教程之JavaScript】04_JavaScript流程控制语句

         switch语句又称开关语句,它与多重if语句类似,前者用于等值判断,后者用于区间值和等值判断。switch语句的作用是根据表达式的值,跳转到不同的语句。switch 语句用于基于不同的条件来执行不同的动作。

语法:

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

switch多条件选择语句:

        首先设置表达式,随后表达式的值会与结构中的每个case 的常量表达式做比较。如果存在匹配,则与该 case 关联的代码块会被执行。

        使用 break 来阻止代码自动地向下一个 case 运行。default 关键词来规定匹配不存在时做的事情,也就是说,当没有匹配的值时,执行default下的语句。

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

工作原理:

        首先设置表达式 n(通常是一个变量)。

        随后表达式的值会与结构中的每个 case 的值做比较。

        如果存在匹配,则与该 case 关联的代码块会被执行。

        请使用 break 来阻止代码自动地向下一个 case 运行。

        default 关键词来规定匹配不存在时做的事情;相当于if里的else

注意: ​ 1、每个case语句下的break语句一般不可以省略,break语句表示退出switch语句,如果省略,则会继续执行下一个case语句中的代码,直到遇到break语句跳出switch语句。 ​ 2、default语句可以出现在switch语句中任何地方,如果放在最后,其中的break语句可省略。default语句也可省略。 ​ 3、每个case语句没有先后顺序之分,但建议按照常量表达式的值从小到大的顺序。 ​ 4、switch语句用于等值判断,也就是说表达式的结果是个具体的值;而多重if选择结果的表达式的值是个区间,比如大于100而小于200。

输入一个数字,打印对应的星期

var day = 10;
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:
        console.log('输入的值不在星期范围内');
        break;
}

条件语句练习

案例:

        求两个数的最大数

var num1 = 2;
var num2 = 5;

if (num1 > num2) {
    console.log('最大值是:' + num1);
} else {
    console.log('最大值是: ' + num2);
}

        判断一个数是偶数还是奇数

// 判断一个数是偶数还是奇数
var num = 5;
if (num % 2 === 0) {
    console.log('num是偶数');
} else {
    console.log('num是奇数');
}

        分数转换,把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A

// 分数转换,把百分制转换成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A
var score = 59;
if (score >= 90 && score <= 100) {
    console.log('A');
} else if (score >= 80 && score < 90) {
    console.log('B');
} else if (score >= 70 && score < 80) {
    console.log('C');
} else if (score >= 60 && score < 70) {
    console.log('D');
} else {
    console.log('E');
}

var score = 59;
if (score >= 90) {
    console.log('A');
} else if (score >= 80) {
    console.log('B');
} else if (score >= 70) {
    console.log('C');
} else if (score >= 60) {
    console.log('D');
} else {
    console.log('E');
}

var score = 6; 
score = parseInt(score / 10);
switch (score) {
    case 10:
    case 9:
        console.log('A');
        break;
    case 8:
        console.log('B');
        break;
    case 7:
        console.log('C');
        break;
    case 6:
        console.log('D');
        break;
    default: 
        console.log('E');
        break;
}

循环程序结构

        如果希望一遍又一遍地运行相同的代码,那么使用循环是很方便的。比如在页面上输出100遍“我爱HTML5编程”,如果不用循环,document.write("我爱HTML5编程<br/>");要写100遍。如果用循环则代码这样写即可:

for(var i=1;i<=100;i++){
	document.write("我爱HTML5编程<br/>");
}

        循环程序的结构有三要素:循环的初始值、循环条件(循环的结束值)和循环的迭代,所谓循环的迭代就是如何从初始值到结束值,比如是每次加1还是每次加2,诸如此类等。当然,一个循环程序还有包含一个循环体。

while 语句

【前端系列教程之JavaScript】04_JavaScript流程控制语句

         while循环会在指定条件为真时循环执行代码块,它是一种先判断,后运行的循环语句,也就是说,必须满足条件了之后,方可运行循环体。用于不太确定循环次数的场合。

语法:

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

代码示例:

// 打印1-100之间所有的数字
var i = 1;
while (i <= 100) {
    console.log(i);
    // i = i + 1;
    // i += 1;
    i++;
}

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

案例:

        打印100以内 7的倍数

// 打印100以内 7的倍数
var i = 1;
while (i <= 100) {
    // 判断当前的i是否是7的倍数
    if (i % 7 === 0) {
        console.log(i);
    }
    // i自身+1
    i++;
}

        打印100以内所有偶数

// 打印100以内所有偶数
var i = 1;
while (i <= 100) {
    // 判断当前的i是否是偶数
    if (i % 2 === 0) {
        console.log(i);
    }
    // i自身+1
    i++;
}

        打印100以内所有偶数的和

// 打印100以内所有偶数的和
var i = 1;
var sum = 0;
while (i <= 100) {
    // 判断当前的i是否是偶数,如果是偶数的话累加
    if (i % 2 === 0) {
        sum += i;
    }
    // i自身+1
    i++;
}
console.log(sum);

        案例1:循环输出从1开始的数值; 直到这个数值(n*2+8)/3 为20才结束循环

        案例2:从弹出框循环输入字符串,直到输入的值为end才结束循环

var inputStr = prompt("请输入一个字符串"); 

do...while循环

【前端系列教程之JavaScript】04_JavaScript流程控制语句

         do...while 循环是 while 循环的变体,在检查条件是否为真之前,该循环会至少执行一次do下的代码块(循环体),然后如果条件为真的话,就会重复这个循环,否则退出该循环体。常用于至少执行一次循环体,再判断要不要继续循环的场合。

语法:

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

代码示例:

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

案例:

// 求100以内所有3的倍数的和
var i = 1;
var sum = 0;
do {
    // 循环体
    // 判断是否是3的倍数,如果是3的倍数累加
    if (i % 3 === 0) {
        sum += i;
    }
    // i自身+1
    i++;
} while (i <= 100);
console.log(sum);

for语句

【前端系列教程之JavaScript】04_JavaScript流程控制语句

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

语法:

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

        语句1: 在循环体(代码块)开始前执行,也就是循环初始值。

        语句2: 定义运行循环(代码块)的条件,语句2返回true,则循环再次开始,如果返回 false,则循环将结束

        语句3: 在循环(代码块)已被执行之后执行,就是循环的迭代部分, 语句3有多种用法,增量可以是负数 (i--),或者更大 (i=i+15)

for循环执行机制:

【前端系列教程之JavaScript】04_JavaScript流程控制语句

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

  1. 初始化表达式

  2. 判断表达式

  3. 自增表达式

  4. 循环体

for...in语句

        for...in 语句用于遍历数组或者对象的属性(通常我们使用for/in 语句循环遍历对象的属性,在数组中可以遍历数组中的所有元素)。

        for...in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

for..in遍历数组

// 定义一个数组
var arr = [13,21,34,42,53,63];

// 普通for循环遍历
for(var i = 0;i < arr.length;i++){
    console.log(arr[i]);
}

// 使用for..in遍历数组
for(var i in arr){
    console.log(arr[i]);
}

for..in遍历对象

// 创建一个对象
var person = {
    name : "jack",
    age : 12,
    height: 178
}

//列举对象属性名及其值
for(var pro in person){
    console.log(pro+" "+person[pro])
}

        在JavaScript语言中,支持循环语句的相互嵌套,即在一个循环语句中嵌套另一个循环语句,也就是说,for循环语句可以嵌套for语句,也可以嵌套while循环语句,或者do..while循环语句,其他的循环语句也是一样的。

        需要注意的是,break和continue语句用在循环嵌套中,这两条语句只对离它最近的循环语句有效。比如如果break语句用在内层的循环语句中,则只退出内层的循环,对外层循环没有影响。

循环语句练习

打印1-100之间所有数
for (var i = 1; i <= 100; i++) {
    console.log(i);
}

var i = 1;
for (; i <= 100; ) {
	console.log(i);
	i++;
}

求1-100之间所有数的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    // sum = sum + i;
    sum += i;
}
console.log(sum);

求1-100之间所有数的平均值
var sum = 0;
var avg;
for (var i = 1; i <= 100; i++) {
    sum += i;
}
avg = sum / 100;
console.log(avg);

求1-100之间所有偶数的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    // 找到偶数
    if (i % 2 === 0) {
        sum += i;
    }
}
console.log(sum);

同时求1-100之间所有偶数和奇数的和
var oddSum = 0; // 奇数的和
var evenSum = 0; // 偶数的和
for (var i = 1; i <= 100; i++) {
    // 判断i是奇数还是偶数
    if (i % 2 === 0) {
        // 偶数
        evenSum += i;
    } else {
        //奇数
        oddSum += i;
    }
}
console.log('奇数的和:' + oddSum);
console.log('偶数的和:' + evenSum);

打印正方形
// 使用拼字符串的方法的原因
// console.log 输出重复内容的问题
// console.log 默认输出内容介绍后有换行
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = i; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

打印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
  for (var j = i; j <=9; j++) {
    str += i + ' * ' + j + ' = ' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

跳转语句

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

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

        continue 语句只能用在循环中;break能用在循环或 switch 中。

案例:

求整数1~100的累加值,但要求碰到个位为3的数则停止累加
求整数1~100的累加值,但要求跳过所有个位为3的数
var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 10 === 3) {
        // 如果找到个位为3的数字 ,继续执行下一次循环
        continue;
    }
    sum += i;
}
console.log(sum);

调试

  • 过去调试JavaScript的方式

    • alert()

    • console.log()

  • 断点调试

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

  • 调试步骤

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

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

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

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

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

代码规范

1.命名规范	
	变量、函数 的命名 必须要有意义
	变量 的名称一般用名词
	函数 的名称一般用动词
2.变量规范   
	操作符的前后要有空格
	var name = 'zhangsan';	  5 + 6
3.注释规范
	// 这里是注释
4.空格规范
	if (true) {
      
	}
	for (var i = 0; i <= 100; i++) {
      
	}
5.换行规范
	var arr = [1, 2, 3, 4];
	if (a > b) {
      
	}
	for (var i = 0; i < 10; i++) {
      
	}
	function fn() {
      
	}
上一篇:CSS盒子模型-04-内容width和height


下一篇:【Javase】04-面向对象与封装