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

JavaScript 超大量if-else判断如何优化(设计思路)

前提:

面试遇到一个挺有意思的问题,就问到,项目这边有个问题,我这边现在一开始只有一个字段F1,有对应的若干个值,然后我们通过if else判断,判断这个值是什么,处理一些数据。再然后到现在,我们的字段已经有了五个字段了,每个字段还有他对应的值,那么我这边的if-else判断语句就多到不行了。这种情况我要怎么处理才好呢?

前期准备

首先手敲准备一份超多if-else的代码。 再来慢慢研究

const TestFunction = () => {
  if (F1 === 1 && F2 === 1 && F3 === 1 && F4 === 1 && F5 === 1) {
    executions11111(F1, F2, F3, F4, F5);
  } 
  /*接下来的几百行*/
}

在这里插入图片描述
肯定不啊,敲都敲死了
用代码生成代码!

let code = "";

for (let F1 = 1; F1 <= 4; F1++) {
  for (let F2 = 1; F2 <= 3; F2++) {
    for (let F3 = 1; F3 <= 4; F3++) {
      for (let F4 = 1; F4 <= 3; F4++) {
        for (let F5 = 1; F5 <= 2; F5++) {
          code += `if (F1 === ${F1} && F2 === ${F2} && F3 === ${F3} && F4 === ${F4} && F5 === ${F5}) {\n`;
          code += `    executions${F1}${F2}${F3}${F4}${F5}(F1, F2, F3, F4, F5)\n`;
          code += `} else `;
        }
      }
    }
  }
}

// 移除最后多余的 'else'
code = code.slice(0, -6);

// 输出生成的代码
console.log(code);

在这里插入图片描述
这样写的代码,通过浏览器执行都可以生成对应需要的if-else代码啦

思路

不管怎么优化,我们对应的if-else的执行代码,总是有他不一样的地方的。所以我们直接将内部的代码,抽成一个个的函数

function executions11111(F1, F2, F3, F4, F5) {
  console.log("executions执行11111");
}

既然可以通过生成代码的方式,生成if-else,代码,那我通过生成代码的方式,来处理这种情况不就好了

const fs = require("fs");
let code = "";

for (let F1 = 1; F1 <= 4; F1++) {
  for (let F2 = 1; F2 <= 3; F2++) {
    for (let F3 = 1; F3 <= 4; F3++) {
      for (let F4 = 1; F4 <= 3; F4++) {
        for (let F5 = 1; F5 <= 2; F5++) {
          code += `export function executions${F1}${F2}${F3}${F4}${F5}(F1, F2, F3, F4, F5) {\n`;
          code += `    console.log('executions执行${F1}${F2}${F3}${F4}${F5}')\n`;
          code += `}\n`;
        }
      }
    }
  }
}

// 移除最后多余的 'else'
code = code.slice(0, -6);

// 输出生成的代码
// console.log(code);

fs.writeFile(
  "./04_可执行代码.js",
  code,
  {
    encoding: "utf8",
    flag: "a",
  },
  (err) => {
    if (err) {
      console.log("文件写入错误:", err);
    } else {
      console.log("文件写入成功");
    }
  }
);

这样执行完成之后,就可以看到一个有超多执行函数的代码文件啦

在这里插入图片描述
优化后的执行代码

const test = import("./04_可执行代码.js");

const F1 = 1; // F1 1 - 4;
const F2 = 3; // F2 1 - 3;
const F3 = 2; // F3 1 - 4;
const F4 = 1; // F4 1 - 3;
const F5 = 2; // F5 1 - 2

const TestFunction2 = () => {
  test.then((res) => {
    const actionName = `executions${F1}${F2}${F3}${F4}${F5}`;
    if (typeof res[actionName] === "function") {
      res[actionName](); // 动态调用 this.action1() 或 this.action2()
    } else {
      console.log("No such action found");
    }
  });
};

TestFunction2();

用异步执行的方式,看起来更高级一点,在vue,react内也可以正常执行
在这里插入图片描述
没毛病。
后续只需要把各个判断块的代码往里面贴就行。
当然,现在没有考虑到后续扩展,以及如果字段的值为非数字该怎么处理。这些等我细细琢磨琢磨再写一篇


http://www.kler.cn/a/372968.html

相关文章:

  • 基于深度学习的舆论分析与检测系统应用与研究
  • 沈阳乐晟睿浩科技有限公司抖音小店运营创新
  • vue3中,实现列表无缝滚动,vue3-seamless-scroll
  • OpenSSL:生成 DER 格式的 RSA 密钥对
  • 引入RFID技术,焕新消防应急物资管理方式
  • 揭秘代码界的新挑战:低代码平台,为何让程序员头疼不已?
  • C语言——八股文(笔试面试题)
  • 大模型中的token是什么;常见大语言模型的 token 情况
  • 基于 Gitee AI数据集实现弹幕不遮挡人像滚动
  • Leetcode224 -- 基本计算器及其拓展
  • Spring学习笔记_17——@Primary
  • 基于python的语音识别与蓝牙通信的温控系统毕设项目
  • 医学数据分析中的偏特征图可视化
  • 请详细介绍python三大神器:迭代器、生成器、装饰器
  • 数据结构练习题(链表)
  • 2024双11买什么东西比较好?双十一购物清单
  • 全面解读京东商品详情 API 接口:从功能到应用场景
  • 从0学习React(6)
  • k8s 1.28.2 集群部署 Thanos 对接 MinIO 实现 Prometheus 数据长期存储
  • GO语言微服务 服务注册与服务发现平台 - Nacos go sdk
  • 通过route访问Openshift上的HTTP request报错504 Gateway Time-out【已解决】
  • C#读取.ini配置文件
  • 手工方式屏蔽某一个网站
  • 利用摄像机实时接入分析平台LiteAIServer视频智能分析软件进行视频监控:过亮过暗检测算法详解
  • AHT20 HAL库驱动
  • 人工智能:开启未来之门