当前位置: 首页 > news >正文

写点东西《Javascript switch 语句的替代方法》

写点东西《Javascript switch 语句的替代方法》

  • 那么 switch 语句有什么问题?
  • Object Literal 查找的替代方法
  • 将我们学到的东西变成一个实用函数
  • 您需要的一切都在一个地方# [](#javascript-version) Javascript 版本
  • Tyepscript version
  • 🌟更多精彩

在这里插入图片描述

本文扩展了 Todd Motto 关于用对象字面量替换 switch 语句的想法。这是过时、笨拙且冗长的 switch 语句的一种非常简洁美观的替代方法。在本文的最后,您将获得一个基于 Todd 解决方案的实用程序函数,该函数对开发人员更加友好,因此请坚持到最后!

如果您对技术细节不感兴趣,只想了解实用程序函数,请向下滚动到最后一节(您需要的一切都在一个地方)。

那么 switch 语句有什么问题?

虽然 switch 语句在某些情况下很有用,但许多人认为它不是 Javscript 最适合其用途的设计。它不如其他结构灵活、可读和可维护。

例如,对 switch 语句的主要批评之一是其贯穿行为。如果您忘记在 case 的末尾包含 break 语句,则控制权将贯穿到下一个 case ,从而导致意外行为,如下面的示例所示。这可能会使代码更容易出错且更难维护。

switch (fruit) {case 'apple':console.log('Apple selected');// Missing break statement, falls through to the next casecase 'orange':console.log('Orange selected');break;case 'banana':console.log('Banana selected');break;default:console.log('Unknown fruit');
}

在这个示例中,如果 fruit 为 'apple' ,则 "Apple selected""Orange selected" 都将被记录。

Object Literal 查找的替代方法

switch 语句相比,Object Literal 更灵活、更具表现力。

以下是如何使用它们仅返回 string 值。

const getDate (unit) {var date = {'year': '2024','month': 'January','day': '21','default': 'Default value'};return (date[unit] || date['default']);
}var month = getDate('month');
console.log(month); // January

有时我们需要编写更复杂的代码,而仅返回 string 是不够的。我们可以进一步改进上述代码,在其中使用函数而不是字符串,以便我们可以包含更复杂的代码。

