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)
    }複製代碼