再也沒有ifelse

刘俊涛的博客發表於2024-04-01

再也沒有if else

例子1


const setBackgroundColor = (colorName) => {
	let colorCode = '';
	switch(colorName) {
		case 'blue':
			colorCode = '#2196F3';
			break;
		case 'green':
			colorCode = '#4CAF50';
			break;
		case 'orange':
			colorCode = '#FF9800';
			break;
		case 'pink':
			colorCode = '#E91E63';
			break;
		default:
			colorCode = '#f44336';
	};
	document.body.style.backgroundColor = colorCode;
};

換個實現方式

const colorCodes = {
	'blue'   : '#2196F3',
	'green'  : '#4CAF50',
	'orange' : '#FF9800',
	'pink'   : '#E91E63',
	'default': '#F44336'
};

const setBackgroundColor = (colorName) => {
	document.body.style.backgroundColor = colorCodes[colorName]
		? colorCodes[colorName]
		: colorCodes['default'];
};

例子2

const gradeChart = [
	{minpercent: 90, letter: 'A'},
	{minpercent: 80, letter: 'B'},
	{minpercent: 70, letter: 'C'},
	{minpercent: 60, letter: 'D'},
	{minpercent: 0,  letter: 'F'}
];

const getLetterGrade = (gradeAsPercent) => {
	const grade = gradeChart.find(
		(grade) => gradeAsPercent >= grade.minpercent
	);

	return grade.letter;
};

這段程式碼定義了一個JavaScript函式和一個資料結構，用於將百分制成績轉換為對應等級（A、B、C、D或F）。

首先，我們來看gradeChart陣列：

const gradeChart = [
  {minpercent: 90, letter: 'A'},
  {minpercent: 80, letter: 'B'},
  {minpercent: 70, letter: 'C'},
  {minpercent: 60, letter: 'D'},
  {minpercent: 0,  letter: 'F'}
];

這是一個包含多個物件的陣列，每個物件代表一個成績等級區間。例如：

  • 如果分數在90分及以上，則對應的等級是'A'。
  • 如果分數在80到89分之間，則對應的等級是'B'。
  • 以此類推，直到分數在0到59分之間時，對應的等級是'D'；而任何低於或等於0的分數，其等級為'F'。

接下來，我們看getLetterGrade函式：

const getLetterGrade = (gradeAsPercent) => {
  const grade = gradeChart.find(
    (grade) => gradeAsPercent >= grade.minpercent
  );

  return grade.letter;
};

這個函式接收一個引數 gradeAsPercent，表示要轉換的成績（以百分比形式）。函式內部使用了Array.prototype.find()方法來查詢gradeChart陣列中第一個滿足條件的物件，這裡的條件是傳入的分數大於等於當前物件中的minpercent屬性。

如果找到了符合條件的區間（即找到對應的成績等級），則返回該區間物件的letter屬性值，也就是對應的字母等級。

舉個例子，呼叫getLetterGrade(85)會返回 'B'，因為85在80到89的區間內，對應的是'B'等級。

為什麼不用ifelse?

在討論Array.prototype.find()方法與使用傳統的if-else語句進行查詢時的效率，這個問題的答案會根據具體的上下文和資料結構有所不同。

對於陣列查詢：

  1. Array.prototype.find()：

    • find()方法在內部實現上會遍歷陣列直到找到匹配項為止。如果陣列很大且目標元素出現在陣列靠前的位置，則效率相對較高。但如果目標元素位於陣列末尾或根本不存在於陣列中（需要遍歷整個陣列），那麼效率較低。
    • 它的優勢在於程式碼簡潔，並且內建了迴圈機制，避免了手動編寫迴圈邏輯的複雜性。

  2. if-else 用法：

    • 使用傳統的for迴圈配合if-else條件判斷也可以達到同樣的效果。在較小規模的資料量下，二者效能差距可能並不明顯。
    • 如果手動最佳化迴圈，例如在找到結果後立即跳出迴圈（如使用break），則在最壞情況下可能會比find更高效，因為它可以提前結束搜尋過程。

結論：

  • 在處理小到中等規模的陣列時，兩者在效能上的差異通常不顯著。
  • 對於非常大的陣列，如果你知道要查詢的目標通常靠近陣列開頭或者有可能頻繁出現的情況，find方法由於其內建迭代器的特性，在平均情況下的效能表現良好。
  • 當需要查詢特定條件並希望儘快結束迴圈時，手動編寫的、能夠提前終止迴圈的if-else結構可能會提供更好的最壞情況下的效能。

然而，在實際程式設計實踐中，我們不僅要考慮純粹的執行時間效率，還要關注程式碼的可讀性和維護性。在這種場景下，find方法通常因其簡潔和易讀而受到青睞，特別是在處理物件陣列尋找滿足特定條件的元素時。



歡迎關注公-眾-號【TaonyDaily】、留言、評論，一起學習。

公眾號

Don’t reinvent the wheel, library code is there to help.

文章來源：劉俊濤的部落格

若有幫助到您，歡迎點贊、轉發、支援，您的支援是對我堅持最好的肯定(_)

相關文章