精简代码-if

前言: 我们往常写代码的时候，遇到需要对一些数据进行简单的判断然后执行相应的操作的时候，我们可能首先就会想到使用if来进行判断，但是有时候在一些地方,由于if语句本身没有返回值，会造车一些不便利的情况，而且很多情况下面，我们完全可以使用一些相对来说更加精简代码来代替if，达到精简代码的目的。

涉及知识：三目运算符，与字符，或字符，非字符，策略模式

首先从以下几个角度来分析

一、代码精简度

二、赋值便利度

三、编写简易度

四、适用场景总结

一、代码精简度

1.简易判断操作下的代码

首先我们来看看这段代码

    if (x) {
        fun1();
    } else {
        fun2();
    }

这是一个判断变量是否存在，然后执行相应操作的if语句，对于这一种分支数比较少的，其实我们可以这样来写

一、与字符进行判断

    x && fun1();
    !x && fun2();

与字符进行的是一个短路的操作，会将俩边的代码执行并尝试转换为boolean，前面如果为false，则不会执行之后的代码相对来讲，在需要执行判断与代码的操作比较少，这种形式进行判断可以让你的代码看起来变得更加精简

二、三目运算符

x ? fun1() : fun2();

相对来讲，三目运算符适合分支数只有俩个的条件判断，这样写代码量会显得非常少，而且比较清晰明了，特别要注意的一点是，如果你要判断的内部分支数比较多，例如if里面还有if的，比较推荐使用与字符、或字符还有if的方式去判断

2.条件嵌套下的代码

 if (x) {
        if (x instanceof Array) {
            if (x.length > 4) {
                fun();
            } else {
                fun2();
            }
        } else {
            fun3();
        }
    } else {
        fun4();
    }

这一段代码嵌套了很多的if，看起来就让人感觉有点摸不着头脑，特别是后面一堆else，让人根本难以分清那一个else是属于那一个if的，可读性就特别扎心了

让我们来试试与字符的短路操作将代码修改一下

    !x && fun4();
    x && !(x instanceof Array) && fun3();
    x && x instanceof Array && x.length > 4 && fun();
    x && x instanceof Array && !(x.length > 4) && fun2();

这样的话是不是让人看起来感觉更加舒服了呢，同时前置条件也是一目了然，这样的话无论是可读性还是代码量都会让人感觉很舒服

注意：看完这几样可能会想要将与字符的这些操作将代码干脆融合到一行代码里面，不要过分的追求将代码整合到一行之中，虽然用与字符这些方式减少了代码，让这整合的操作变得触手可及，但是无论是对于后期要修改代码的角度来说，还是对于内部细节操作来说都存在了一些比较麻烦的问题，例如函数万一返回值变动，导致与字符返回值改变，也不好找到是哪一环节的问题

二、赋值便利度

在javascript中，我们经常要对对象的属性，或者变量进行赋值操作，如果赋值操作之前要使用if判断一些前置条件再进行赋值的话，变量倒是还好，但是如果我们想要不是在对象外区判断，而是直接在对象内进行这一步操作的话，会显得比较麻烦，让我们来看一下代码

 var i = true ,
     o = {  
       a: function () { if (i) { return "aa" } }(),
       b: i && "bb",
       c: i ? "cc" : null,
      d: !i||"dd"
     }

从以上的代码可以看出，我们直接在对象内部进行属性赋值的时候，进行这一步判断所需要的代码相对而言是比较多的，而且可读性还有点糟糕，但是如果在对象外面进行这一步操作的话，又比较难以一目了然的知道这个属性涉及到了那些操作数据，那么在这样的情况下，我们可以采用后面两种方式进行赋值，这里就不多做赘述。

三、编写简易度

 function cut_class(el, change_type, className) {
 //对类切换的操控el-元素节点或选择字符串，切换方式，切换类名
    var el = (typeof el == "object" ? el : document.querySelector(el)),
      strategy = {
         add: function (el, className) {
            document.querySelector(el).classList.add(className);
        },
         toggle: function (el, className) {
            document.querySelector(el).classList.toggle(className);
        },
        remove: function (el, className) {
            document.querySelector(el).classList.remove(className);
        }
     } 
     document.querySelector(el) && strategy[change_type] && 
     strategy[change_type].call(this, el, className);
}

以上是采用策略模式设计的一个小函数，通过传入节点，操作类型等数据去执行相应的操作，在下方有一组与字符的代码，用来判断前置条件是否满足，我们可以去自己尝试一下，将这些改成if，看看要多多少行代码，可读性怎么样，感觉那种容易写

四、适用场景总结

1、三目运算符

适合分支数只有俩个的条件判断

不太适合多重嵌套判断，容易让人混淆

2、与或字符

适合简易的判断与适合多个前置if嵌套的判断，使用起来比较简便

不适合执行操作没有封装成方法的代码，内部执行的代码多容易让结构看起来变得很复杂

一路上，有许许多多值得你回忆的事情
珍贵的，除了你的坚持，还有着支撑着你的前行友情，亲情，爱情
我希望看到的，是我们再次重逢时，那熟悉的笑脸
致那永恒的情谊
我在路上
不悔，不退

精简代码--if篇

精简代码-if