認識 JavaScript (八)

更新於 2024/04/22閱讀時間約 2 分鐘

※ 迴圈(for loop)介紹:

raw-image


迴圈的用途是重複執行程式碼,只要條件滿足,就會執行特定的動作。

for (let i = 0; i < 10; i = i + 1) {
console.log(i);
}

說明:

  • for:對於。
  • let:因為迭代器的數值會一直改變所以要用let。
  • i:迭代器,用來跑迴圈的一個變數。
  • i = 0:將迭代器初始化為0。
  • i < 10:迴圈條件,在此條件為 true 時 ,迴圈都會執行。
  • i = i + 1:迴圈每執行一次,做為索引的變數 i 就會加 1。
  • { console.log(i); }:執行程序,將希望重複的動作定義在 { }之中。

※ 面試考題:在 for 迴圈裡的i 是在迴圈開始以後才誕生的變數,當迴圈結束時,這個變數也會消失。所以程式繼續往下跑以後,就無法在 for 迴圈外面繼續使用 i 這個變數。所以必須把i放在外面做宣告,才能取得最後一個 i 的值。

raw-image

※ 迴圈(while loop)介紹:

raw-image


while流程:

raw-image

※ 寫程式時要避免造成無限迴圈,因為程式無窮循環,會讓瀏覽器進入接近當機狀態,同時你會看見 console 持續輸出訊息。

例如以下是一個錯誤示範:

raw-image

※ while loop和for loop差別:

  • 使用while的時機:遇到不特定次數的時候,我們比較注重的是它條件的本身,也就是說只要條件有效,就持續執行迴圈。例如登入的時候我們要做什麼﹔登入了多久之後我們要幹嘛?
  • 使用for的時機:遇到固定次數的時候,也就是需要指定明確的執行次數。
  • 比較while和for兩個例子裡,因為i 被宣告的位置不一樣,因此變數存活的範圈也不一樣:
raw-image

說明:

在 while 迴圈的例子裡,i 是屬於外層,進到迴圈內可以繼續使用,迴圈結束後也可以繼續使用。

