本文主要是介绍【前端系列教程之JavaScript】04_JavaScript流程控制语句，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

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

JavaScript流程控制语句

语句的定义

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

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

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

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

流程控制语句分类

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

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

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

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

条件语句(分支语句)

        if单分支语句

​         if-else双分支语句

        if - else if多分支语句

​         switch开关语句

循环语句

        for循环语句

        while循环语句

        do-while循环语句

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

条件语句

        if语句即条件判断语句，一共有三种格式：

                单分支的条件语句；

                双分支的条件语句

                多分支的条件语句。

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

单分支的条件语句

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

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

注意： ​

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

        （2） 如果表达式的值为true，则执行语句；如果表达式的值为false，则什么也不执行。

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

双分支的条件语句

         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条件语句

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

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

语法：

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

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

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

switch多条件选择语句

         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 语句

         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循环

         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语句

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

语法：

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

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

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

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

for循环执行机制:

执行顺序：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() {
      
	}

这篇关于【前端系列教程之JavaScript】04_JavaScript流程控制语句的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！