再也沒有ifelse

再也沒有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.

文章來源：劉俊濤的博客

---

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