增强 JavaScript 代码:使用对象代替 Switch 语句

增强 javascript 代码:使用对象代替 switch 语句

引言

本文探讨一种替代 JavaScript 中 switch 语句的简洁方法:使用对象。虽然并非所有场景都适用,但在处理多种情况时,这种方法能提升代码的可读性和可维护性。

示例:订单付款状态处理

假设我们需要处理不同付款状态的订单,并根据状态执行不同的操作。

立即学习“Java免费学习笔记(深入)”;

首先,来看一个简单的例子:

const orders = [{  "id": 1,  "product": "shoes",  "paymentstatus": "paid"},{  "id": 2,  "product": "pants",  "paymentstatus": "pending"},{  "id": 3,  "product": "tie",  "paymentstatus": "unpaid"}];const handlepaymentstatus =(order) =>{  return order.paymentstatus}for (const order of orders) { handlepaymentstatus(order)}

接下来,使用 switch 语句处理不同付款状态:

let orders = [{  "id": 1,  "product": "shoes",  "paymentstatus": "paid"},{  "id": 2,  "product": "pants",  "paymentstatus": "pending"},{  "id": 3,  "product": "tie",  "paymentstatus": "unpaid"}];const handlepaymentstatus =(order) =>{switch (order.paymentstatus) {  case 'paid':    console.log("it's all good");    break;  case 'unpaid':    console.log("need to be paid");    break;  default:    console.log(`we'll wait`);}}for (const order of orders) { handlepaymentstatus(order)}

当状态数量较多时,switch 语句会变得冗长。 我们可以用对象来简化:

let orders = [{  "id": 1,  "product": "shoes",  "paymentStatus": "Paid"},{  "id": 3,  "product": "tie",  "paymentStatus": "Unpaid"},{  "id": 2,  "product": "pants",  "paymentStatus": "Pending"},];const paymentStatusHandlers = {  'Paid': () =>  console.log("it's all good"),  'Unpaid': () => console.log("needs to be paid"),}for (const order of orders) { paymentStatusHandlers[order.paymentStatus]     ? paymentStatusHandlers[order.paymentStatus]()    : console.log("We'll wait")}

总结

通过使用对象映射不同的状态到对应的处理函数,代码更简洁易读。 这种方法尤其在处理大量状态时更有效,提升了代码的可维护性。 当然,这只是个人的偏好,但作为一种替代方案,值得考虑。

以上就是增强 JavaScript 代码:使用对象代替 Switch 语句的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1500679.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 22:46:07
下一篇 2025年12月14日 01:06:26

