当前位置:首页 > 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实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js实现验证码

js实现验证码

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

js实现验证

js实现验证

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

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数: fun…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…