<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • JavaScript中的for循環(huán)

    2020-7-31    seo達人

    JavaScript 語言中的 for 循環(huán)用于多次執(zhí)行代碼塊,它是 JavaScript 中最常用的一個循環(huán)工具,還可用于數(shù)組的遍歷循環(huán)等。


    我們?yōu)槭裁匆褂?for 循環(huán)呢?打個比方,例如我們想要控制臺輸出1到1000之間的所有數(shù)字,如果單寫輸出語句,要寫1000句代碼,但是如果使用 for 循環(huán),幾句代碼就能實現(xiàn)。總之,使用 for 循環(huán)能夠讓我們寫代碼更方便快捷(當(dāng)然啦,否則要它干嘛)。


    for 循環(huán)語法

    語法如下所示:


    for(變量初始化; 條件表達式; 變量更新) {

       // 條件表達式為true時執(zhí)行的語句塊

    }

    變量初始化,表示代碼塊開始前執(zhí)行。

    條件表達式,定義運行循環(huán)代碼塊的條件。

    變量更新,在循環(huán)代碼塊每次被執(zhí)行之后再執(zhí)行。

    示例:

    例如我們在一個HTML文件中,編寫如下代碼,實現(xiàn)計算1到100的總和:


    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>JS_俠課島(9xkd.com)</title>

    </head>

    <body>

    <script>

     var result = 0;

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

       result = result + i;

     }

     alert(result);

    </script>

    </body>  

    </html>

    在瀏覽器中打開這個文件,會彈出一個彈出層,彈出層中顯示的是1到100的總和:



    上述代碼中,我們聲明了一個變量 result 并給它賦值為 0,表示初始的總和為 0 。


    然后在 for 循環(huán)中三個語句:


    變量初始化 i = 1,表示從 1 開始計算。

    條件表達式 i <= 100,表示只要 i 小于等于 100 循環(huán)就會一直執(zhí)行,當(dāng) i 大于 100 循環(huán)會停止。

    變量更新 i++,之前我們學(xué)運算符的時候?qū)W過,這是遞增運算符 ++,表示為其操作數(shù)增加 1。

    此時我們可以一點點來看這個 for 循環(huán):


    第一次循環(huán): result = 0 + 1   // 此時result值為0,  i的值為1

    第二次循環(huán): result = 1 + 2   // 此時result值為0+1,i的值為2

    第三次循環(huán): result = 3 + 3   // 此時result值為1+2,i的值為3

    第四次循環(huán): result = 6 + 4   // 此時result值為3+3,i的值為4

    第五次循環(huán): result = 10 + 5  // 此時result值為6+4,i的值為5

    ...

    我們只需要搞清楚 for 循環(huán)中的執(zhí)行原理,不需要手動來計算求和,只要寫好代碼,執(zhí)行代碼后計算機會很快會告訴我們1到 100 的總和。


    再補充一下,上述代碼中result = result + i,我們也可以寫成 result += i,這是我們之前學(xué)過的加賦值運算符,還記得嗎?


    示例:

    再來看一個例子,例如我們可以使用 for 循環(huán)來實現(xiàn)數(shù)組遍歷,首先定義一個數(shù)組 lst:


    var lst = ["a", "b", "c", "d", "e"];

    在寫 for 循環(huán)時,首先就是要搞清楚小括號里面的三個語句,因為我們可以通過數(shù)組中元素的下標(biāo)索引來獲取元素的值,而數(shù)組的索引又是從 0 開始,所以變量初始化可以設(shè)置為i = 0。第二個條件表達式,因為數(shù)組中最后一個索引為 lst.length - 1,所以只要小于等于 lst.length - 1,循環(huán)就會一直執(zhí)行。而i <= lst.length - 1 就相當(dāng)于 i<lst.length。第三個變量更新,當(dāng)循環(huán)每循環(huán)一次,索引值就加一,所以為 i++。


    所以循環(huán)可以像下面這樣寫:


    for(i = 0; i<lst.length; i++){

       console.log(lst[i]);  // 輸出數(shù)組中的元素值,從索引為0的值開始輸出,每次加1,一直到lst.length-1

    }

    輸出:


    a

    b

    c

    d

    e

    其實遍歷數(shù)組還有一種更好的方法,就是使用 for...in 循環(huán)語句來遍歷數(shù)組。


    for...in 循環(huán)

    for...in 循環(huán)主要用于遍歷數(shù)組或?qū)ο髮傩裕瑢?shù)組或?qū)ο蟮膶傩赃M行循環(huán)操作。for...in 循環(huán)中的代碼每執(zhí)行一次,就會對數(shù)組的元素或者對象的屬性進行一次操作。


    語法如下:


    for (變量 in 對象) {

       // 代碼塊

    }

    for 循環(huán)括號內(nèi)的變量是用來指定變量,指定的可以是數(shù)組對象或者是對象屬性。


    示例:

    使用 for...in 循環(huán)遍歷我們定義好的 lst 數(shù)組:


    var lst = ["a", "b", "c", "d", "e"];

    for(var l in lst){

       console.log(lst[l]);

    }

    輸出:


    a

    b

    c

    d

    e

    除了數(shù)組,for...in 循環(huán)還可以遍歷對象,例如我們遍歷 俠俠 的個人基本信息:


    var object = {

       姓名:'俠俠',

       年齡:'22',

       性別:'男',

       出生日期:'1997-08-05',

       職業(yè):'程序員',

       特長:'跳舞'

    }


    for(var i in object) {

       console.log(i + ":" + object[i]);

    }

    輸出:


    姓名: 俠俠

    年齡: 22

    性別: 男

    出生日期: 1997-08-05

    職業(yè):程序員

    特長:跳舞

    動手小練習(xí)

    請自定義一個長度為7的數(shù)組,然后通過 for 循環(huán)將數(shù)組中的元素遍歷出來。

    求和:1~100的奇數(shù)和。

    求和:1~100的偶數(shù)和。

    使用對象定義一個人的個人信息(包括姓名、性別、年齡、出生日期、興趣愛好、職業(yè)、特長等),然后使用 for...in 循環(huán)將這些信息遍歷輸出。

    藍藍設(shè)計www.skdbbs.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

    日歷

    鏈接

    個人資料

    藍藍設(shè)計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 精品久久人人做人人爽综合| 99热亚洲色精品国产88| 99re这里只有精品国产精品| 欧美日韩精品系列一区二区三区国产一区二区精品 | 精品91自产拍在线观看| 国产成人精品亚洲精品| 欧洲精品一区二区三区在线观看| 亚洲精品高清在线| 国产精品美女一区二区视频| 亚洲国产精品热久久| 欧美精品一区二区在线精品| 亚洲AV成人无码久久精品老人| 久久久久无码精品国产| 久久99国产精品一区二区| 国产欧美一区二区精品性色99| 亚洲欧洲美洲无码精品VA| 国产精品臀控福利在线观看| 99精品久久久久久久婷婷| 国产午夜精品无码| 国产精品污WWW一区二区三区 | 无翼乌无遮挡全彩老师挤奶爱爱帝国综合社区精品 | 99国产精品久久久久久久成人热| 亚洲欧美日韩精品久久| 欧美精品videosse精子| 丰满人妻熟妇乱又仑精品| 国产一级精品高清一级毛片| 久久久无码精品亚洲日韩蜜臀浪潮| 欧美精品888| 无码精品一区二区三区在线| 99精品国产成人一区二区| 精品久久无码中文字幕| 精品亚洲视频在线观看| 国内精品久久九九国产精品| 在线精品动漫一区二区无广告| 92国产精品午夜福利免费| 久久精品水蜜桃av综合天堂| 久久99国产精品成人欧美| 国产精品成人va在线观看| 亚洲国产精品无码久久SM| 久久99热这里只有精品国产| 一级成人精品h|