当前位置:首页 > JavaScript

js 实现switch

2026-01-31 16:05:52JavaScript

实现 JavaScript 的 switch 语句

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

switch (expression) {
  case value1:
    // 代码块 1
    break;
  case value2:
    // 代码块 2
    break;
  default:
    // 默认代码块
}

基本用法

switch 语句评估一个表达式,并将其值与 case 子句中的值进行比较。如果找到匹配项,则执行相应的代码块。如果没有匹配项,则执行 default 块(如果有)。

js 实现switch

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = 'Monday';
    break;
  case 2:
    dayName = 'Tuesday';
    break;
  case 3:
    dayName = 'Wednesday';
    break;
  default:
    dayName = 'Unknown';
}

console.log(dayName); // 输出: Wednesday

多个 case 共享代码块

多个 case 可以共享同一个代码块,只需将它们列在一起即可。

let fruit = 'apple';
let message;

switch (fruit) {
  case 'apple':
  case 'banana':
    message = 'This is a common fruit';
    break;
  case 'kiwi':
    message = 'This is an exotic fruit';
    break;
  default:
    message = 'Unknown fruit';
}

console.log(message); // 输出: This is a common fruit

使用严格比较

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

js 实现switch

let value = '1';

switch (value) {
  case 1:
    console.log('Number 1');
    break;
  case '1':
    console.log('String "1"');
    break;
  default:
    console.log('Unknown');
}

// 输出: String "1"

避免忘记 break

如果忘记使用 break,代码会继续执行下一个 case,直到遇到 breakswitch 结束。

let num = 2;

switch (num) {
  case 1:
    console.log('One');
  case 2:
    console.log('Two');
  case 3:
    console.log('Three');
}

// 输出:
// Two
// Three

使用对象替代 switch

对于更复杂的逻辑,可以使用对象来替代 switch 语句,这种方式更灵活且易于维护。

const actions = {
  'add': (a, b) => a + b,
  'subtract': (a, b) => a - b,
  'multiply': (a, b) => a * b,
  'divide': (a, b) => a / b,
};

const operation = 'add';
const result = actions[operation]?.(2, 3) ?? 'Unknown operation';

console.log(result); // 输出: 5

标签: jsswitch
分享给朋友:

相关文章

js实现日历

js实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前年…

js实现验证

js实现验证

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

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…