• 欢迎光临~

前端开发系列003-基础篇之JavaScript流程控制

开发技术 开发技术 2022-12-09 次浏览
title: '前端开发系列003-基础篇之JavaScript流程控制'
tags:
  - javaScript系列
categories: []
date: 2017-03-29 09:21:13
本文将介绍javaScript语言中流程控制语句,包括顺序、选择和循环三种控制结构以及具体的控制语句如if else 、while等的基本使用。

一、流程控制语句简单介绍

前端开发系列003-基础篇之JavaScript流程控制

JavaScript程序是一系列可执行语句的集合。

默认情况下,JavaScript解释器依照语句的编写顺序从头到尾,从上到下的依次执行,这种默认执行代码的结构其实就是 顺序结构。而除了顺序结构外,JavaScript中还有一些特定的控制语句能够改变代码的默认(顺序)执行方式,这些特定的控制语句总体上可以分成 条件语句循环语句跳转语句

以上,根据它们的执行特点我们可以总结出JavaScript中的流程控制结构有三种,分别是顺序结构选择结构循环结构。 JavaScript程序在执行的时候默认就是 顺序结构,因此下文将主要讲解其它两种流程控制结构和基本用法。

二、选择控制结构

JavaScript中选择控制语句主要有单分支(if)双分支(if..else)多分支(if..else if...)多值选择(switch)等,接下来分别对它们进行介绍。

① 单分支结构

javaScript语言中的单分支选择结构主要使用if语句来实现。

单分支选择结构流程图

前端开发系列003-基础篇之JavaScript流程控制

语法示例


      if ( condition ) {
           expression1;
      }
      

在上面的语法结构中,if后面的圆括号( condition )编写是判断的条件(通常是条件表达式),条件表达式的结果应该为布尔类型值(如果不是布尔值则会调用Boolean函数转换为布尔值),在单分支结构语句中,当条件为“真”的时候,执行if里面的代码,当条件为“假”的时候,那么不执行if里面的代码,而会执行 if 语句后面的代码。

  /*演示 单分支if语句的基本使用*/
  /*01 满足条件执行一条语句 {} 可以省略*/
  var flag = true;
  if (flag)
    console.log("-----");
  console.log("---end---");

  //-----
  //---end---

  /*02 满足条件执行代码块*/
  var age = 20;
  if (age >= 18)
  {
    console.log("Hi,你已经是成年了~");
    console.log("该自己对自己负责了。");
  }
  console.log("---end---");

  //Hi,你已经是成年了~
  //该自己对自己负责了。
  //---end---

② 双分支结构

双分支选择结构主要用if-else语句来实现,在双分支结构中,当条件为“真”的时候执行if语句后面的代码,当条件为“假”的时候执行else后面的代码。

双分支选择结构流程图

前端开发系列003-基础篇之JavaScript流程控制

语法示例


     if ( condition ) {
           expression1;
      }else {
            expression2;
      }
      expression3;
      
 /*演示:双分支选择结构的代码示例*/
  var age = 15;
  if (age >= 18)
  {
    console.log("测试结果:成年人");
  }else
  {
    console.log("测试结果:未成年人");
  }
  console.log("___end____");

  //测试结果:未成年人
  //---end---

③ 多分支结构

多分支选择结构主要用if-else if-else语句来写,在多分支结构中,当前面的条件为“真”的时候,将不会判断后面的条件,当前面的条件为“假”的时候,会继续判断后面的条件,直到符合条件为止继而执行相应的代码块。

多分支选择结构流程图
前端开发系列003-基础篇之JavaScript流程控制

语法示例


     if ( condition1 ) {
           expression1;
      }else if( condition2 ) {
            expression2;
      }else if( condition3 ) {
            expression3;
      }else {
            expression4;
      }
      expression5;
      
  var score = 98;

  if (score < 60){
    console.log("测试成绩:不及格")
  }else if (score <= 75){
    console.log("测试成绩:良好")
  }else if (score <= 85){
    console.log("测试成绩:优秀")
  }else
  {
    console.log("测试成绩:优秀+")
  }
   console.log("___end____");
  
  //测试成绩:优秀+
  //___end____"

说明 在多分支语句中,当条件表达式满足前面的条件时,会执行前面的语句,尽管布尔语句同时也满足后面的条件,但并不会再执行后面的分支语句。

④ 多值选择结构

多值选择结构主要通过switch-case语句来实现。

多值选择结构流程图

前端开发系列003-基础篇之JavaScript流程控制

多值选择结构语法

switch(n){
    case 1:           //如果n==1,那么从此处开始执行
        //执行代码块1
        break;        //停止执行switch语句
    case 2:           //如果n==2,那么从此处开始执行
        //执行代码块2
        break;        //停止执行switch语句
    case 3:           //如果n==3,那么从此处开始执行
        //执行代码块3
        break;        //停止执行switch语句
    default:          //如果n的值非123,那么执行下面的代码
        //执行代码块4
        
}

当switch后面圆括号()中表达式的值与某个case后面的值匹配时,则执行这个case后面的语句。在匹配的时候会按照从上之下的顺序依次执行,如果表达式的值与所有case后面的值都不匹配,则执行default后面的语句。

