当前位置:首页 > 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轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

js实现滚动

js实现滚动

实现滚动效果的方法 在JavaScript中实现滚动效果可以通过多种方式完成,以下是一些常见的方法: 使用window.scrollTo() window.scrollTo()方法可以将页面滚动到指…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…

js 实现递归

js 实现递归

递归的基本概念 递归是指函数直接或间接调用自身的过程。在JavaScript中,递归通常用于解决可以分解为相似子问题的问题,如阶乘、斐波那契数列、树形结构遍历等。 递归的实现要点 基线条件(Base…