前端switch全解析

一、前端switch的用法

Switch語句是在代碼中基於表達式的值將控制權轉移到不同的代碼塊的一種方式。如果你希望在特定的表達式為真時執行一組語句，那麼使用 Switch 語句會更好。在 JavaScript 中，Switch 語句可以代替多個 if 語句。

switch(expression) {
  case n:
    code block
    break;
  case n:
    code block
    break;
  default:
    default code block
}

在這個語句中，expression 會被評估，然後與每個 case 的值進行對比。如果匹配任意一個，與該 case 關聯的代碼塊會被作為 JavaScript 指令來執行。

二、前端switch case語句的用法

Switch 語句的 case 語句與值為 expression 的 switch 語句關聯。case 語句內置了表達式，這個表達式將會被與 switch 表達式進行比較。如果匹配成功，與 case 關聯的代碼塊將作為 JavaScript 指令來執行。

switch(expression) {
  case n:
    code block
    break; // 可選
  case n:
    code block
    break; // 可選
  default:
    default code block
}

你可以使用如下的情況來使用 case 語句：

• 當你需要相對於不同值執行不同代碼時
• 當你需要執行陳述多個操作的代碼塊時（可以使用來自不同地址的多個語志運算符）。

三、前端switch語句判斷範圍

Switch 語句是通過比較表達式和值的結果來判斷對象是否相等的。相等的結果是在 typeof 值相同的情況下返回 true，或者在相等的情況下使用強制比較.

switch(1) {
  case true:
    // never reached
    [break;]
  case false:
    // never reached
    [break;]
  default:
    // always executed
    [break;]
}

四、前端switch寫法

Switch 語句如下所示，可以選擇是否需要在每個 case 語句結束後使用一個 break 語句。如果沒有對一個 case 語句使用 break 語句，JavaScript 會繼續在執行下一個 case 語句，直到結束該 switch 語句。如果得到期望的輸出，必須在 switch 語句上使用 break 語句。

switch (expression) {
  case value1:
    // 第一種情況
    break;
  case value2:
    // 第二種情況
    break;
  ...
  case valueN:
    // 必須包含要執行的代碼
    break;
  default:
    // 當沒有被 case 語句匹配時要執行的內容
    break;
}

五、前端switch case怎麼用

下面是一個可以將星期轉換為相應的數字的簡單示例：

var day = 4;
switch (day) {
  case 0:
    document.write("Today is Sunday");
    break;
  case 1:
    document.write("Today is Monday");
    break;
  case 2:
    document.write("Today is Tuesday");
    break;
  case 3:
    document.write("Today is Wednesday");
    break;
  case 4:
    document.write("Today is Thursday");
    break;
  case 5:
    document.write("Today is Friday");
    break;
  case 6:
    document.write("Today is Saturday");
    break;
  default:
    document.write("Invalid day");
}

結果將是 “Today is Thursday”。

六、前端switch開關怎麼用

Switch 開關可以在一組選項之間進行切換。可使用以下代碼：

switchBtn.addEventListener("click", function(){
  switchDemo.classList.toggle("on");
});

在這個示例中，我們使用了 toggle 方法，可以在開關之間進行切換。當開關處於關閉狀態，它將切換到打開狀態（添加 “on” 類），當它處於打開狀態時，它將切換到關閉狀態（刪除 “on” 類）。

七、前端switchTab作用

Switch Tab 可以用於實現類似 Tab 的數據導航。在以下示例中，我們使用了單個列表元素，以實現簡單的 Tabs。當單個元素被單擊時，對應的數據顯示在頁面上：

var tabs = document.querySelectorAll(".tab");
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function() {
    var id = this.getAttribute("data-tab");
    var tab = document.querySelector("#" + id);
    var activeTab = document.querySelector(".active");
    activeTab.classList.remove("active");
    tab.classList.add("active");
    });
}

八、js switch

在 JavaScript 中，Switch 語句用於選擇執行代碼塊。如果您想要執行一組語句，而這些語句是基於特定的表達式值匹配而進行選擇的，那麼使用 switch 語句是更好的選擇。在 JavaScript 中，switch 語句可以代替多個 if 語句。

switch(expression) {
  case n:
    code block
    break;
  case n:
    code block
    break;
  default:
    default code block
}

在這個語句中，expression 會被評估。然後分別與 case 的值進行比較。如果其中任何一個與表達式的值匹配，則與該 case 關聯的代碼塊將被作為 JavaScript 指令來執行。如果沒有選項與該表達式匹配，則表達式進入到 default 代碼塊中。

九、js switch語句

在 JavaScript 中，Switch 語句分為以下兩個部分：

• Case 語句
• Default 語句

Case 語句：

switch(expression) {
  case n:
    code block
    break;
  case n:
    code block
    break;
  default:
    default code block
}

Default 語句：

switch(expression) {
  case n:
    code block
    break;
  case n:
    code block
    break;
  default:
    default code block
}

在 default 語句中，可以選擇性地不設置任何值。

總結

本文詳細介紹了前端 switch 語句及其相關用法。介紹了 switch 語句的使用場景，case 語句的用法，switch 語句判斷範圍，switch 語句的寫法，switch case 的使用方法，switch 開關的使用方法，switch Tab 的作用以及 js switch 語句。希望對您有所幫助。