js 中的switch表达式使用示例

当我们需要根据不同的条件执行不同的代码块时，使用 switch 语句是一种比较方便的选择。在 JavaScript 中，switch 表达式使用示例如下：

switch 语句的结构

switch (表达式) {
  case 标签1:
    执行代码块 1;
    break;
  case 标签2:
    执行代码块 2;
    break;
  ...
  default:
    执行代码块 n;
}

switch 语句由一个表达式和多个 case 分支以及一个可选的 default 分支组成。在代码执行时，表达式会被求值，然后将其与每个 case 分支的标签进行比较，匹配成功后便会执行对应的代码块。如果匹配不成功，则会执行 default 分支的代码块。

break 语句用于跳出 switch 语句，在执行完对应的代码块后，程序会跳出 switch 语句而不会继续向下执行。

示例一

假设我们需要根据用户输入的数字执行不同的操作，我们可以使用 switch 语句来实现：

const num = parseInt(prompt("请输入一个数字"));
switch (num) {
  case 1:
    alert("您输入的是1");
    break;
  case 2:
    alert("您输入的是2");
    break;
  case 3:
    alert("您输入的是3");
    break;
  default:
    alert("您输入的不是1、2、3，我无法识别");
}

在上面的示例中，用户可以输入一个数字，并根据不同的情况弹出不同的提示框。如果用户输入的不是 1、2、3 中的任何一个数字，则会弹出一个默认的提示框。

示例二

我们也可以根据不同的条件执行不同的函数。比如，在一个购物网站上，根据不同的环境主要颜色来修改页面背景色：

<button onclick="changeBgColor('light')">切换到浅色主题</button>
<button onclick="changeBgColor('dark')">切换到深色主题</button>

function changeBgColor(theme) {
  switch (theme) {
    case "light":
      document.body.style.backgroundColor = "#fff";
      break;
    case "dark":
      document.body.style.backgroundColor = "#333";
      break;
    default:
      document.body.style.backgroundColor = "#fff";
  }
}

在上面的示例中，我们可以通过点击不同的按钮来改变页面的背景色。如果用户选择了不认识的主题，则默认会设置为浅色主题。

以上是 js 中 switch 表达式的使用示例攻略，希望对大家有所帮助！