Javascript自學筆記 (4)

Benjamin · 2020年10月06日03:45

流程控制

所謂流程控制就是指：if, else, for loop, while loop, switch

if 選擇敘述
1.1 if/else
1.2 if/else 巢狀
switch/case 選擇敘述
for 迴圈
for/in 迴圈
for/of 迴圈 (ES6)
while 迴圈
do/while 迴圈

區塊陳述式

區塊陳述用來組合零個或多個陳述。我們使用一對大括號 { } 以界定區塊。

{
  陳述_1
  陳述_2
  ...
  陳述_n
}

`let` 和 `const`

當使用let或是const進行宣告時，其存取範圍是只有本身定義的區塊中。

let x = 1;
{
  let x = 2;
}
console.log(x); // logs 1

`function`

當function被呼叫時，會建立此function的Execution Context，因此在function區塊使用var整個function區塊中都可對其進行存取。

function foo() {
    {
        var a = 'var';
        {
            let a = 'let';
            console.log(a);  // let
        }
    }
    console.log(a);  // var
}
foo();

條件陳述式 - if…else 陳述式

在「邏輯判斷爲真」下執行接下來的㇐個陳述式
選擇性的 else 陳述式將會在「邏輯判斷爲否」時被執行
藉由 else if 來使用複合的陳述式

if 陳述式的用法

if (指定條件1) {
    陳述式 1;
} else if (指定條件 2) {
    陳述式 2;
} else {
    最後陳述式;
}

下列的值會被看作 `false`

false
undefined
null
0
NaN
空字串(“”)

條件陳述式 - switch 陳述式

switch 語句 會比對一個表達式裡頭的值是否符合 case 條件，然後執行跟這個條件相關的陳述式, 以及此一符合條件以外，剩下其他條件裡的陳述式。

允許程式依運算式的不同值來選擇不同標籤(case子句)
如果沒有找到匹配的標籤，程序將查找 default 子句(選擇性)
與每個 case 子句相關聯的 break 陳述式（選擇性）確保程序在發現匹配的陳述式之後退出 switch

var fruittype = 'Bananas';
switch (fruittype) {
    case "Apples":
        console.log("Apples are $0.32 a pound.");
        break;
    case "Bananas":
        console.log("Bananas are $0.48 a pound.");
        break;
    case "Papayas":
        console.log("Papayas $2.79 a pound.");
        break;
    default:
        console.log("Sorry, we are out of " + fruittype + ".");
}

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    // expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

迴圈

for 陳述式

var step;
for (step = 0; step < 5; step++) {
  // 執行五次：從step為0到4
  console.log('Walking east one step');
}

<style>
    #rect {
        position: relative;
        width: 800px;
        height: 600px;
        background-color: #b0e9ff;
    }

    .ball {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #ff2f27;
        border-radius: 50%;
        color: white;
        line-height: 40px;
        text-align: center;
    }
</style>

<div id="rect"></div>
<script>
    const rect = document.querySelector('#rect');
    let b, i;
    for (i = 0; i < 10; i++) {
        b = document.createElement('div');
        b.className = 'ball';
        b.innerHTML = i + 1;
        b.style.left = i * 50 + 'px';
        b.style.top = '100px';
        rect.appendChild(b);
    }
</script>

// 另一種作法
for(i=0; i<16; i++){ 
    let left=i*50, txt=i+1; rect.innerHTML +=`<div class="ball" style="left: ${left}px; top: 100px;">
    ${txt}</div>`;
}

// 巢狀迴圈
let b, i, k, n=1;
for(k=0; k<6; k++) { 
    for (i=0; i < 10; i++, n++) { 
        b=document.createElement('div'); 
        b.className='ball' ; 
        b.innerHTML=n;
        b.style.left=i * 50 + 'px' ; 
        b.style.top=k*60 + 'px' ; 
        rect.appendChild(b); 
    } 
}

// 6 個一列
const rect = document.querySelector('#rect');
let b, i;
for(i=0; i<13; i++){ 
    let left=(i%6)*50, 
        top=parseInt(i/6)*60, 
        txt=i+1; 
    rect.innerHTML +=`<div class="ball"
    style="left: ${left}px; top: ${top}px;">${txt}</div>`;
}

do…while 陳述式

先執行一次再說~ (至少會執行一次)

let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// expected result: "12345"

while 陳述式

let n = 0;

while (n < 3) {
  n++;
}

console.log(n);
// expected output: 3

break和continue

label 陳述式

也就是幫迴圈命名，提供㇐個有識別字的陳述式讓你能在程式的別的地方參考
語法

label:
    statement

舉例來說，命名此while迴圈為markLoop

markLoop:
    while (true) {
        doSomething();
    }

break 陳述式

語法：break [label];

Loop:
while (true) {
    while (true) {
        break Loop;
    }
}

以上範例使用兩層無限迴圈
單純使用break只能終止裡層的迴圈(外層依然無限迴圈)
加上label後可以指定要終止的迴圈(指定外層停止)

continue 陳述式

中斷此圈迴圈
在while 迴圈中，它會跳回條件式的判斷
在for迴圈中，它會跳至遞增陳述式

語法：continue; 與 continue label;

範例：在i等於3的時候中斷此圈迴圈，然後繼續執行下㇐圈

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

for/in 迴圈

for/in 列舉的變數，取得的是「屬性名稱」(類型為 String)

<div id="rect"></div>
<script>
    const rect = document.querySelector('#rect');
    let s;
    const person = {
        age: 30,
        name: 'david',
        gender: 'male',
    };
    for (s in person) {
        rect.innerHTML += `${s} : ${person[s]}<br>`;
    }
</script>

for/of 迴圈

for/of 用在可迭代的（iterable）物件上（例如 Array）
其變數可以一個、一個取得物件裡的元素
for/of 不能使用在 Object 上

<div id="rect"></div>
<script>
    const rect = document.querySelector('#rect');
    const ar = [12, 'abc', 77, -6];
    for (let v of ar) {
        rect.innerHTML += v + '<br>';
    }
</script>