如何优雅解决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 是语句而非表达式，因此无法和 && 操作符一起使用。