JavaScript_流程控制简介

流程控制,是任何一门编程语言都有的一个语法。

如果你学习C语言,或者学过C#、Java等,应该对“流程控制”很熟悉。

所谓的流程控制,指的是控制程序按照怎样的顺序执行。

在JavaScript中,共有三种流程控制方式(其实任何语言也都只有这三种啦)。

顺序结构

选择结构

循环结构

顺序结构

在JavaScript中,顺序结构是最基本的结构。所谓顺序结构,

就是代码按照从上到下、从左到右的“顺序”执行,

举例:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script>

        var str1 = "绿叶学习网";

        var str2 = "JavaScript";

        var str3 = str1 + str2;

        document.write(str3);

    </script>

</head>

<body>

</body>

</html>

分析:

按照“从上到下、从左到右”的顺序,JavaScript执行顺序如下。

第一步:执行var str1 = "绿叶学习网”

第二步:执行var str2 = “JavaScript”

第三步:执行var str3 = str1 + str2

第四步:执行document.write(str3)

JavaScript一般情况下就是按照顺序结构来执行的。不过呢,在有些场合,我们单纯只用顺序结构就没法解决问题了。此时就需要引入选择结构和循环结构。

选择结构

在JavaScript中,选择结构指的是根据“条件判断”来决定使用哪一段代码。选择结构有单向选择、双向选择以及多向选择三种,但是无论是哪一种,JavaScript都只会执行其中的一个分支,选择结构流程如图3-3所示。

循环结构

循环结构,指的是根据条件来判断是否重复执行某一段程序。若条件为true,则继续循环;若条件为false,则退出循环。

选择结构:if

在JavaScript中,选择结构指的是根据“条件判断”来决定使用哪一段代码。

选择结构有单向选择、双向选择以及多向选择三种,但不管是哪一种,JavaScript只会执行其中的一个分支。

在JavaScript中,选择结构共有两种方式,一种是if语句,

另外一种是switch语句。这一节我们先来介绍if语句。对于if语句,主要包括以下几种。

单向选择:if…

双向选择:if…else…

多向选择:if…else if…else…

if语句的嵌套

单向选择:if…

语法:

if(条件)

{

    …

}

说明:

这个“条件”一般是一个比较表达式。如果“条件”返回为true,则会执行“{}”内部的程序;如果“条件”返回为false,则会直接跳过“{}”内部的程序,然后按照顺序来执行后面的程序。

在JavaScript中,由“{}”括起来的程序,我们称为“语句块”。语句块常用于选择结构、循环结构以及函数体中,JavaScript把一个语句块看成是一个整体来执行。

举例:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script>

        var score = 100;

        if (score > 60) {

              alert("那你很棒棒噢~");

        }

    </script>

</head>

<body>

</body>

</html>

分析:

由于变量score的值为100,所以score>60返回true,因此会执行“{}”内部的程序。

 双向选择:if…else…

语法:

if(条件)

{

    ……

}

else

{

    ……

}

说明:

“if…else…”相对“if…”来说,仅仅是多了一个选择。当条件返回为true时,会执行if后面“{}”中的程序;当条件返回为false时,会执行else后面“{}”中的程序。

举例:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script>

        var score = 100;

        if (score < 60) {

              alert("补考!");

        } else {

              alert("通过!");

        }

    </script>

</head>

<body>

</body>

</html>

分析:

由于变量score的值为100,而score<60返回false,因此会执行else后面“{}”中的程序。

对于双向选择,我们是可以使用三目运算符来代替的,像上面这个例子,如果用三目运算符来写,实现代码如下。

举例:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script>

        var score = 100;

        var result = (score < 60) ? "补考!" : "通过!";

        alert(result);

    </script>

</head>

<body>

</body>

</html>

多向选择:if…else if…else…

多向选择,就是在双向选择的基础上增加多个选择分支。

语法:

if(条件1)

{

    //当条件1为true时执行的代码

}

else if(条件2)

{

    //当条件2为true时执行的代码

}

else

{

    //当条件1和条件2都为false时执行的代码;

}

说明:

多向选择语法看似很复杂,实质也是非常简单的,它只是在双向选择基础上再增加一个或多个选择分支罢了。小伙伴们对比一下这两个的语法格式就知道了。

举例:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script>

        var time = 21;

        if (time < 12)

        {

              document.write("早上好!");//如果小时数小于12则输出“早上好!”

        }

        else if (time > =12 && time < 18)

        {

                document.write("下午好!");      //如果小时数大于等于12并且小于18,输出“下午好!”

        }

        else

        {

                document.write("晚上好!");    //如果上面两个条件都不符合,则输出“晚上好!”

        }

    </script>

</head>

<body>

</body>

</html>

分析:

对于多向选择,我们会从第一个if开始判断,如果第一个if条件不满足,则判断第二个if条件……直到满足为止。一旦满足,就会退出整个if结构。

if语句的嵌套

在JavaScript中,if语句是可以嵌套使用的。

语法:

if(条件1)

{

    if(条件2)

    {

        当“条件1”和“条件2”都为true时执行的代码

    }

    else

    {

        当“条件1”为true、“条件2”为false时执行的代码

    }

}

else

{

    if(条件2)

    {

        当“条件1”为false、“条件2”为true时执行的代码

    }

    else

    {

        当“条件1”和“条件2”都为false时执行的代码

    }

}

说明:

对于这种结构,我们不需要去刻意去记,只需要从外到内根据条件一个个去判断就可以了。

举例:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script>

        var gendar = "女";

        var height = 172;

        if(gendar=="男")

        {

              if(height>170)

              {

                    document.write("高个子男生");

              }

              else

              {

                    document.write("矮个子男生");

              }

        }

        else

        {

              if (height > 170)

              {

                    document.write("高个子女生");

              }

              else

              {

                    document.write("矮个子女生");

              }

        }

    </script>

</head>

<body>

</body>

</html>

分析:

在这个例子中,首先外层if语句的判断条件gendar=="男"返回false,因此会执行else语句。然后我们可以看到else语句内部还有一个if语句,这个内层if语句的判断条件height>170返回true,所以最终输出内容为“高个子女生”。

实际上,if语句的嵌套也是很好理解的,说白了就是在if或else后面的“{}”内部再增加一层判断。对于if语句的嵌套,我们一层一层由外到内判断就可以了,就像剥洋葱一样,非常简单。我们再来一个例子,让小伙伴消化一下。

举例:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script>

        var x = 4;

        var y = 8;

        if (x < 5)

        {

              if (y < 5)

              {

              document.write("x小于5,y小于5");

              }

              else

              {

              document.write("x小于5,y大于5");

              }

        }

        else

        {

              if (y < 5)

              {

              document.write("x大于5,y小于5");

              }

              else

              {

              document.write("x大于5,y大于5");

              }

        }

    </script>

</head>

<body>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355

推荐阅读更多精彩内容