在 for 迴圈的例子裡,i 是在迴圈開始以後才誕生的變數,當迴圈結束時,這個變數也會消失。所以無法在 for 迴圈外面繼續使用 i 這個變數。


    全端網頁開發專業知識分享
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    ※ 常用Object(物件)型態的方法: 拿到object裡面某個key的value(值): 拿到所有屬性: ※ 存取物件屬性:點記法與括號記法 使用點記法 (dot notation) 或括號記法 (bracket notation) 來存取物件的值,以下兩種寫法的結果是一樣的: //
    ※ 常用arry型態的方法: 長度: length 查詢第N個元素: [] 查詢元素在第N個: indexOf( ) 判斷是否為array: isArray() 新增和刪除: push():新增後面的數值 unshift():新增前面的數值 pop():刪除後面的數值 sh
     ※ JavaScript 的命名慣例: 變數名稱是兩個單字以上的組合時,JavaScript 傳統上會採用駝峰命名法(camel case)。也就是將第一個單字之外的接下來每一個字首大寫,例如 myBirthday。 區分大小寫:大小寫是有區分的,如 MyBirthday 與 myBirthd
    ※ 常用number型態的運算方法: 加、減、乘、除 求餘數(mod):% ※ JavaScript 內建的 Math 物件提供了許多number相關的方法和常數。以下是一些常見的內建 Math 功能: Math.PI:算出圓的面積。 Math.ceil:無條件進位 Math.floor
    ※ 認識變數: 變數(variable)是在程式裡面把東西存起來的概念。 基於不讓電腦每次都需要重新運算,把需要花時間運算的東西先存起來,之後再直接拿出來使用,所以我們需要變數。 變數儲存的位置在電腦裡的記憶體。變數就像是一個箱子,記憶體就像是一個倉庫。箱子的名稱就是變數名稱,箱子的內容物就是
    ※ JavaScript的五種運算子: 我們希望操控這些值,來達成我們想要的結果。 運算式由運算元和運算子組成。運算元是指我們要拿去做運算的東西是什麼?例如:5和4。運算子是他要做什麼樣子的運算?例如:"+"。 算術運算子:"+加"、"-減"、"*乘"、"/除"、"%(mod餘數概念)"。
    ※ 常用Object(物件)型態的方法: 拿到object裡面某個key的value(值): 拿到所有屬性: ※ 存取物件屬性:點記法與括號記法 使用點記法 (dot notation) 或括號記法 (bracket notation) 來存取物件的值,以下兩種寫法的結果是一樣的: //
    ※ 常用arry型態的方法: 長度: length 查詢第N個元素: [] 查詢元素在第N個: indexOf( ) 判斷是否為array: isArray() 新增和刪除: push():新增後面的數值 unshift():新增前面的數值 pop():刪除後面的數值 sh
     ※ JavaScript 的命名慣例: 變數名稱是兩個單字以上的組合時,JavaScript 傳統上會採用駝峰命名法(camel case)。也就是將第一個單字之外的接下來每一個字首大寫,例如 myBirthday。 區分大小寫:大小寫是有區分的,如 MyBirthday 與 myBirthd
    ※ 常用number型態的運算方法: 加、減、乘、除 求餘數(mod):% ※ JavaScript 內建的 Math 物件提供了許多number相關的方法和常數。以下是一些常見的內建 Math 功能: Math.PI:算出圓的面積。 Math.ceil:無條件進位 Math.floor
    ※ 認識變數: 變數(variable)是在程式裡面把東西存起來的概念。 基於不讓電腦每次都需要重新運算,把需要花時間運算的東西先存起來,之後再直接拿出來使用,所以我們需要變數。 變數儲存的位置在電腦裡的記憶體。變數就像是一個箱子,記憶體就像是一個倉庫。箱子的名稱就是變數名稱,箱子的內容物就是
    ※ JavaScript的五種運算子: 我們希望操控這些值,來達成我們想要的結果。 運算式由運算元和運算子組成。運算元是指我們要拿去做運算的東西是什麼?例如:5和4。運算子是他要做什麼樣子的運算?例如:"+"。 算術運算子:"+加"、"-減"、"*乘"、"/除"、"%(mod餘數概念)"。
    你可能也想看
    Google News 追蹤
    Thumbnail
    徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
    Thumbnail
    隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
    Thumbnail
    這篇內容,將會講解什麼是「repeat迴圈」,以及與「repeat迴圈」相關的知識。包括repeat迴圈的簡介、break、continue。
    Thumbnail
    這篇內容,將會講解什麼是「while迴圈」,以及與「while迴圈」相關的知識。包括while迴圈的簡介、while迴圈、break、continue。
    Thumbnail
    此章節的目的是介紹Java程式語言中的流程控制結構,包括條件語句(if, else if, else)、三元運算子、switch語句,以及各種迴圈(for, foreach, while)。同時,也解釋了如何在迴圈中使用控制語句來改變程式的執行流程。每種主題都配有示例程式碼以幫助理解。
    Thumbnail
    本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
    Thumbnail
    for loop、while loop、repeat
    Thumbnail
    本章節主要介紹了JavaScript中的流程控制,包括條件語句(如if、else if、else和三元運算子)和循環結構(如for迴圈、while迴圈等)。同時,也提供了如何使用break、continue和label來控制迴圈的執行。
    Thumbnail
    分享在網路上看到的陣列題目。通常 for...of 的 value 是陣列中的每個值,那如果我們在迭代中對陣列操作會發生什麼事? 題目來源:https://x.com/_jayphelps/status/1774640511158022335?s=20
    Thumbnail
    for,while,do while語法介紹 for loop for比較偏向固定圈數型的迴圈 語法 for(計數變數初值; 布林運算式 ; 增量運算) { : 一般指令; : }
    Thumbnail
    巢狀迴圈For loop介紹結構及範例說明 巢狀迴圈 巢狀迴圈是在一個迴圈內包含另一個迴圈的結構 簡單來說,就是內迴圈做完,才會在跑到外迴圈,接著在做內迴圈
    Thumbnail
    徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
    Thumbnail
    隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
    Thumbnail
    這篇內容,將會講解什麼是「repeat迴圈」,以及與「repeat迴圈」相關的知識。包括repeat迴圈的簡介、break、continue。
    Thumbnail
    這篇內容,將會講解什麼是「while迴圈」,以及與「while迴圈」相關的知識。包括while迴圈的簡介、while迴圈、break、continue。
    Thumbnail
    此章節的目的是介紹Java程式語言中的流程控制結構,包括條件語句(if, else if, else)、三元運算子、switch語句,以及各種迴圈(for, foreach, while)。同時,也解釋了如何在迴圈中使用控制語句來改變程式的執行流程。每種主題都配有示例程式碼以幫助理解。
    Thumbnail
    本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
    Thumbnail
    for loop、while loop、repeat
    Thumbnail
    本章節主要介紹了JavaScript中的流程控制,包括條件語句(如if、else if、else和三元運算子)和循環結構(如for迴圈、while迴圈等)。同時,也提供了如何使用break、continue和label來控制迴圈的執行。
    Thumbnail
    分享在網路上看到的陣列題目。通常 for...of 的 value 是陣列中的每個值,那如果我們在迭代中對陣列操作會發生什麼事? 題目來源:https://x.com/_jayphelps/status/1774640511158022335?s=20
    Thumbnail
    for,while,do while語法介紹 for loop for比較偏向固定圈數型的迴圈 語法 for(計數變數初值; 布林運算式 ; 增量運算) { : 一般指令; : }
    Thumbnail
    巢狀迴圈For loop介紹結構及範例說明 巢狀迴圈 巢狀迴圈是在一個迴圈內包含另一個迴圈的結構 簡單來說,就是內迴圈做完,才會在跑到外迴圈,接著在做內迴圈