javascript if语句的艺术

雨点打透心脏的1/2处 2022-04-22 08:36 167阅读 0赞

**if** 是写代码中最常用的语句，无时无刻都在做着各种判断，正在阅读本篇文章的你，可能天天都在写 **if** ，但你真的把 **if** 写好了吗？本篇文章带大家一起探讨如何写好 **if **。

设当前正在做一下简单的注册功能，注册所需要的数据有：用户名，密码，确认密码。非常必要的三项数据。下面将用【[伪代码][Link 1]】来示例注册功能的实现流程。

# 示例一： #

if( '已填写用户名' ){
            if( '可用的用户名' ){
                if( '已填写密码' ){
                    if( '可用的密码' ){
                        if( '密码等于确认密码' ){
                            // 校验通过，数据提交
                        }else {
                            // 提示：两次输入的密码不一致
                        }
                    }else {
                        // 提示：请先填写合法的密码
                    }
                }else {
                    // 提示：请先填写密码
                }
            }else {
                // 提示：请先填写合法的用户名
            }
        }else {
            // 提示：请先填写用户名
        }

从示例一的代码中可以看到一个非常严重的问题，就是 **if** 的嵌套过多，这仅是一个最简单的注册功能的校验。如果注册的信息再多的话，那将继续嵌套下去，使代码的可读性超差（跳跃式），陷入嵌套的地狱中。要改善此情况，请看示例二。

# 示例二： #

从示例二的代码中可以看到通过一个变量，使得代码嵌套的问题已经得到了解决，并且代码分组明确，阅读性明显改良。但是，还是存在一些嵌套，并且不灵活性不是很高。因为如果我要先校验各项数据是否填写的问题，再校验各项数据是否合法的问题，便显得有点不好处理 **if** 之间存在的依赖。要如何解决呢，请看示例三，逆向思维。

# 示例三： #

if( '未填写用户名' ){
            // 提示：请先填写用户名
            return; /* 结束本函数运行 */
        }
    
        if( '未填写密码' ){
            // 提示：请先填写密码
            return; /* 结束本函数运行 */
        }
    
        if( '不可用的用户名' ){
            // 提示：请先填写合法的用户名
            return; /* 结束本函数运行 */
        }
    
        if( '不可用的密码' ){
            // 提示：请先填写合法的密码
            return; /* 结束本函数运行 */
        }
    
        if( '密码不等于确认密码' ){
            // 提示：两次输入的密码不一致
            return; /* 结束本函数运行 */
        }
    
        // 校验通过，数据提交

从示例三明显能感受到代码的精简及灵活性。与前面两种方式最大的区别就是由判断可用值转变为判断非可用值，代码阅读性好了很多（自上而下）。做一个好的程序员，就从写好 **if** 开始吧！

望本篇文章能为各位读者带来帮助！与广大有追求的开发者共勉！

> 作者：[黄河爱浪][Link 2] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://baike.baidu.com/item/%E4%BC%AA%E4%BB%A3%E7%A0%81/10321865?fr=aladdin
[Link 2]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220422/064772a36a854445a64baca4f020bbe0.png