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

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

article 2024/10/31 12:27:51

前提：

面试遇到一个挺有意思的问题，就问到，项目这边有个问题，我这边现在一开始只有一个字段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();