有时候我们的代码有很多的条件判断，我们只能用 switch 语句来让代码更好看一点。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 语句，代码会更直观简洁。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 查找真是很方便的呦。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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); |
当然，我们可能会写一些代码片段，只需要这样子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var type = 'coke'; var drinks = { 'coke': function() { return 'Coke'; }, 'pepsi': function() { return 'Pepsi'; }, 'lemonade': function() { return 'Lemonade'; } }; drinks[type](); |
有时候，我们可能会在一个 function 里面写 switch 并且返回一个值，我们当然也能用 Object 实现。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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，当然也是很简单滴
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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' |
就是这样啦，其实可能我们已经在无意中用到了这种方法，我想说的是，当你看到某段代码不顺眼的时候，就应该想办法改造它啦。
regiondavid 2016 年 10 月 21 日
应该可以算策略模式 吧。。。
草珊瑚 2015 年 6 月 19 日
这个其实有个专业术语，叫表查询法。
打酱油的 2015 年 6 月 9 日
以前的文章很不错，为何最近的文章怎么感觉这么水
小曹哥 2015 年 6 月 5 日
呃，有几个地方打错了，不可以更改评论，差评～～
小曹哥 2015 年 6 月 5 日
我觉得并不是所有的都适合用 Object Map 方式代替 Switch，Object Map 相比 Switch 方式，性能一半会下降几个百分点儿，甚至忽略不计，min+gzip 之后大小几乎没差别。Object Map 的好处可能是某些情况下可读性好，且手敲的代码要明显少。当然，确实应该不断优化代码，记得 Object Map 的方式。
一个实际的问题，比如根据一个字符串（’1Y’, ‘1M’, ‘7d’, ’12h’, ’30m’）来计算 Cookie 的过期时间，代码：
https://gist.github.com/Alex1990/ce227e5567fa08eec267/dfe72e96103cbdefcdde9840382acb49cd94030a
姓称名呼 2015 年 6 月 4 日
火速留名+学习
这他妈能看部门？ 2015 年 5 月 31 日
真专业假设有个 case 叫 default 怎么办，你造？
https://gist.github.com/anonymous/438cba6b18b26dbdaab1
mandy 2015 年 6 月 1 日
哈哈，很缜密
这他妈能看部门？ 2015 年 5 月 31 日
贵司这么专业的博客竟然不支持 Markdown，排版去哪里了？
mandy 2015 年 6 月 1 日
sorry，我们的 markdown 插件出了问题，正在修复中哦