其实使用switch本不是什么大问题，只是代码看起来比较累赘，每个case都不能用大括号（ { } ）括起来，都需要有个break来终止，这与我们JavaScript的编程习惯，用花括号表示代码块不太符合。
大家对比一下以下两段代码：

switch语句的问题

• case语句比较相等使用的是===，而不是 ==
  所以下面的代码会出现问题

var type = '0';
var temp='';
switch(type) {
  case 0:
    temp='A';  // 不会被执行，因为0 !== '0'
    break;
  case 1:
    temp='B'; 
    break;
  default:
    break;
}

• case语句不使用花括号（{ }）建立代码块
  如上代码
• 每个case语句后手动加上break语句（有些情况可能多个case语句共用一个break）。
  这样子的话会显得代码比较繁琐
• case中的判断是逐条进行的
  也就意味着当判断条件增多时，查找对应匹配的条件可能会更费时。
  所以在介绍switch…case语句时，很多资料会提醒读者：对各case条件的顺序要做到心中有数，将最可能匹配到的case语句放到最前面可以提高效率。

对比switch语句与Object语句

// code one
switch(type){
	case 0:
		temp='A';
		break;
	case 1:
		temp='B';
		break;
	case 2:
		temp='C';
		break;
	default:
		temp='X';
		break;
}
//code two
const opt={
	0: 'A',
	1: 'B',
	2: 'C',	
}
temp=opt[type];

简洁程度显而易见。

如何使用Object替代switch

考虑默认情况

上面的代码基本上已经展示了如何使用了，但是没有考虑switch的默认情况，修改代码如下：

const opt={
	0: 'A',
	1: 'B',
	2: 'C',	
	'default': 'X'
}
temp = opt[type] ? opt[type] : opt['default'];

多条件共用业务逻辑

例如：
switch

switch(type){
	case 0:
	case 1:
		temp = 'A';
		break;
	case 2:
	case 3:
		temp = 'B';
		break;
	default:
		temp= 'X';
		break;
}

object

function isA(){
	return 'A';
}
function isB(){
	return 'B';
}
function isDefault(){
	return 'X';
}
const opt={
	0: isA,
	1: isA,
	2: isB,
	3: isB,
	'default': isDefault
}
temp = opt[type] ? opt[type]() : opt['default']();

总结

switch…case作为条件判断的老牌主力，繁琐的句式、排错困难等缺点使得其在很多情况下已经不能达到我们的期望了，而反观Object的灵活性、易用性，我们有何理由不使用呢？更由于JavaScript作为弱类型语言，Object字面量中不仅仅能够像上文中返回字符串或者函数，在其中可以做任何操作。

我想说的话

学习的进步离不开广大网友的支持，欢迎大家进入web前端学习交流群（852590787）：