Javascript 如何防止大量的if/else

如何防止函数中出现大量if/else语句来确定值

这个问题以前肯定有人问过，但我似乎找不到关于React的好答案，特别是在引入React挂钩之后

const { yearFilters, rcpFilters } = useSearch();

  const determineValue = () => {
    let finalArray = '';
    if (yearFilters === 'end' && rcpFilters === 'high') {
      return (finalArray = 'value1');
    } else if (yearFilters === 'intermediate' && rcpFilters === 'high') {
      return (finalArray = 'value2');
    } else if (yearFilters === 'begin' && rcpFilters === 'high') {
      return (finalArray = 'value3');
    } else if (yearFilters === 'end' && rcpFilters === 'medium') {
      return (finalArray = 'value4');
    } else if (yearFilters === 'intermediate' && rcpFilters === 'medium') {
      return (finalArray = 'value5');
    } else if (yearFilters === 'begin' && rcpFilters === 'medium') {
      return (finalArray = 'value6');
    } else return (finalArray = 'value7');
  };

  const value = determineValue();

---

正如您所见，我从useSearch中拉出了两个钩子，根据这些钩子，值应该会改变。还有比这样做更好的方法吗？这里是否可能出现切换/案例情况？

如果最终数组是静态的，则可以将逻辑放入单独的数组对象中。像这样

导出常量对象=[ {finalArray:'value1'，yearFilters:'end'，rcpFilters:'high'}， {finalArray:'value2'，yearFilters:'mediate'，rcpFilters:'high'}， ... ] 让finalArray=obj.finditem=>{ return item.yearFilters=='end'和&item.rcpFilters==='high' }最后一条

---

首先，不需要finalArray局部变量，因为它会把事情搞得一团糟

我只会对yearFilters的可能值进行一次测试，在每个测试rcpfilter中，可能使用查找对象或映射：

---

请注意，无法使用可选链接和空合并时的版本依赖于这样一个事实，即没有任何目标值是错误的，它们都是至少包含一个字符的字符串。

这不是与React相关的问题，只是编程基础

switch语句并不完美，但对于您的案例来说效果很好。它更具可读性

如果条件的组合为n:2，则可以使用此解决方案。您的案例为3:2，3个选项和2个组合

如果每种情况有两种以上的组合，我建议不要使用switch语句，而是使用其他方法，如对象文字：

const{yearFilters，rcpFilters}=useSearch； 常数determineValue==>{ 设finalArray=； 开关滤波器{ 案件结束： RCP过滤器===高？最终光线=值1：最终光线=值4； 打破 中级病例： RCP过滤器===高？最终光线=值2：最终光线=值5； 打破 案件开始： RCP过滤器===高？最终光线=值3：最终光线=值6； 打破 违约： finalArray=值7； 打破 } 返回最终射线； };

---

常量值=确定值；返回finalArray='value1'；是无用的-无需返回作业。只需返回'value1'；这基本上是一个逻辑/算法问题。也许它与Javascript有关，但几乎不反应和/或钩子。如果结果不能从计算输入中导出，那么无论如何你都必须列出组合。如果您希望它更具声明性，您可以将结果存储在一个嵌套对象中，并由输入键入。例如{end:{high:'value1'，medium:'value4'}，…}。或者一个switch语句可以使逻辑更容易阅读；if yearFilters=='end'&&rcpFilters=='high'{finalArray='value1'；if…；}返回finalArray；如果值1-6是动态的，并且我必须在不同的位置使用它们，您会怎么做？它们并非一直都有价值time@BridlerShoc-可能是嵌套开关或嵌套if/else if/else，在JavaScript中，它们基本上是相同的，甚至比其他类似的语言或可能使用类似于上述的结构，但其中的值是函数，然后调用以获得动态结果。感谢您以建设性的回答，而不是像其他人一样批评我的问题！给初学者的祝福

// Outside the component (no need to recreate it)
const yearFilterValues = {
    begin: {
        high: "value2",
        medium: "value6",
    },
    intermediate: {
        high: "value2",
        medium: "value5",
    },
    end: {
        high: "value1",
        medium: "value4",
    }
};

// In the component:
const { yearFilters, rcpFilters } = useSearch();
const determineValue = () => {
    const rcpValues = yearFilterValues[yearFilters];
    return rcpValues.?[rcpFilters] ?? "value7";
    // Or if you can't use optional chaining and nullish coalescing:
    // return (rcpValues && rcpValues[rcpFilters] && rcpValues[rcpFilters]) || "value7";
};

const value = determineValue();