【你也能从零基础学会网站开发】Web建站之javascript入门篇 JavaScript中的流程控制语句(if、if-else、for、while、do-while、switch)

极客小俊

已于 2024-03-12 09:51:11 修改

阅读量1k

点赞数 20

CC 4.0 BY-SA版权

分类专栏：编程开发免费教程文章标签： JavaScript for循环 while循环流程结构控制 for循环九九乘法表免费教程前端开发

于 2024-03-10 15:02:56 首次发布

本文链接：https://blog.youkuaiyun.com/windowsxp2018/article/details/136599010

编程开发免费教程专栏收录该内容

82 篇文章

订阅专栏

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

JavaScript流程控制概述

流程控制选择语句是指根JavaScript中提供了多种用于程序流程控制的语句，这些语句分为选择和循环两大类据条件来选择一个任务分支的语句统称，实现分支程序设计

流程控制选择语句实现多路选择功能，在给定的多个选择中选择一个符合条件的分支来执行 !

我们在编程中有些指令需要重复执行很多遍，这就要编写大量的代码。

而计算机则是专门用来快速完成重复和繁琐的工作，因此编程语言也就提供循环语句来减少重复指令的编写。

JavaScript 流程控制语句的分类

按照我们JavaScript开发语言来进行分类的话，大致有如下几种:

选择语句
if语句、if-else语句、if-elseif-else语句、switch语句
循环语句
for语句、while语句、do-while语句、for-in语句、break和continue语句
异常处理语句
try-catch语句、try-catch-finally语句、throw语句

if语句

举个栗子
生活中一个形象的例子，某人在看钟表上的时间，如果小于凌晨6点就决定继续睡，如果大于6点，就起床去上班。

那么编程中也有类似的问题，此时可用if语句来描述之，其测试一个Boolean表达式，结果为真则执行某段程序。

如图

if-else语句

if语句仅根据表达式的值决定是否执行某个任务，没有其它更多的选择，

而if-else语句则提供双路选择功能。

如图

或者

注意: 我们可以用三目运算符替代这种if语句:

例如

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

举个栗子

var x= (new Date()).getDay();
//获取今天的星期值，0为星期天
var result;

if  ( (x==6)  ||  (x==0) ) {
    result="周末";
}else{
    result="工作日";
}
//输出结果
document.write(result);

注意: if 语句允许不使用else子句

也就是说等价于:

result="工作日";
if  ( (x==6)  ||  (x==0) ) {
	result="周末";
}

if-else-if语句

当有多个可供判断选择的条件时，单个if-else语句显然不能表达，于是有了if-else-if语句。

严格的说if-else-if不是单独的语句，而是由多个if-else组合而成，实现多路判断

如图

举个栗子

对变量x的值进行判断，采用if语句嵌套转换成相应的星期名称!

代码如下

var x= (new Date()).getDay();
//获取今天的星期值，0为星期天
var result;
if (x==1){
   result="星期一";
}else if (x==2){
   result="星期二";
}else if (x==6){
   result="星期六";
}else if (x==0){
   result="星期日";
}else{
   result="未定义";
}
//输出结果
document.write(result);

注意: if 语句允许可以进行彼此嵌套

switch语句

switch基本格式如下:

switch (表达式) {
	case 值1:语句1;break;
	case 值2:语句2;break;
	case 值3:语句3;break;
	default:语句4;
}

它的执行逻辑如下图:

从结构上来说swith比else if结构更加简洁清晰,之前的案例我们可以使用swith来书写
对变量x的值进行判断，采用switch转换成相应的星期名称!

例如

var x= (new Date()).getDay();
//获取今天的星期值，0为星期天
var result;
switch(x){
   case 1:result="星期一";break;
   case 2:result="星期二";break;
   case 3:result="星期三";break;
   case 4:result="星期四";break;
   case 5:result="星期五";break;
   case 6:result="星期六";break;
   case 0:result="星期日";break;
   default: result="未定义";
}
//输出结果
document.write(result);

那么此时此刻就有人要问了，什么时候使用switch什么时候使用if-else-if呢?

简单来说，如果你只需要比较几个固定的值，用switch
如果需要比较的范围或条件更灵活复杂，用if-else-if

JavaScript 循环语句

在编程中有些指令需要执行很多遍，这就要编写大量的代码。
而计算机则是专门用来快速完成重复和繁琐的工作，因此编程语言也就提供循环语句来减少重复指令的编写将重复执行的动作放在循环语句中，计算机将根据条件执行之。

JavaScript的循环语句包括：for、while、do-while、for-in等4种

`for循环`

遇到执行指定次数的代码时，使用for循环比较合适
在执行for循环执行体中的语句前，有三个语句将得到执行!

这三个语句的运行结果将决定是否要进入for循环体

语法结构

