js条件语句的优化

1. 省略else

function (condition) {
        if (condition) {
        	console.log('this')
        } else {
            console.log（'other'）	
        }
    }()
复制代码

平常能够简化为

function (condition) {
        if (condition) {
        	console.log('this')
        }
        console.log（'other'）
    }()
复制代码

这样if条件不符合时会执行console语句，等同于if else   
复制代码

2. 使用&&符

function (condition) {    not good
        if(condition) {
           console.log('this') 
        }
    }
    
    function (condition) {     good
        condition && console.log('this')
    }
复制代码

condition若为true执行console.log('this')    
复制代码

3. 使用！（非）符号

if(data === null || data === '') bad
   if(!data)                        good
复制代码

4. 使用 Array.includes

function (res) {     not good
        if(res === 'red' || res === 'blue')
        ...
    }             
    function (res) {     good
        const coolArray = ['red', 'blue']
        if(coolArray.includes(res))
        ...
    }          
复制代码

5. 使用Array.every & Array.some来判断全部 / 部分

// 判断是否全部水果都是红色
    const fruits = [      
        { name: 'apple', color: 'red' },
        { name: 'banana', color: 'yellow' },
        { name: 'grape', color: 'purple' }
    ];
    
    function test() {         not good
      let isAllRed = true;
      for (let f of fruits) {
        if (!isAllRed) break;
        isAllRed = (f.color == 'red');  // false
      }
    }
    function () {             good
        const isAllRed = fruits.every(f => f.color == 'red'); //flase  every/some返回布尔值
    }
复制代码

6. 三层以上if能够先return false

function test() {       not good
        if(true) { 
           clnsole.log('第一个执行语句') 
           if(fruits.includes(apple)) {
               console.log('第二个执行语句')
           } else {
               console.log('非fruits.includes(apple)')
           }
        } else {
            throw new Error('error')
        }
    }
    
    可使用倒装判断条件能够先执行error，减小if嵌套&提升性能
    function test() {       good
        if(false) throw new Error('error')
        if(true) { 
           clnsole.log('第一个执行语句') 
           if(fruits.includes(apple)) {
               console.log('第二个执行语句')
           }
        }
    }
    
    也能够对第二个if进一步处理
    function test() {       good
        if(false) throw new Error('error')
        if(!fruits.includes(apple)) return
        console('第二个执行语句')
        
        if(fruits.includes(apple)) {
            console.log('第二个执行语句')
        }
    }
复制代码

原则：尽量少的嵌套和尽早的return
复制代码

7. 对象遍历代替switch
   根据name，打印对应color

function test(name) {
        switch (name) {
            case 'apple':
              return 'red'
            case 'banana':
              return 'yellow'
            case 'grape':
              return 'purple'
            defaule：
              return ''
        }
    }
    test(null)    // ''
    test('apple')    // red
    
    使用对象遍历则更简单
    const fruitName = {
        apple: 'red',
        banana: 'yellow',
        grape: 'purple',
    }
    functin test(name) {
        return fruitName[name] || []
    }
    
    也可使用es6 map,能够存储key，value的值
    const fruitName = new Map{
        .set('apple', 'red'),
        .set('banana',  'yellow'),
        .set('grape', 'purple')
    }
    functin test(name) {
        return fruitName.get(name) || []
    }
    
    也可使用filter
    const fruitName = [
        {name: 'apple', color: 'red'},
        {name: 'banana': color: 'yellow'},
        {name: 'grape': color: 'purple'},
    ]
    functin test(name) {
        return fruitName.filter(v => v.name == name)
    }复制代码