const getDate (unit) {var date = {'year': () => {// do more complicated stuff here// just returning a string in this casereturn '2024';},'month': () => {return 'January';},'day': () => {return '21';},'default': () => {return 'Default value'}};// we return the Object literal's function invokedreturn (date[unit] || date['default'])();
}var month = getDate('month');
console.log(month); // January

但是如果我们想要一个贯穿行为呢?我们可以轻松地使用对象字面量来实现这一点,它更具可读性、声明性和更不易出错。它还不会涉及添加或删除 break ,而这是我们正在寻找的。

const getDayType (day) {const isWeekDay = () => {return 'Weekday';}const isWeekEnd = () => {return 'Weekend';}var days = {'monday': isWeekDay,'tuesday': isWeekDay,'wednesday': isWeekDay,'thursay': isWeekDay,'friday': isWeekDay,'saturday': isWeekEnd,'sunday': isWeekEnd,  'default': () => {return 'Default value'}};// we return the Object literal's function invoked  return (days[day] || days['default'])();
}var dayType = getDayType('sunday');
console.log(dayType); // WeekEnd

将我们学到的东西变成一个实用函数

既然我们已经学会了如何使用 Object Literal 而不是 switch ,那么让我们根据学到的知识构建一个实用函数,以进一步简化我们的生活。

我们称我们的函数为 switchCase 。它接收一个具有 2 个属性的对象: casesdefaultCase 。Cases 是将容纳我们案例的对象字面量,而 defaultCase 是…嗯,默认案例。

const switchCase = ({cases, defaultCase}) {}

switchCase 是一个返回回调函数的高阶函数。回调函数接收 switch 表达式。

const switchCase = ({cases, defaultCase}) {return (expression) => {}
}

现在,回调函数需要做的就是返回调用的对象字面量函数。

const switchCase = ({cases, defaultCase}) {return (expression) => {return (cases[expression] || defaultCase)();}
}

就是这样!现在让我们看一个如何使用它的示例。

let date = new Date()const today = switchCase({cases: {year: () => date.getFullYear(),month: () => date.getMonth() + 1,day: () => date.getDate()},defaultCase: () => date
})today('year') // current year
today('month') // current month
today('day') // current day
today('century') // default case - returns the current date Object

对于 typescript 用户,我们可以利用泛型来允许以后要调用该函数的用户指定他们希望对象字面量函数返回的类型。

type SwitchCase<T> = {cases: {[key: string]: () => T},defaultCase: () => T
} const switchCase = <T,>({cases, defaultCase}: SwitchCase<T>) => {return (expression: string) => {return (cases[expression] || defaultCase)()}
}

这就是我们如何使用它的方式。请注意,我们不必总是指定类型,因为 Typescript 会自动推断它,除非它是多个类型的联合,如下所示。

let date = new Date()const today = switchCase<number | Date>({cases: {year: () => date.getFullYear(),month: () => date.getMonth() + 1,day: () => date.getDate()},defaultCase: () => date
})today('year') // current year
today('month') // current month
today('day') // current day
today('century') // default case - returns the current date Object

您需要的一切都在一个地方# Javascript 版本

实用程序函数:

const switchCase = ({cases, defaultCase}) => (expression) => (cases[expression] || defaultCase)()

用法: Tyepscript 版本

let date = new Date()const today = switchCase({cases: {year: () => date.getFullYear(),month: () => date.getMonth() + 1,day: () => date.getDate()},defaultCase: () => date
})today('year') // current year
today('month') // current month
today('day') // current day
today('century') // default case - returns the current date Object

Tyepscript version

实用功能:

const switchCase = <T,>({cases, defaultCase}: {cases: {[key: string]: () => T}, defaultCase: () => T}) => (expression: string) => (cases[expression] || defaultCase)()

用法:

let date = new Date()const today = switchCase<number | Date>({cases: {year: () => date.getFullYear(),month: () => date.getMonth() + 1,day: () => date.getDate()},defaultCase: () => date
})today('year') // current year
today('month') // current month
today('day') // current day
today('century') // default case - returns the current date Object

🌟更多精彩

点击👉这里~~

http://www.lryc.cn/news/285919.html

相关文章:

  • python学习笔记10(循环结构2)
  • Codefroces 191A - Dynasty Puzzles
  • HIVE中关联键类型不同导致数据重复,以及数据倾斜
  • CRM系统是如何解决企业的痛点的?
  • 系统架构14 - 软件工程(2)
  • vue封装接口
  • Dell戴尔XPS 8930笔记本电脑原装Win10系统 恢复出厂预装OEM系统
  • elasticsearch的拼音分词器安装
  • 2024阿里云优惠,云服务器61元一年起
  • 基于SpringBoot+Vue实现的社区养老管理平台(源码+数据库脚本+设计文档+部署视频)
  • 【漏洞复现】CloudPanel makefile接口远程命令执行漏洞(CVE-2023-35885)
  • 【Spring Boot 3】【Redis】集成Redisson
  • YOLOv8改进 | Conv篇 | 2024.1月最新成果可变形卷积DCNv4(适用检测、Seg、分类、Pose、OBB)
  • 理解反向代理
  • Haar小波下采样模块
  • k8s的包管理工具helm
  • 《WebKit 技术内幕》学习之八(1):硬件加速机制
  • 【Linux对磁盘进行清理、重建、配置文件系统和挂载,进行系统存储管理调整存储结构】
  • RT-DETR算法优化改进:DCNv4更快收敛、更高速度、更高性能,效果秒杀DCNv3、DCNv2等 ,助力检测
  • Docker基础使用
  • 数据库中的经纬度数据如何在QGIS中显示
  • 制作linux运行包
  • 一些 AI 机构
  • AP5191 降压恒流 双灯 12V5A 一切一LED车灯汽车大灯驱动方案
  • 淘宝/天猫获取卖出的商品订单列表 API(taobao.seller_order_list)
  • Linux常规操作指南
  • 原生微信小程AR序实现模型动画播放只播放一次,且停留在最后一秒
  • 【Docker】在centos中安装nginx
  • leetcode:最接近的三数之和---(双指针,排序,数组)
  • dpdk网络转发环境的搭建