iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
Modern Web

Web互動式網頁系列 第 19

DAY19 JavaScript流程控制

  • 分享至 

  • xImage
  •  

今天就來介紹一下JS是如何根據條件執行不同的操作或者多次執行相同操作的吧!

  1. 條件語句(ifelse
  2. 迴圈語句(forwhile
  3. 以及其他流程控制結構的基本概念。

條件語句(if、else)

基於不同的條件執行不同的程式碼區塊。

  • if語句
if (條件) {
  // 當條件為真時執行程式碼
} else {
  // 當條件為假時執行程式碼
}

範例:

let age = 18;

if (age >= 18) {
  console.log("你已成年");
} else {
  console.log("你未成年");
}
  • else if語句
    使用else if來添加多個不同的檢查條件。
if (條件1) {
  // 當條件1為真時執行程式碼
} else if (條件2) {
  // 當條件2為真時執行程式碼
} else {
  // 當以上條件都不滿足時執行程式碼
}

範例:

let score = 85;

if (score >= 90) {
  console.log("優秀");
} else if (score >= 70) {
  console.log("良好");
} else {
  console.log("及格");
}

迴圈(for、while)

用於多次執行相同程式碼的結構。

  • for迴圈
    用於已知迭代次數的情況,通常與數組一起使用。
for (初始化; 條件; 增量) {
  // 在每次迭代中執行的代碼
}

範例:

for (let i = 0; i < 5; i++) {
  console.log(i);
}
  • while迴圈
    用於在條件為真時重複執行程式碼,通常在不知道迭代次數的情況下使用。
while (條件) {
  // 當條件為真時執行的程式碼
}

範例:

let count = 0;

while (count < 3) {
  console.log(count);
  count++;
}

其他流程控制結構

  • 用於多路分支的switch
switch (表達式) {
  case 值1:
    // 當表達式等於值1時執行程式碼
    break;
  case 值2:
    // 當表達式等於值2時執行程式碼
    break;
  default:
    // 當表達式不等於任何已知值時執行程式碼
}
  • 用於控制迴圈執行流程的breakcontinue
// break用於結束迴圈或switch內的的判斷執行

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break;
  }
  console.log(i);
}

// continue用於跳過當前迴圈的剩餘程式碼,進行下一次迴圈
for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  if (i > 4) {
    break;
  }
  console.log(i);
}

今天先介紹到這邊,感謝觀看!


上一篇
DAY18 JavaScript基本語法
下一篇
DAY20 JavaScript函數
系列文
Web互動式網頁30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言