Web開發學習筆記05 — for Loop、while Loop & 遍歷陣列、物件


Posted by Teagan Hsu on 2020-11-09

當我們要重複執行一個語句時,可使用迴圈(Loop)來幫助我們快速又簡潔地重複做某件事。

for Loop語句

for ([initialExpression]; [condition]; [incrementExpression]){
  statement
}
  • initialExpression: 初始式
  • condition: 條件式
  • incrementExpression: 更新表達式,可以解釋為結束迴圈後的變動

簡單的For Loop範例

for (var i = 0; i<5; i++){
  console.log(i);
}
//0
//1
//2
//3
//4

詳細解說:一開始的初始值i是0,當i<5符合條件時,會執行console.log(i)
之後在執行i++(incrementExpression)重複迴圈,直到i<5為false時停止迴圈。

無窮迴圈

有些時候沒設定好條件式(condition)容易造成迴圈無窮執行,無法跳出語句造成瀏覽器當掉,因此需多加注意條件式(condition)的設定。

for (var i = 0; i<5; i--){
  console.log(i);
}

此語句會造成i一直小於5,因此會不斷無窮迴圈。

while Loop語句

while Loop語句看起來比for Loop語句簡單一點,當條件符合時 (結果為 true) ,就會執行大括號 { } 區塊內的陳述式(statement),通常使用在不知道明確要迴圈的次數時使用。

while (condition){
  statement
}

簡單的while Loop範例

一開始的初始值n等於0,當n < 3符合條件時,會執行console.log("n is "+ n),之後再執行n++(incrementExpression)重複迴圈,直到n < 3為false時。

var n = 0;
while (n < 3){
  console.log("n is " + n); n++;
}
//n is 0
//n is 1
//n is 2

do…while語句

do…while語句為while loop的變形版本,差別在於do…while語句會先執行區塊中的語句,再進行條件判斷。

do {
  statement
} while (condition)

遍歷方法

以下會介紹幾種遍歷字串、陣列與物件的方法。

for of語句

for of可以幫助我們在可遍歷的物件(iterable objects)上輸出其中的值(value),諸如陣列(array)、字串(string)等。

for (variable of iterable) {
  statement
}

使用for of遍歷字串

let str = "happy";
for (let value of str){
  console.log(value)
}

//h
//a
//p
//p
//y

使用for Loop / for of遍歷陣列

使用以下為範例操作:

let weather = [
    ['rain', 'drizzle'],
    ['storm', 'thunder', 'lightning'],
    ['snow', 'snowstorm']
]

for Loop

使用for Loop來操作,會稍稍複雜一些,且會建立ij這些易讀性低的變數。

for (var i = 0; i < weather.length; i++) {
    const row = weather[i];
    for (var j = 0; j < row.length; j++) {
        console.log(row[j])
    };
}

//rain
//drizzle
//storm
//thunder
//lightning
//snow
//snowstorm

for of

相較於for Loop,使用for of較簡單好讀。

for (let row of weather) {
    for (let eachRow of row) {
        console.log(eachRow)
    }
}
//rain
//drizzle
//storm
//thunder
//lightning
//snow
//snowstorm

使用for of 遍歷物件屬性

使用以下為範例操作:

let students = {
    'Denis Wardle': 100,
    'Kavan Hernandez': 90,
    'Lisa Donovan': 80,
    'Ahyan Huerta': 70,
    'Darlene Nava': 60
}

方法1: 可以使用Object.key()先將物件的key找出,再用key去找出對應的value值。

for (let person of Object.keys(students)){
  console.log(`${person} scored ${students[person]}`);
}
//Denis Wardle scored 100
//Kavan Hernandez scored 90
//Lisa Donovan scored 80
//Ahyan Huerta scored 70
//Darlene Nava scored 60

方法2: 比較聰明簡單的做法,使用Object.entries()可讓程式返回[key, value]給我們。

for (let[key, value] of Object.entries(students)){
console.log(`${key} scored ${value}`);
}
//Denis Wardle scored 100
//Kavan Hernandez scored 90
//Lisa Donovan scored 80
//Ahyan Huerta scored 70
//Darlene Nava scored 60

使用for in 遍歷物件屬性

for (let person in students) {
    console.log(`${person} scored ${students[person]}`);
}
//Denis Wardle scored 100
//Kavan Hernandez scored 90
//Lisa Donovan scored 80
//Ahyan Huerta scored 70
//Darlene Nava scored 60

有關Object.entries()詳細語法請參考:Object.entries() — MDN Web Docs


參考資料:
迴圈 — 從ES6開始的JavaScript學習生活
JavaScript Loops - tutorialrepublic
JS-for...in與for...of的差別 - Kanboo Notes
JavaScript 容易混淆的遍歷方法 - Roya's Blog


#For Loop #While Loop #javascript #Loop #for of #for in #遍歷







Related Posts

讀書筆記-版本控制使用Git: Stash(暫存)

讀書筆記-版本控制使用Git: Stash(暫存)

【JS上課筆記】JavaScript 物件導向:建構式、class、原型鏈

【JS上課筆記】JavaScript 物件導向:建構式、class、原型鏈

Leetcode 1. Two sum

Leetcode 1. Two sum


Comments