如何优雅解决js很多if条件的情况?

Question

问题描述

案例：有这么一个表单的input框. 既要求输入的数据不能大于10 不能小于1. 又要求和上一次输入的值相差不能超过5. 还有各种xxx条件. 依照我个人习惯, 会写很多的if return.(因为有return 所以我就没使用&& 顺便在这请教一下各位 &&逻辑运算符后怎么接return？)

问题出现的环境背景及自己尝试过哪些方法

对于第一个问题 个人习惯是：写多个if return 但感觉不优雅 想请教大神们的习惯写法.
第二个问题 逻辑运算符&&后面为什么不能跟return.如何解决？

相关代码

第一个问题:

handleSubmit = (value) => {
    if(value < 1 || value > 10) {
        console.error("xxx");
        return;
    }
    if(value - oldValue > 5) {
        console.error("xxx");
        return;
    }
    // xxxx
    console.log("success!");
}

第二个问题:

handleSubmit = () => {
    value == 1 && return; // 报错
}

谢谢!

Answer 1

这种问题我见过很多了哦~ 我的观点还是，只要代码能够正确无误的运行，就可以了，不必追求“优雅”这个比较玄学的概念，通常我们所指的优雅，是不会在业务代码里面纠结的。

当然了，if-else 如果很长，那可读性必然会下降，我给你提两个建议：

• 善用策略模式
• 业务抽象多利用 fp 中的 map、filter 等操作

做好这两点，if-else 基本就会少很多了，如果项目复杂度很高的话，还可以引入一些简单的 Monad 来抽离 if-else 逻辑，比如常见的 Maybe、Either等。

关于第二点问题，首先你要分清楚，表达式和语句的区别，return 是语句而非表达式，因此无法和 && 操作符一起使用。

Answer 2

输入的数据过滤建议使用正则，
第二个可以用一个中间变量赋值。最后再return

handleSubmit = () => {
      var temp;
      value == 1 && temp = '你需要的值';
      return temp
  }

Answer 3

1. 这仅取决于这些各种xxx条件能不能总结出可复用的规律，比如可能你的需求变了，有多个input并且每个取值范围不再是1~10而是任意数字。如果不能，那就没有必要选择别的方式。

2. 因为return不是一个表达式，没有办法对其求值。a&&b不应该理解为，如果a则b，而应该理解为选择a或b的值，例如a为true，选择b的值。

   var x;
   var a = !x&&(y=2)
   a//2

Answer 4

handleSubmit = () => {

value == 1 && return; // 报错

}
value == 1 && return 为一个表达式，而return是一个语句，不能将语句写在表达式中。

Answer 5

结合一楼的回答,用策略模式可以把 if 条件的判断语句抽象出来 附上代码

const NumberMap={
    value_1_10:(value)=>{
      return value < 1 || value > 10
    },
    value_5:(value,oldValue)=>{
      return value - oldValue > 5
    }
    //...可以拓展更多条件
  }
  let handleSubmit = (value) => {
    if (NumberMap.value_1_10(value)) {
      console.error("xxx");
      return;
    }
    if (NumberMap.value_5(value,oldValue)) {
      console.error("xxx");
      return;
    }
    // xxxx
    console.log("success!");
  }

虽然代码量没怎么减少,把判断逻辑单独抽象出来 方便日后扩展 希望对你有帮助