首頁 > 文章 > web前端 > 詳解JavaScript中的流程語句

詳解JavaScript中的流程語句

青灯夜游轉載: 2018-10-12 15:45:542488瀏覽

本文帶給大家詳解JavaScript中的流程語句，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

一開篇概述

本講主要解說JavaScript流程語句，大致內容包含如下：

其中，常用的if,while,do ..while,for在本片文章就不論述，重點論述for..in..,label,break和continue,whth，switch等語句

#二內容區

（一）常用語句

由於如下語句比較通用，這篇文章就不再論述

1.條件語句

if語句

2.循環語句

while語句，do.while語句，for語句

#（二） for..in..語句

1.定義

for...in...，是迭代語句，用來列舉對象的屬性，其語法定義為：

for (propName in expression) statement

基於在JavaScript開發中"能使用局部變量，就不要使用全域變數"原則，建議將propName屬性定義為局部變量，如下所示：

for (var propName in expression) statement

2.注意點

(1)for....in是用來列舉物件屬性的，而不是列舉物件屬性值。

範例1：

如下例子，for..in..輸出的是陣列索引(即陣列屬性)，而不是陣列索引值。

var i = 5;
    var arr = new Array();

    for (var n = 0; n < i; n++) {
        arr[n] = i;
    }

    for (var propName in arr) {
        alert(propName);// 0,1,2,3,4
    }

範例2：

如下例子，for..in..輸出的是物件userInfo的屬性(name,age,address)，而不屬性值(Alan_beijing,38,china -shanghai)

var userInfo = { name: &#39;Alan_beijing&#39;, age: 38, address: &#39;china-shanghai&#39; };
for (var property in userInfo) {
alert(property);//name,age,address5     
}

(2)for..in..枚舉屬性，沒有確定的順序，不同的瀏覽器，會有所差別。

(3)ECMAScript5版本之前，如果被迭代物件變數值null或undefined,for語句會拋出錯誤，ECMAScript5之後，這種情況不會拋出錯誤，但不執行迴圈體。

（三） label

1.定義

在JavaScript中，label語句表示標籤語句，通常與循環語句使用，表示循環語句跳到指定位置。

1 label:statement

範例1：

如下程式碼包含一個label語句outermost,其內容為兩個嵌套的循環體，當循環體執行到1==5且j==5時，break語句將跳到outermost語句繼續執行。

var num = 0;
    outermost:
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            if (i == 5 && j == 5) {
                break outermost;
            }
            num++
        }
    }
    alert(num);//55

（四） break和continue

1.定義

break和continue都表示在循環體中，根據特定的條件退出循環體，但兩者又有區別，break表示退出整個循環體，continue表示退出滿足條件的該次循環體。

範例1：

如下程式碼，當執行i=5時，就退出整個循環體。

var num = 1;
    for (var i = 1; i < 10; i++) {
        if (i % 5 == 0) {
            break;
        }
        num++;
    }
    alert(num);//5

範例2：

如下程式碼，當執行i=5時，退出本次循環，然後回到for語句開頭，繼續執行。

var num = 1;
    for (var i = 1; i < 10; i++) {
        if (i % 5 == 0) {
            continue;
        }
        num++;
    }
    alert(num);//9

2.注意點

(1)break和continue跳出循環體時，表示只跳出直接所在循環體，而不是除了直接循環體外的其他循環體。

例子1：

如下例子，break只跳出直接循環體

例子2：

如下例子，continue只跳出直接迴圈體

var num = 0;
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            if (i == 5 && j == 5) {
                continue;
            }
            num++
        }
    }
    alert(num);//99

2.break和continue一般結合標籤語句運用，表示跳到指定位置

##範例：

如下程式碼，當執行到i=5 && j==5時，就跳到標籤語句outermost處，繼續執行。這裡要注意的是，JavaScrip沒有區塊級作用域，因此在for語句外部是能夠存取變數i的

var num = 0;
    outermost:
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            if (i == 5 && j == 5) {
                break outermost;
            }
            num++
        }
    }

    alert(num);//55

（五） with

1.定義

with語句將程式碼作用域設定到特定物件中，其主要目的是簡化多次編寫相同對象，提高複用。

1 with (expression) statement

範例：

如下程式碼定義了一個取得使用者資訊函數，在函數體內new了一個person對象，且定義兩個屬性(name和address)，然後將person對象with起來。

function GetUserInfo() {
        var person = new Object();
        person.name = "Alan_beijing";
        person.address = "China-shanghai";
        with (person) {
            return name +","+ address;
        }
    }
    alert(GetUserInfo());//Alan_beijing,China-shanghai

2.注意點

(1)在JavaScript開發中，慎用with語句，主要原因有二：其一是with語句影響效能；其二是with語句在嚴格模式下，會出錯

(2)with語句將公有物件括起來，從而提高程式碼簡潔度和提高程式碼複用性

(3)在執行with語句體內尋找變數時，先看with體內是否存在所查找變量，若不存在，再查找with括起來的變數是否有要找的屬性。

如下範例更能體現這個原則：

function GetUserInfo() {
        var person = new Object();
        person.name = "Alan_beijing";
        person.address = "China-shanghai";
        person.age = 35;
        with (person) {
            var sex = "男";
            var age = 40;
            return name + "," + sex + "," + age +","+ address;
        }
    }
    alert(GetUserInfo());//Alan_beijing,男,40,China-shanghai

（六） switch

1.定義

switch語句就是我們平常所說的開關語句，它非常適用於多條件情況。

switch (expression) {
        case value: statement
            break;
        case value: statement
            break;
        default:statement
    }

範例：

如下代码，根据城市名称，查询城市类别

//根据不同城市，判断其属于几线城市
    function CityType(address) {
        switch (address) {
            case "Shanghai": alert("中国一线城市");
                break;
            case "Shenzhen": alert("中国一线城市");
                break;
            case "Beijing": alert("中国一线城市");
                break;
            default: alert("中国非一线城市");
        }
    }

    CityType("Shenzhen");//中国一线城市

2 注意点

(1)switch本质与if是一样的，都是解决多条件多分支问题；

(2)使用switch语句的真正目的是避免使用过多的if..else if ...else....语句；

三总结

本篇文章主要结合代码介绍了JavaScript的流程语句及其使用，重点结束了with,switch，for...in..,label,break和continue等语句，需要注意的是，在JavaScript中，流程语句都没有块级作用域，至于什么是块级作用域，将在接下来的文章中与大家分享。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！

詳解JavaScript中的流程語句

相關文章