其實使用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）：