当前位置:首页 > JavaScript

js实现switch

2026-04-06 19:39:22JavaScript

实现基本的 switch 语句

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

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

使用 break 防止穿透

break 关键字用于阻止 switch 语句继续执行下一个 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");
}

利用穿透特性实现多条件匹配

有时可以利用 switch 的穿透特性,让多个 case 共享同一段代码:

js实现switch

let fruit = "apple";
switch (fruit) {
  case "apple":
  case "banana":
    console.log("This is a common fruit");
    break;
  case "kiwi":
    console.log("This is an exotic fruit");
    break;
  default:
    console.log("Unknown fruit");
}

使用严格比较

switch 语句使用严格比较(===),因此值和类型都必须匹配:

let num = "1";
switch (num) {
  case 1:
    console.log("Number 1");  // 不会执行,因为类型不匹配
    break;
  case "1":
    console.log("String '1'");  // 会执行
    break;
}

在 switch 中使用表达式

可以在 case 中使用表达式,但需要确保表达式是常量或可以在编译时确定:

js实现switch

let score = 85;
switch (true) {
  case score >= 90:
    console.log("A");
    break;
  case score >= 80:
    console.log("B");
    break;
  case score >= 70:
    console.log("C");
    break;
  default:
    console.log("D");
}

替代方案:对象字面量

对于简单的条件匹配,可以使用对象字面量作为 switch 的替代方案:

const dayMap = {
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday"
};

let day = 2;
console.log(dayMap[day] || "Invalid day");

替代方案:Map 对象

对于更复杂的情况,可以使用 Map 对象:

const fruitMap = new Map([
  ["apple", "Common fruit"],
  ["banana", "Common fruit"],
  ["kiwi", "Exotic fruit"]
]);

let fruit = "kiwi";
console.log(fruitMap.get(fruit) || "Unknown fruit");

标签: jsswitch
分享给朋友:

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…

js实现自举

js实现自举

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

js验证码的实现

js验证码的实现

验证码的基本实现原理 验证码(CAPTCHA)的核心目标是区分人类用户和自动化程序。JavaScript可用于生成或验证客户端验证码,但需注意纯前端验证可能被绕过,通常需结合后端验证。 纯前端验证码…

js 实现全屏

js 实现全屏

使用 requestFullscreen 方法 通过调用元素的 requestFullscreen 方法可以实现全屏。该方法兼容现代浏览器,但不同浏览器可能需要前缀。 const element =…