不可錯過的JavaScript課程(9)迴圈1

不可錯過的JavaScript課程(9)迴圈1

不可錯過的JavaScript課程(9)迴圈1

你知道JavaScript中的三種迴圈嗎?今天就讓我們從for迴圈開始認識認識!

迴圈

JavaScript 的「迴圈(Loops)」可以多次執行一組程式。當有多個值,需要重複執行同程式時,用「迴圈(Loops)」可說是非常方便!

前端工程師應該都知道:JavaScript 有三種迴圈:forwhile do while 。而最常用的 for 迴圈,它的 JavaScript 語法如下:

請參閱CodePen上的Tedutw@Tedutw的Pen JavaScript9-for-loop-1

看清楚了嗎?上例是典型的 for 迴圈(for loop)格式,包含三個條件敘述 (statement):

在迴圈開始之前執行「條件敘述 1」;接著,「條件敘述 2」定義了迴圈運行的條件;而在每次迴圈跑完之後,再執行「條件敘述 3」。

For 迴圈

以下的 for 迴圈範例中,顯示出 7 個等於或小於 7 的整數:

請參閱CodePenTedutw@Tedutw編寫的Pen JavaScript9-for-loop-2

以上示例中,迴圈開始前,條件敘述 1 設置了一個變數(變數 i = 1);

條件敘述 2 定義了迴圈運行的條件(i 必須小於或等於 7)。

每次執行迴圈中的程式代碼後,條件敘述 3 都會增加一個值(i ++)。

條件敘述 1 是選擇性的:如果在迴圈開始前就已經定義了值,則可以將其省略。如下例(前端工程師請注意:因為在 for 迴圈之前便已經定義了「var i = 1」,因此 for 迴圈就省略了條件敘述 1):

請參閱CodePenTedutw@Tedutw的Pen JavaScript9-for-loop-3

如果條件敘述 2 結果為真(true),則迴圈將重頭開始執行;反之,迴圈將結束。與條件敘述 1 一樣,條件敘述 2 也是選擇性的(可以省略)。

如果省略條件敘述 2 ,則必須在迴圈內加一個 break。否則迴圈將不會結束。

條件敘述 3 用於更改初始變數。可以使用任何方式來修改變數,包括減去(i–)或增加(i = i + 15)等等。

條件敘述 3 也是選擇性的(可以省略),如果在迴圈內增加值,則可以將其省略。

請參閱CodePenTedutw@Tedutw編寫的Pen JavaScript9-for-loop-4

 

 

精選延伸閱讀:

不可錯過的JavaScript課程(8)switch條件式

不可錯過的JavaScript課程(10)while相關迴圈

不可錯過的JavaScript課程(11)跳出和繼續的迴圈

Java課程助你擠進IT專業職場大門

科幻電影也愛用程式語言?Python跟Java最常出現!(上)

身為IT界達人的你,一定要知道達內教育評價最高的Java課程!

程式課程選達內,美上市IT課程教育集團

2天考取Google Ads證照!新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照

本篇發表於 程式語言 並標籤為 , , , , 。將永久鏈結加入書籤。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料