前端面试：如何减少项目里面 if-else？
在前端开发中，大量使用 if-else 结构可能导致代码调试困难、可读性降低和冗长的逻辑。不妨考虑以下多种策略来减少项目中的 if-else 语句，提高代码的可维护性和可读性：
1. 使用对象字面量替代
用对象字面量来替代 if-else 语句，尤其在处理多个条件分支时，可以清晰地组织代码。
const actionMap = { 'create': () => { /* 创建操作 */ }, 'update': () => { /* 更新操作 */ }, 'delete': () => { /* 删除操作 */ }, }; function performAction(action) { const actionFn = actionMap[action]; if (actionFn) { actionFn(); } else { console.error('未知操作:', action); } } performAction('update'); // 调用更新操作 2. 使用 Switch 语句
在有多个条件的情况下，使用 switch 语句替代 if-else 可以提高可读性。
function getColorName(colorCode) { switch (colorCode) { case 'red': return '红色'; case 'green': return '绿色'; case 'blue': return '蓝色'; default: return '未知颜色'; } } 3. 使用策略模式
策略模式是一种定义一系列算法的方法，将每一个算法封装起来，并使它们可以相互替换，可以避免在业务逻辑中使用繁琐的 if-else。
class Strategy { constructor() { this.strategies = { 'A': () => { /* 策略 A */ }, 'B': () => { /* 策略 B */ }, }; } execute(strategyKey) { const strategy = this.strategies[strategyKey]; if (strategy) { return strategy(); } else { throw new Error('未知策略'); } } } const strategy = new Strategy(); strategy.execute('A'); // 执行策略 A 4. 使用多态
如果你正在进行面向对象编程，可以使用多态来替代 if-else。通过定义不同的类和方法来实现不同的行为。
class Animal { speak() { throw new Error('子类需实现该方法'); } } class Dog extends Animal { speak() { return '汪汪'; } } class Cat extends Animal { speak() { return '喵喵'; } } function speakAnimal(animal) { console.log(animal.speak()); } speakAnimal(new Dog()); // 输出：汪汪 speakAnimal(new Cat()); // 输出：喵喵 5. 函数回调
利用回调函数代替条件判断，将逻辑分散到多个函数中，从而减少复杂条件。
function notifyUser(type) { const notificationTypes = { success: () => console.log("操作成功!"), error: () => console.log("操作失败!"), warning: () => console.log("这是一个警告!"), }; (notificationTypes[type] || notificationTypes['error'])(); } // 调用 notifyUser('success'); // 输出：操作成功! 6. 使用函数式编程
如果你的应用或项目风格允许，可以借助函数式编程技巧，减少条件结构的嵌套。
const checkValue = (value) => value > 10 ? '大于10' : '小于或等于10'; // 使用 console.log(checkValue(15)); // 输出：大于10 7. 利用常量替代魔法值通过定义常量替代硬编码的值，减少条件判断的复杂性。javascriptconst STATUS = { SUCCESS: 1, FAILURE: 0, }; function handleStatus(status) { if (status === STATUS.SUCCESS) { console.log('操作成功'); } else if (status === STATUS.FAILURE) { console.log('操作失败'); } } // 使用 handleStatus(STATUS.SUCCESS); 减少 if-else 的使用并不总是合适的方法，但在处理复杂逻辑时，采用上述技术可以提升代码的可读性、可维护性和可扩展性。在实际的工作中，选择合适的实现方式尽量避免复杂的判断，使代码更加简洁明了。
相关文章：
前端面试：如何减少项目里面 if-else？
在前端开发中，大量使用 if-else 结构可能导致代码调试困难、可读性降低和冗长的逻辑。不妨考虑以下多种策略来减少项目中的 if-else 语句，提高代码的可维护性和可读性： 1. 使用对象字面量替代 用对象字面量来替代 if-else 语句，…...
05.基于 TCP 的远程计算器：从协议设计到高并发实现
📖 目录 📌 前言🔍 需求分析 🤔 我们需要解决哪些问题？ 🎯 方案设计 💡 服务器架构 🚀 什么是协议？为什么要设计协议？ 📌 结构化数据的传输问题 …...
Matlab:矩阵运算篇——矩阵数学运算
目录 1.矩阵的加法运算 实例——验证加法法则 实例——矩阵求和 实例——矩阵求差 2.矩阵的乘法运算 1.数乘运算 2.乘运算 3.点乘运算 实例——矩阵乘法运算 3.矩阵的除法运算 1.左除运算 实例——验证矩阵的除法 2.右除运算 实例——矩阵的除法 ヾ(￣…...
git reset的使用，以及解决还原后如何找回
文章目录 git reset 详解命令作用常用参数1. --soft2. --mixed（默认参数，可省略）3. --hard4. 提交引用 总结 git reset --hard HEAD^ 还原代码如何找回？利用 git reflog找回 git reset 详解 git reset 是 Git 中一个功能强大且较…...
react中字段响应式
class中用法: import React, { Component } from react export default class Index extends Component<any, any> { constructor(props) { super(props) this.state { settingInfo: {}, } } async componentDidMount() { let settingInfo awa…...
vue中，watch里，this为undefined的两种解决办法
提示：vue中，watch里，this为undefined的两种解决办法 文章目录 [TOC](文章目录) 前言一、问题二、方法1——使用function函数代替箭头函数()>{}三、方法2——使用that总结 前言 尽量使用方法1——使用function函数代替箭头函数()…...
智能客服意图识别：结合知识库数据构建训练语料的专业流程
智能客服意图识别：结合知识库数据构建训练语料的专业流程 构建基于知识库的智能客服意图识别模型，需要综合运用 NLP（自然语言处理）、知识图谱、机器学习 等技术，确保意图识别的准确性和覆盖度。以下是专业的流程&…...
Spring Boot集成Spring Statemachine
Spring Statemachine 是 Spring 框架下的一个模块，用于简化状态机的创建和管理，它允许开发者使用 Spring 的特性（如依赖注入、AOP 等）来构建复杂的状态机应用。以下是关于 Spring Statemachine 的详细介绍： 主要特性 …...
压缩空气储能仿真simulink模型
压缩空气储能仿真simulink模型，适合matlab 2017及以上版本 CompressingGas.slx , 40474...
Tomcat 安装
一、Tomcat 下载 官网：Apache Tomcat - Welcome! 1.1.下载安装包 下载安装包： wget https://dlcdn.apache.org/tomcat/tomcat-9/v9.0.102/bin/apache-tomcat-9.0.102.tar.gz 安装 javajdk。 yum install java-1.8.0-openjdk.x86_64 -y /etc/altern…...
贪心算法和遗传算法优劣对比——c#
项目背景：某钢管厂的钢筋原材料为 55米，工作需要需切割 40 米（1段）、11 米（15 段）等 4 种规格 ，现用贪心算法和遗传算法两种算法进行计算： 第一局：{ 40, 1 }, { 11, 15…...
系统开发资源
一、前端篇 1.1 菜鸟CSS教程 1.2 HTML/CSS/JS 在线工具 二、后端篇 三、其他篇 3.1 菜鸟官网 3.2 黑马程序员学习路线 3.3 根据地区获取经纬度...
深度学习 bert与Transformer的区别联系
BERT（Bidirectional Encoder Representations from Transformers）和Transformer都是现代自然语言处理（NLP）中的重要概念，但它们代表不同的层面。理解这两者之间的区别与联系有助于更好地掌握它们在NLP任务中的应用。 …...
unity使用mesh 画图（1）
plane 圆 空心椭圆 椭圆 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class DrawMeshManager {static DrawMeshManager instance;public static DrawMeshManager Instance {get {if (instance ! null){retu…...
SpringMVC响应页面及不同类型的数据，
目录 响应页面 响应数据 文本数据 响应POJO对象 编辑 响应生命周期 视图解析器 控制器（Controller）处理完客户端请求后，生成的并返回给客户端的结果就是响应，响应的结果可以是静态页面，数据，HTM…...
地理信息系统（ArcGIS）在水文水资源及水环境中的应用：空间数据管理、空间分析功能、可视化表达
随着全球工业化和经济的快速发展，水资源短缺、水污染等问题日益严峻，成为制约可持续发展的重大瓶颈。地理信息系统（GIS）以其强大的空间数据管理和分析能力，在水文水资源及水环境的研究和管理中展现出独特优势。本文将深…...
电路原理（电容 集成电路NE555）
电容 1.特性：充放电，隔直流，通交流 2.电容是通过聚集正负电荷来存储电能的 3.电容充放电过程可等效为导通回路 4.多电容并联可以把容量叠加，但是多电容串联就不会，只会叠加电容的耐压值。 6.电容充放电时相当于通路&a…...
C++对象的初始化和对象所占资源的清理-----初始化列表
一、初始化列表 C 提供了 初始化列表（initializer list） 语法，可以在 构造函数 中用来初始化类的成员变量。它的主要优势是 提高效率，特别是在初始化 const 或 reference 类型的成员时，以及避免额外的赋值操作。 1.…...
零成本搭建Calibre个人数字图书馆支持EPUB MOBI格式远程直读
文章目录 前言1.网络书库软件下载安装2.网络书库服务器设置3.内网穿透工具设置4.公网使用kindle访问内网私人书库 前言 嘿，各位书虫们！今天要给大家安利一个超级炫酷的技能——如何在本地Windows电脑上搭建自己的私人云端书库。亚马逊服务停了ÿ…...
Ansible命令行模式常用模块使用案例（二）
在Ansible中，命令行模式（Ad-Hoc 模式）是一种快速执行任务的方式，适合临时任务或简单操作。以下是 Ansible 命令行模式中常用模块的使用案例（第二部分）： 1 file模块 功能特性：主要用于…...
12. Pandas ：使用pandas读Excel文件的常用方法
一 read_excel 函数 其他参数根据实际需要进行查找。 1.接受一个工作表 在 11 案例用到的 Excel 工作簿中，数据是从第一张工作表的 A1 单元格开始的。但在实际场景中， Excel 文件可能并没有这么规整。所以 panda 提供了一些参数来优化读取过程。 比如 s…...
Pytorch中矩阵乘法使用及案例
六种矩阵乘法 torch中包含许多矩阵乘法，大致可以分为以下几种： *：即a * b 按位相乘，要求a和b的形状必须一致，支持广播操作 torch.matmul()：最广泛的矩阵乘法 ：与torch.matmul()效果一样&…...
【MySQL】增删改查进阶
目录 一、数据库约束 约束类型 NULL约束：非空约束 UNIQUE：唯一约束 DEFAULT：默认值约束 PRIMARY KEY：主键约束 FOREIGN KEY：外键约束 二、表的设计 三、新增 四、查询 聚合查询 聚合函数 GROUP BY子句 HA…...
【Linux 指北】常用 Linux 指令汇总
第一章、常用基本指令 # 注意： # #表示管理员 # $表示普通用户 [rootlocalhost Practice]# 说明此处表示管理员01. ls 指令 语法： ls [选项][目录或文件] 功能：对于目录，该命令列出该目录下的所有子目录与文件。对于文件…...
父组件中循环生成多个子组件时，有且只有最后一个子组件的watch对象生效问题及解决办法
提示：父组件中循环生成多个子组件时，有且只有最后一个子组件的watch对象生效问题及解决办法 文章目录 [TOC](文章目录) 前言一、问题二、解决方法——使用function函数代替箭头函数()>{}总结 前言 问题：子组件用that解决watch无…...
stable Diffusion 中的 VAE是什么
在Stable Diffusion中，VAE（Variational Autoencoder，变分自编码器）是一个关键组件，用于生成高质量的图像。它通过将输入图像编码到潜在空间（latent space），并在该空间中进行操作&…...
麒麟v10 ARM64架构系统升级mysql数据库从mysql-5.7.27到mysql-8.4.4图文教程
1、背景与问题说明 因mysql-5.2.27版本存在安全漏洞问题，为保障系统安全，需将处于生产环境的麒麟v10 ARM64架构系统服务器上当前部署的mysql-5.7.27版本升级到mysql-8.4.4，以规避潜在风险，提升系统整体的安全性和稳定性。 1.1 本…...
图论·拓扑排序
拓扑排序 有向无环图的遍历 检查有向图是否连通/有环 核心操作 统计度数，对于度为0的点作为起始点，添加度为0的点作为遍历 如何验证有环？注意不建议直接模拟，如果出现环这起始点的度一定不为0，肯定会少遍历一些点&…...
Uniapp组件 Textarea 字数统计和限制
Uniapp Textarea 字数统计和限制 在 Uniapp 中，可以通过监听 textarea 的 input 事件来实现字数统计功能。以下是一个简单的示例，展示如何在 textarea 的右下角显示输入的字符数。 示例代码 首先，在模板中定义一个 textarea 元素ÿ…...
一文了解JVM的垃圾回收
Java堆内存结构 java堆内存是垃圾回收器管理的主要区域，也被称为GC堆。 为了方便垃圾回收，堆内存被分为新生代、老年代和永久代。 新创建的对象的内存会在新生代中分配，达到一定存活时长后会移入老年代，而永久代存储的是类的元数…...
Vector底层结构和源码分析（JDK1.8）
参考视频：韩顺平Java集合 Vector 类的定义说明： Vector 的底层也是一个对象数组，protected Object[] elementData;Vector 是线程同步的，即线程安全，Vectoe 类的操作方法带有 synchronized 关键字：public sy…...
uni-app+vue3学习随笔
目录相关 static文件 编译器会把static目录中的内容整体复制到最终编译包内， 非 static 目录下的文件（vue组件、js、css 等）只有被引用时，才会被打包编译。 css、less/scss 等资源不要放在 static 目录下，建议这些…...
JetBrains（全家桶: IDEA、WebStorm、GoLand、PyCharm） 2024.3+ 2025 版免费体验方案
JetBrains（全家桶: IDEA、WebStorm、GoLand、PyCharm） 2024.3 2025 版免费体验方案 前言 JetBrains IDE 是许多开发者的主力工具，但从 2024.02 版本起，JetBrains 调整了试用政策，新用户不再享有默认的 30 天免费试用…...
移远通信联合德壹发布全球首款搭载端侧大模型的AI具身理疗机器人
在汹涌澎湃的人工智能浪潮中，具身智能正从实验室构想迈向现实应用。移远通信凭借突破性的端侧AI整体解决方案，为AI机器人强势赋能，助力其实现跨行业拓展，从工业制造到服务接待，再到医疗康养，不断改写各行业…...
嵌入式硬件篇---手柄控制控制麦克纳姆轮子
文章目录 前言1. 变量定义2. 摇杆死区设置3. 模式检查4. 摇杆数据处理4.1 右摇杆垂直值（psx_buf[7]）4.2 右摇杆水平值（psx_buf[8]）4.3 左摇杆水平值（psx_buf[5]）4.4 左摇杆垂直值（psx_buf[6]&am…...
XML Schema 实例
XML Schema 实例 引言 XML（可扩展标记语言）是一种用于标记电子文件使其具有结构性的标记语言。XML Schema 是一种用于定义 XML 文档结构的机制，它定义了 XML 文档中允许的数据类型、元素和属性。本文将详细探讨 XML Schema 实例，包括其基本概念、结构、用途以及实例分析。…...
Datax-web部署文档（超详细）
Datax-web部署文档（超详细） Datax部署 # 参考官方文档 https://github.com/alibaba/DataX/blob/master/userGuid.md# 下载datax已经封装好的文件，不推荐源码自己编译 https://datax-opensource.oss-cn-hangzhou.aliyuncs.com/202309/datax.…...
基于javaweb的SSM敬老院养老院管理系统(源码+文档+部署讲解）
技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...
专题地图的立体表达-基于QGIS和PPT的“千层饼”视图制作实践
目录 前言 一、QGIS准备基础数据 1、QGIS 相关插件 2、图层标绘操作 二、PPT中制作 1、调整图片的规格 2、设置旋转 3、添加文字 三、总结 前言 在信息爆炸的时代，数据的可视化呈现变得愈发关键，而专题地图作为传递地理空间信息的有力工具&#…...
DeepSeek-R1 论文阅读总结
1. QA问答（我的笔记） Q1: DeepSeek如何处理可读性问题？ 通过构建冷启动数据（数千条长CoT数据）微调基础模型，结合多阶段训练流程（RL训练、拒绝采样生成SFT数据），并优化输…...
如何选择适合您智能家居解决方案的通信协议？
如何选择适合您智能家居解决方案的通信协议？ 在开发智能家居产品时，选择合适的通信协议对于设备的高效运行及其在智能家居系统中的互操作性至关重要。市面上协议众多，了解它们的特性并在做决定前考虑各种因素是非常必要的。以下是一些帮助您…...
---营业额统计)
蓝桥杯备考：set容器用法（lower_bound)---营业额统计
如图所示，这道题的暴力解法就是枚举每天的营业额，让该营业额和前面的天的营业额依次相减取最小值这样的话我们的时间复杂度就是N平方，我们是很有可能超时的 所以我们选择用set容器的二分查找功能 我们每次遍历到一个数的时候，前…...
vue3 动态添加路由并生成左侧菜单栏
先说下思路，登录后跳转到基础页面， 每访问一个页面时，会进到路由守卫的方法 守卫进行身份验证，登录成功后才能跳转到静态路由外的页面，否则就重定向回login页面 登录后跳转到基础页面（因为基础页面包含了左…...
上下文微调（Contextual Fine-Tuning, CFT）提高大型语言模型（LLMs）在特定领域的学习和推理能力
大型语言模型（LLMs）在开放领域任务中表现出色，但在快速演变的专业领域（如医学、金融）中面临挑战： 知识更新难题：传统指令微调（Instruction Fine-Tuning, IFT）依赖显式指令，难以适应动态知识。灾难性遗忘：持续预训练（Continued Pretraining, CPT）可能导致模型遗忘已…...
L2-4 吉利矩阵
输入样例： 7 3输出样例： 666 这道题是暴力纯搜，但是很难想，我这个是看的别人的代码 #include "bits/stdc.h" using namespace std; int x[20][20]; int l, n; int cnt 0; int sumx[5], sumy[5]; void dfs(int x, in…...
⭐算法OJ⭐汉明距离【位操作】（C++ 实现）Hamming Distance
Hamming Distance（汉明距离）是用于衡量两个等长字符串在相同位置上不同字符的个数的度量。它通常用于比较两个二进制字符串或编码序列的差异。 定义 给定两个长度相同的字符串 A A A 和 B B B，它们的汉明距离 D ( A , B ) D(A,B) D(A,B)…...
数据可信、隐私可控：CESS 如何打造波卡生态数据新基建？
原文：https://messari.io/report/cess-network-a-deep-dive-into-programmable-data-value-infrastructure作者：Messari编译：OneBlock波卡生态一直以来以其跨链互操作性和灵活性吸引了众多创新项目，尤其是在 DePIN（去中…...
HCIA-11.以太网链路聚合与交换机堆叠、集群
链路聚合背景 拓扑组网时为了高可用，需要网络的冗余备份。但增加冗余容易后会出现环路，所以我们部署了STP协议来破除环路。 但是，根据实际业务的需要，为网络不停的增加冗余是现实需要的一部分。 那么，为了让网络冗余…...
网络安全之数据加密（DES、AES、RSA、MD5）
刚到公司时，我的工作就是为app端提供相应的接口。之前app使用的是PHP接口，对数据加密方面做得比较少。到使用java接口时，老大开始让我们使用DES加密，进行数据传输，但是后来觉得DES是对称加密，密钥存在客户端…...
Vim忍者速成秘卷：让你的键盘冒出残影の奥义
🎯 核心原理 通过 超低延迟配置 + 肌肉记忆优化 + 视觉欺骗技术，达成行云流水的操作体验。就像《火影忍者》结印般流畅！ ⚡ 残影生成术（基础篇） " 🛩️ 贴地飞行模式（.vimrc 极速配置） set timeoutlen=300 " 快捷键响应时间压缩至300ms（武士刀级响应）…...