javascript-frameworks.jpg

function printSwitchedValue(num){
    switch (num) {
        case 1:
            console.log('one')
            break;
        case 2:
            console.log('two')
            break;
        case 3:
            console.log('three')
            break
        default:
            console.log('default')
            break;
    }
}

這是一段再普通不過(guò)分支語(yǔ)句，輸入數(shù)字，根據(jù)數(shù)字的可能性進(jìn)行分支處理進(jìn)行不同處理。
讓我們從語(yǔ)言設(shè)計(jì)層面看一下：

• 第一個(gè)就是使用冒號(hào)來(lái)定義代碼塊，這不算一種合理的設(shè)計(jì)，通常都是通過(guò)一對(duì)花括號(hào)來(lái)定義代碼塊
• 第二個(gè)就是我們必須顯示通過(guò) break 結(jié)束分支語(yǔ)句，一旦忘記即使比配上也會(huì)繼續(xù)向下執(zhí)行。

function printSwitchedValue(num){
    switch (num) {
        case 1:
            console.log('one')
            break;
        case 2:
            console.log('two')
        case 3:
            console.log('three')
            break
        default:
            console.log('default')
            break;
    }
}

two
three

  num === 1 ? console.log('one')
        : num === 2 ? console.log('two')
        : num === 3 ? console.log('three')
        : console.log('default')

當(dāng)然這也寫(xiě)是 OK 沒(méi)有問(wèn)題，可以實(shí)現(xiàn)分支語(yǔ)句，不過(guò)作為 javascript 是不是感覺(jué)有些不對(duì)勁，而且雖然我不是什么性能方面專家。這樣感覺(jué)會(huì)影響程序的運(yùn)行。

 const values = {
        '1':'one',
        '2':'two',
        '3':'three',
        'default':'default'
    }
    
    const value = values[num] || values['default']
    console.log(value)

 const values = {
        '1':'two',
        '2':false,
        '3':'three',
        'default':'default'
    }

但是如果我們分支語(yǔ)句的值為 false 或者 undefined 時(shí)候我們分支語(yǔ)句就無(wú)法正常進(jìn)行，這時(shí)候調(diào)用printSwitchedValue(2)會(huì)走到 default 分支中去。

function updateCounter(state = 0, action){
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        case 'RESET':
            return 0;
        default:
            return state;
    }
}

用過(guò) redux 的 developer 這部分代碼應(yīng)該再熟悉不過(guò)，我們根據(jù)輸入的動(dòng)作來(lái)更新?tīng)顟B(tài)，然后將更新的狀態(tài)返回。

const cases = {
        INCREMENT:state + 1,
        DECREMENT:state - 1,
        RESET : 0,
        default : state
    }

    return cases[action.type] || cases['default']

function updateCounter(state = 0, action){
    const {type, data:amount} = action
    // console.log(amount)
    const cases = {
        INCREMENT:state + amount,
        DECREMENT:state - amount,
        RESET : 0,
        default : state
    }

    return cases[type] || cases['default']
    
}


console.log(updateCounter(0,{type:"INCREMENT",data:1}))

console.log(updateCounter(0,{type:"INCREMENT",data:null/false/undefined}))

0

我們可以用函數(shù)封裝一下返回值以預(yù)防發(fā)生上面的錯(cuò)誤。

function updateCounter(state = 0, action){
    const {type, data:amount} = action
    // console.log(amount)
    const cases = {
        INCREMENT:()=> state + amount,
        DECREMENT:() => state - amount,
        RESET : () => 0,
        default : () => state
    }

    return cases[type]() || cases['default']()
    
}

我們可以通過(guò)解構(gòu)中默認(rèn)值來(lái)預(yù)防 undefined 的發(fā)生，如果 x 屬性的值是 undefined 就會(huì)采用默認(rèn)值 'x' 但是如果值是 null 則會(huì)賦值 null 而不會(huì)采用默認(rèn)值。

const { x = 'x', y = 'y'} = {
    x:undefined,
    y:null
}