相关推荐

  • 如何通过 API 使用 AI 与 PDF 聊天

    本教程演示如何利用easy-peasy.ai平台的ai聊天机器人api,通过上传pdf(或其他文档格式)实现与文档交互。我们将逐步指导您创建机器人、上传文档、测试机器人知识以及api集成。 为何选择AI与PDF交互? 告别手动搜索冗长PDF文档信息的日子!AI聊天机器人让您轻松上传文档、提问,并快速…

    2025年12月19日 好文分享
    000
  • 可用于 Web 应用程序的动画库

    动画库速览:七款javascript动画工具推荐 本文将介绍七款常用的JavaScript动画库,它们各有特色,能满足不同Web开发动画需求。 GreenSock动画平台 (GSAP) GSAP是一个功能强大的JavaScript库,用于创建各种Web动画。它支持SVG、UI元素、文本和WebGL动…

    2025年12月19日 好文分享
    000
  • 细雨 ORM 速成课程

    介绍 drizzle orm 是一个简单、轻量级的 typescript orm。它被设计为易于使用且易于理解。它设计用于与 mysql 数据库一起使用,但可以轻松扩展以与其他数据库一起使用。 开始使用 drizzle orm 支持 postgresql、mysql 和 sqlite。本指南将重点介…

    好文分享 2025年12月19日
    000
  • 使用 React 和 TailwindCSS 重新创建 Interswitch 主页

    项目概述 构建一个现代且美观的登录页面始终是一项极具挑战性的任务。本项目使用 React 和 Tailwind CSS 重新创建了 Interswitch 的主页,旨在提供一个技术演练,涵盖从项目设置到可重用组件实现和样式化的整个过程。 Vite 项目搭建 鉴于其极快的构建速度和简易性,Vite 被…

    2025年12月19日
    000
  • JavaScript 提升

    JavaScript 中的变量和函数声明会发生“提升”(hoisting)。这意味着声明会被移动到作用域的顶部,即使它们在代码中实际出现的位置更靠后。但这只影响声明本身,而不影响赋值。 JavaScript 的提升分为两种类型: 函数提升 (Function Hoisting): 使用 functi…

    2025年12月19日
    000
  • 我的 Nextjs 学习之旅:构建真实项目

    大家好!我将分享我的 Next.js 学习心得,并对比它与 React.js 的差异。目前我正处于学习阶段,并着手构建一些有趣的项目,希望能为其他学习者提供一些参考。 为何从 React 转向 Next.js? 我最初使用 React,但希望项目拥有更多内置功能。Next.js 吸引我的地方在于它似…

    2025年12月19日
    000
  • 您知道《神奇宝贝》对网络可访问性做出了贡献吗?

    1997年12月16日,《神奇宝贝》第38集“电力兵Porygon”在日本播出,引发了一场意外事件。剧中,小智和皮卡丘与Porygon对战时产生的强烈闪光,导致700多名观众,大部分是儿童,出现不适需就医。 事件始末: 部分观众患有光敏性癫痫,这是一种罕见的由视觉刺激诱发的癫痫类型。 许多患者对此并…

    2025年12月19日
    000
  • 在 React 和 React Native 中为正则表达式验证创建自定义输入

    表单验证是确保用户输入符合特定规范的关键步骤。本文将通过React和React Native中的正则表达式验证,构建可复用的自定义输入组件,并以电话号码、信用卡和CVC码为例进行说明。 目录 为什么需要自定义输入组件?开始之前自定义输入组件使用Zod进行正则表达式验证构建表单总结 链接 源代码在线演…

    2025年12月19日
    000
  • 蹄它

    代码来临 2024 年第 10 天 第 1 部分 初探恐惧,继而兴奋 我习惯于先快速浏览一遍,再仔细阅读。 今天,我看到: 网格以及看似路径的元素 我担心这会是另一个最短路径难题。 然后我读懂了题意。 松了口气……至少第一部分是这样。 我需要找到所有有效的路径。 这……我能做到! 从 0 开始 我必…

    2025年12月19日
    000
  • “漏洞”真相:理解 JavaScript 的稀疏数组和意外行为

    最近在复习数据结构与算法,特别是排序算法时,遇到一个有趣的问题:如何生成长度为n的随机数组来测试排序算法?看似简单,但使用new Array(n)却引发了意想不到的结果。 通常我们会这样生成随机数组: function randomarray(n) { const arrtoreturn = [];…

    2025年12月19日
    000
  • JavaScript 开发人员的基本设计模式:提高您的编码掌握程度

    七大JavaScript设计模式:编写更优秀代码的秘诀 在动态的软件开发领域,熟练掌握设计模式对于构建可扩展、易维护、高效的代码至关重要。无论项目规模大小,设计模式都能为常见问题提供行之有效的解决方案。本文将深入探讨七种JavaScript核心设计模式,并辅以实例代码,助您提升编码水平。 1. 单例…

    2025年12月19日
    000
  • Shadow DOM 完美版:体验怪物的力量

    shadow dom:构建现代化、高性能web组件的关键 Shadow DOM是现代HTML引擎中一项令人振奋的特性,它能够更好地封装和保护组件的内部实现细节,从而提升代码的可维护性和整洁度。我们坚信其重要性,并将其作为构建JavaScript库的核心原则。 我们的库基于此原则,提供一系列功能强大的…

    2025年12月19日
    000
  • Nodejs 现在支持 TypeScript、JavaScript 新星报告已发布、新的开发人员工具等等

    大家好,JavaScript爱好者们! 欢迎来到本周的“JavaScript周刊”! 本周有哪些亮点呢? Node.js原生支持TypeScript,Shadcn/ui在JavaScript新星中脱颖而出,我们还有新的导入属性,以及2025年开发者必须掌握的工具! 立即学习“Java免费学习笔记(深…

    2025年12月19日
    000
  • 如何使用 JavaScript 地图 – .map()

    从经典的 for 循环到 forEach() 方法,JavaScript 中使用了各种技术和方法来迭代数据集。最流行的方法之一是 .map() 方法。 .map() 通过对父数组中的每个项目调用特定函数来创建数组。 .map() 是一种非变异方法,它创建一个新的 js 数组,而不是变异方法,后者仅对…

    2025年12月19日
    000
  • 如何在 Nextjs 中创建和使用 REST API

    next.js 以其服务器端渲染和静态站点生成功能而闻名,但它还允许您使用服务器端功能(包括 api)构建成熟的应用程序。使用 next.js,您可以直接在框架本身内轻松创建 rest api,它可以由您的前端应用程序或任何外部服务使用。 在这篇博文中,我们将介绍如何在 next.js 中创建简单的…

    好文分享 2025年12月19日
    000
  • Transducer:强大的函数组合模式

    别名:: transducer:强大的函数组合模式笔记本:: transducer: 一种强大的函数组合模式 地图和过滤器 map 的作用是对集合中的每个元素应用一个转换函数。 const list = [1, 2, 3, 4, 5];list.map(x => x + 1);// [2, 3…

    2025年12月19日
    000
  • 您可以在一天内构建一个 Android 应用程序吗?一年开发者的观点

    十年Android开发经验,让我见证了技术潮流的变迁、库的兴衰以及无数代码的编写与重构。一个常被问及,特别是来自新手的疑问是:“一天内能开发一个Android应用吗?” 答案是:视情况而定。 让我们具体分析一下。 应用类型决定一切 简单的“Hello, World”程序?没问题,几分钟搞定。但复杂的…

    2025年12月19日
    000
  • 定制软件开发服务终极指南

    在当今竞争激烈的商业环境中,企业需要量身定制的软件解决方案来应对独特的挑战。这就是定制软件开发的价值所在。与通用软件不同,定制软件直接针对您的业务需求,提供更高的灵活性和效率。本文将深入探讨定制软件开发,以及它如何助力您的业务发展。 什么是定制软件开发? 定制软件开发是指为满足特定企业需求而设计、构…

    2025年12月19日
    000
  • 使用 next-api-gen 简化 Nextjs 中的 API 路由

    在 Next.js 中构建 API 路由,尤其使用 App Router 时,常常繁琐且重复。开发者们深知一遍遍编写模板代码的痛苦,以及由此可能引入错误或不一致的风险。为此,我创建了 next-api-gen,一个旨在简化这一流程的 CLI 工具。 本文将介绍 next-api-gen 的功能,并邀…

    2025年12月19日
    000
  • 使用样本收据打印 HTML 最佳技术

    本文分享使用 JavaScript 和 Tailwind CSS 打印发票的最佳实践,总结了多次尝试后的经验。 Tailwind CSS 配置 (可选) 若使用 Tailwind CSS 设计发票样式,建议配置如下,以便使用 print 和 screen 前缀来控制不同媒体下的显示内容: /** @…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信