语句中的 break 用于结束多值选择结构语句,如果没有 break 则会从满足条件的case开始顺序执行完整个switch语句(这种情况被称之为case穿透),直到遇到break为止。在大多数情况下,我们都应该使用 break 语句来终止每个 case 语句块

ECMAScript标准允许每个case关键字跟随任意的表达式。在执行的时候,会先计算switch后面()中的表达式,然后按照从上到下的顺序来计算每个case后面的表达式,直到case表达式的值和switch后面表达式的值匹配位置。需要注意的是,它们在进行匹配的时候实际上使用的是全等判断(即不会进行有任何类型的转换)。

    var day=new Date().getDay();
    switch (day)
    {
    case 0:
      x="Today it's Sunday";
      break;
    case 1:
      x="Today it's Monday";
      break;
    case 2:
      x="Today it's Tuesday";
      break;
    case 3:
      x="Today it's Wednesday";
      break;
    case 4:
      x="Today it's Thursday";
      break;
    case 5:
      x="Today it's Friday";
      break;
    case 6:
      x="Today it's Saturday";
      break;
    }

虽然我们在开发中大多数情况下,default 语句都是出现在switch结构的末尾,位于所有case的后面,但实际上 default 可以被卸载switch语句内的任何位置

三、循环控制结构

和大多数编程语言一样,JavaScript语言中的循环控制结构也无非whiledo-while以及for循环三种。说明 JavaScript中主要用来枚举对象的 for..in 、数组的 forEach 方法、map 方法以及新标准中的 for..of 等循环遍历方法,在此处暂不做介绍。

while循环结构

执行 while循环结构 语句的时候,先判断while后面的条件是否为“真”,如果为“真”那么就执行一遍循环体,然后继续检查条件是否为“真”,重复这个过程,直到while条件为“假”时停止。

如果条件一直为“真”,循环体中又没有结束循环的语句时,代码就会陷入到死循环。

while循环流程图

前端开发系列003-基础篇之JavaScript流程控制

while循环语法和代码示例

    while(condition)
    {
        expression;
    }
    var i = 0;
    while (i < 10)
    {
      console.log("第"+(i + 1)+"次打印,大家好,我是陆超!真好 ");
      i++
    }
    
    /*
    第1次打印,大家好,我是陆超!真好 
    第2次打印,大家好,我是陆超!真好 
    第3次打印,大家好,我是陆超!真好 
    第4次打印,大家好,我是陆超!真好 
    第5次打印,大家好,我是陆超!真好 
    第6次打印,大家好,我是陆超!真好 
    第7次打印,大家好,我是陆超!真好 
    第8次打印,大家好,我是陆超!真好 
    第9次打印,大家好,我是陆超!真好
    第10次打印,大家好,我是陆超!真好 
    * */

do-while循环结构

do-while循环流程图

前端开发系列003-基础篇之JavaScript流程控制

do-while循环语法和代码示例

    do{
        expression;
    }while(condition);
  var i = 0;
  do
  {
    console.log("The number is " + i);
    i++;
  } while (i<5);
  console.log("循环结束后i的值为,",i);
 
  /*
  The number is 0
  The number is 1
  The number is 2
  The number is 3
  The number is 4
  循环结束后i的值为, 5
  * */

do/while循环while循环非常相似,它们的区别在于do-while循环是在循环的尾部而不是顶部检测循环表达式是否满足条件,这也意味着do-while循环的循环体将至少会执行一次。

for循环结构

for循环 提供了一种更方便的循环控制结构,它在while/do-while循环模式的基础上进行了简化。for循环语句 直接将循环条件的初始化、检测和更新三步操作明确的声明为语法的一部分,更直接简洁。

for循环流程图

前端开发系列003-基础篇之JavaScript流程控制

for循环语法


    for(initialization; condition; increnment){
        expression;
    }
    

在 for 循环中,initialization(初始化表达式); condition(循环条件表达式); increnment(计数器变量更新)三个表达式之间需要使用分号来进行分隔,它们分别负责计数器的初始化操作、循环条件判断以及循环计数器变量的更新操作。接下来,简单说明for循环的工作机制。

在整个for循环结构中,initialization 初始化表达式只会在循环开始前执行一次,然后检查condition 循环条件表达式的值是否为"真",如果为"真"那么就执行循环体中的代码,最后执行increnment 计数器变量更新表达式。然后,接着检查循环条件的值是否为"真",如果为"真"那么就执行循环体,重复这个过程,直到循环条件的值为"假"或者在循环体中遇到break语句才会结束循环。

    /*嵌套for循环实现打印99乘法表*/
    document.write("<table>");
    for (var i = 1; i < 10; i++) {
      document.write("<tr>");
      for (var j = 1; j<= i; j++) {
        document.write("<td>"+j+"x"+i+"="+i*j+"</td >");
      }
      document.write("</tr>");
    }
    document.write("</table>");

打印九九乘法表

前端开发系列003-基础篇之JavaScript流程控制

在 for 循环中的三个表达式中任何一个都可以忽略,省略三个都可以忽略,但至少要保持其结构的完整性(即不能省略两个分号),最简单形式是for( ; ; ){ ... },不过这将构成一个死循环同 while(true){...}一样。

程序员灯塔
转载请注明原文链接:前端开发系列003-基础篇之JavaScript流程控制
喜欢 (0)