当前位置:首页 > JavaScript

js 实现switch

2026-03-02 07:12:46JavaScript

实现 switch 语句的基本语法

在 JavaScript 中,switch 语句用于根据不同的条件执行不同的代码块。其基本语法如下:

switch (expression) {
  case value1:
    // 当 expression 等于 value1 时执行的代码
    break;
  case value2:
    // 当 expression 等于 value2 时执行的代码
    break;
  default:
    // 当 expression 不匹配任何 case 时执行的代码
}

使用 break 防止穿透

break 关键字用于终止当前 case 的执行,防止代码继续执行下一个 case(即“穿透”)。如果省略 break,程序会继续执行后续 case 的代码,直到遇到 breakswitch 结束。

let day = 3;
switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  default:
    console.log("Invalid day");
}
// 输出:Wednesday

多个 case 共享同一段代码

如果有多个 case 需要执行相同的逻辑,可以省略 break 让代码穿透到下一个 case

let fruit = "apple";
switch (fruit) {
  case "apple":
  case "banana":
    console.log("This is a fruit.");
    break;
  case "carrot":
    console.log("This is a vegetable.");
    break;
  default:
    console.log("Unknown food.");
}
// 输出:This is a fruit.

使用 default 处理未匹配的情况

default 语句是可选的,用于处理 expression 不匹配任何 case 的情况:

let grade = "B";
switch (grade) {
  case "A":
    console.log("Excellent");
    break;
  case "B":
    console.log("Good");
    break;
  case "C":
    console.log("Average");
    break;
  default:
    console.log("Invalid grade");
}
// 输出:Good

严格类型比较

switch 使用严格相等比较(===),因此 case 的值必须与 expression 的类型和值完全匹配:

let num = "1";
switch (num) {
  case 1:
    console.log("Number 1");
    break;
  case "1":
    console.log("String '1'");
    break;
  default:
    console.log("No match");
}
// 输出:String '1'

替代 if-else 的优化方式

switch 适用于多个固定值的条件判断,比 if-else 更清晰:

js 实现switch

let color = "red";
if (color === "red") {
  console.log("Stop");
} else if (color === "yellow") {
  console.log("Wait");
} else if (color === "green") {
  console.log("Go");
} else {
  console.log("Invalid color");
}

// 等效的 switch 写法
switch (color) {
  case "red":
    console.log("Stop");
    break;
  case "yellow":
    console.log("Wait");
    break;
  case "green":
    console.log("Go");
    break;
  default:
    console.log("Invalid color");
}
// 输出:Stop

标签: jsswitch
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…