javascript 新方向(6) 分支语句

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;
    }
}

这是一段再普通不过分支语句，输入数字，根据数字的可能性进行分支处理进行不同处理。
让我们从语言设计层面看一下：

• 第一个就是使用冒号来定义代码块，这不算一种合理的设计，通常都是通过一对花括号来定义代码块
• 第二个就是我们必须显示通过 break 结束分支语句，一旦忘记即使比配上也会继续向下执行。

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')

当然这也写是 OK 没有问题，可以实现分支语句，不过作为 javascript 是不是感觉有些不对劲，而且虽然我不是什么性能方面专家。这样感觉会影响程序的运行。

 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'
    }

但是如果我们分支语句的值为 false 或者 undefined 时候我们分支语句就无法正常进行，这时候调用printSwitchedValue(2)会走到 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;
    }
}

用过 redux 的 developer 这部分代码应该再熟悉不过，我们根据输入的动作来更新状态，然后将更新的状态返回。

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

我们可以用函数封装一下返回值以预防发生上面的错误。

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']()
    
}

我们可以通过解构中默认值来预防 undefined 的发生，如果 x 属性的值是 undefined 就会采用默认值 'x' 但是如果值是 null 则会赋值 null 而不会采用默认值。

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