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

我是波哩个波

已于 2022-03-10 15:59:56 修改

阅读量930

点赞数

分类专栏： # JavaScript从入门到精通文章标签： javascript 前端开发语言 JS ecmascript

于 2021-12-13 13:48:54 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/121903456

版权

JavaScript从入门到精通专栏收录该内容

16 篇文章 2 订阅

订阅专栏

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)

初始化表达式
判断表达式
自增表达式
循环体

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: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。

代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。

代码规范

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() {
      
	}

我是波哩个波

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
【前端系列教程之JavaScript】04_JavaScript流程控制语句

JavaScript流程控制语句语句的定义在ECMAScript 中，所有的代码都是由语句来构成的。一行代码就是一条简单语句。形式上可以是单行语句，或者由一对大括号“｛｝”括起来的复合语句，复合语句包含若干条简单...
复制链接

扫一扫