IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    用Object字面量代替switch

    mandy发表于 2015-05-31 13:25:25
    love 0

    有时候我们的代码有很多的条件判断,我们只能用switch语句来让代码更好看一点。

    function getDrink(type) {
        if (type === 'coke') {
            type = 'Coke';
        } else if (type === 'pepsi') {
            type = 'Pepsi';
        } else if (type === 'mountain dew') {
            type = 'Mountain Dew';
        } else if (type === 'lemonade') {
            type = 'Lemonade';
        } else if (type === 'fanta') {
            type = 'Fanta';
        } else {
            // acts as our "default"
            type = 'Unknown drink!';
        }
        return 'You\'ve picked a ' + type;
    }
    

    像上面介样子的代码,看起来是很头疼滴。而用switch语句,代码会更直观简洁。

    var type = 'coke';
    var drink;
    switch (type) {
        case 'coke':
            drink = 'Coke';
            break;
        case 'pepsi':
            drink = 'Pepsi';
            break;
        default:
            drink = 'Unknown drink!';
    }
    console.log(drink); // 'Coke'
    

    但是我们有时候不太喜欢用switch语句,它那程式化的写法并不是那么舒适,而且代码块不能用大括号包起来,看起来很别扭。

    我们经常用Object来查找,而switch在某种意义上也是查找,所以我们可以试着用Object来代替switch。object应该会给我带来更大的灵活性。就像写配置文件的时候一样,object的hash查找真是很方便的呦。

    function getDrink(type) {
        var drinks = {
            'coke': 'Coke',
            'pepsi': 'Pepsi',
            'lemonade': 'Lemonade',
            'default': 'Default item'
        };
        return 'The drink I chose was ' + (drinks[type] || drinks['default']);
    }
    var drink = getDrink('coke');
    // The drink I chose was Coke
    console.log(drink);
    

    当然,我们可能会写一些代码片段,只需要这样子

    var type = 'coke';
    var drinks = {
        'coke': function() {
            return 'Coke';
        },
        'pepsi': function() {
            return 'Pepsi';
        },
        'lemonade': function() {
            return 'Lemonade';
        }
    };
    drinks[type]();
    

    有时候,我们可能会在一个function里面写switch并且返回一个值,我们当然也能用Object实现。

    function getDrink(type) {
        var drinks = {
            'coke': function() {
                return 'Coke';
            },
            'pepsi': function() {
                return 'Pepsi';
            },
            'lemonade': function() {
                return 'Lemonade';
            }
        };
        return drinks[type]();
    }
    var drink = getDrink('coke');
    console.log(drink); // 'Coke'
    

    好像并没有实现default,当然也是很简单滴

    
    function getDrink(type) {
        var drinks = {
            'coke': function() {
                return 'Coke';
            },
            'pepsi': function() {
                return 'Pepsi';
            },
            'lemonade': function() {
                return 'Lemonade';
            },
            'default': function() {
                return 'Default item';
            }
        };
        return (drinks[type] || drinks['default'])();
    }
    // called with "dr pepper"
    var drink = getDrink('dr pepper');
    console.log(drink); // 'Default item'
    

    就是这样啦,其实可能我们已经在无意中用到了这种方法,我想说的是,当你看到某段代码不顺眼的时候,就应该想办法改造它啦。



沪ICP备19023445号-2号
友情链接