当前位置:首页 > 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实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…

js实现按钮点击

js实现按钮点击

实现按钮点击的JavaScript方法 HTML按钮元素 在HTML中创建按钮元素,为其添加id或class以便JavaScript选择: <button id="myButton">点…

js 实现页面刷新

js 实现页面刷新

使用 location.reload() location.reload() 是原生 JavaScript 提供的页面刷新方法。调用该方法会重新加载当前页面,相当于点击浏览器的刷新按钮。 // 基本…

js实现vue模板

js实现vue模板

使用纯 JavaScript 实现 Vue 模板功能 要实现类似 Vue 的模板功能,可以通过以下步骤完成: 1. 数据绑定与响应式更新 通过 Object.defineProperty 或 Pr…