for循环功能说明: 实现条件循环，当条件成立时，执行语句1，否则跳出循环体

执行流程结构如下图:

案例

我们可以来写一个最经典的循环结构: 通过for循环打印九九乘法表

代码如下

for(var i=1; i<=9;i++){

	for(var j=1;j<=i;j++){
	  
	 document.write('<span style="padding:10px;display:inline-block;line-height:20px;border:1px solid #ccc;margin: 5px; 5px;">'+i+'×'+j+'='+ i * j+'</span>');
	
	}
	document.write("<br>");
}

如图

while循环

while循环在执行循环体前测试一个条件，如果条件成立则进入循环体，否则跳到循环后的第一条语句。

一些重复执行动作的情形比较简单时就不需要用for循环，可以使用while循环代替!

运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环!

语法结构

执行流程结构

我们用while循环也来输出一个九九乘法表

代码如下

document.write('<table border="1"  style="border-collapse: collapse">');
document.write('<caption><h3>九九乘法表</h3></caption>');
var i=1;
while(i<=9){
    document.write('<tr style="background: #DD'+i+'A68">');
    var j=1;
    while(j<=i){
        document.write('<td style="color:white;width:60px;padding:2px; margin-left:3px;text-align: center;">' + j + 'x' + i + '=' + i * j + '</td>');
        j++
    }
    i++;
    document.write('</tr>');
}
document.write('</table>');

如图

do-while 循环

do-while语句先执行一遍循环体,循环体内的语句执行之后再测试一个条件表达式。

如果表达式成立则继续执行下一轮循环，否则跳到do-while代码段后的第一条语句!

语法结构

执行流程如下

大家可以自己去试试，这里我就不过多赘述了!

for-in循环

for-in语句是for语句的一个变体，同样是for循环语句!
for-in通常用于遍历某个集合的每个元素

举个栗子
比如数组由很多元素，其元素索引构成了一个集合，使用for-in语句可以遍历该集合，进而取得所有元素数据

语法结构

我们在后面学习了数组和JSON之后，我们再来使用这个循环, 这里先了解一下即可!

break和continue关键字的作用

break语句将无条件跳出并结束当前的循环结构
continue语句的作用是忽略其后的语句并结束此轮循环和开始新的一轮循环

异常处理控制语句

程序运行过程中难免会出错，出错后的运行结果往往是不正确的

因此运行时出错的程序通常被强制中止。运行时的错误统称为异常

JavaScript给我们提供了以下语句来解决这个问题:

try-catch 
try-catch-finally 
throw

也就是说为了能在错误发生时得到一个处理的机会，JavaScript提供了这些异常处理语句 !

try-catch 与 throw

try-catch是一个异常捕捉和处理代码结构,当try块中的代码发生异常时,将由catch块里面的语句来处理

我们会用throw 根据需求和条件以及其他情况来抛出异常错误!

也就是说throw是一个在多种编程语言中常见的关键字，主要用于抛出异常。

当程序在运行时遇到某些无法处理的错误情况时，可以使用throw来抛出一个异常，从而中断当前的执行流程，并将控制权转交给能够处理该异常的代码部分。

简单的说其实就是使用 throw new Error()来抛出异常错误，那么try-catch中的catch就可以接收到这个异常错误，从而开始执行catch中的语句!

举个栗子

try {
  // 尝试执行一些可能会出错的代码
  let result = someFunctionThatMightFail(1);
  console.log("成功执行，结果是:", result);
} catch (error) {
  // 如果上面的代码块发生错误，那么执行这里的代码
  console.error("发生错误:", error);
}
// 假设我们有一个可能会失败的函数
function someFunctionThatMightFail(num) {
  // 这里模拟一个错误
  if(num!==100){
      throw new Error("出错了，不是我想要的结果!");
  }else{
      return '成功输入!';
  }
}

try-catch-finally语句

try-catch-finally语句作用与try-catch语句一样，
唯一的区别就是当所有过程执行完毕之后前者的finally块无条件被执行 !

throw语句
当多个结构嵌套时，处于里层try-catch语句不打算自己处理异常则可以将其抛出，父级try-catch语句可以接收到子级抛出的异常。

举个栗子

try {
    // 尝试执行一些可能会出错的代码
    let result = someFunctionThatMightFail(1);
    console.log("成功执行，结果是:", result);
  } catch (error) {
      // 如果上面的代码块发生错误，那么执行这里的代码
      console.error("发生错误:", error);
  } finally {
      // 无论是否发生错误，都会执行这里的代码
      console.log("这个代码块总是会执行。");
  }

  // 假设我们有一个可能会失败的函数
  function someFunctionThatMightFail(num) {
      // 这里模拟一个错误
      if(num!==1){
          throw new Error("出错了，不是我想要的结果!");
      }else{
          return '成功输入!';
      }
  }