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

文章来源：刘俊涛的博客

若有帮助到您，欢迎点赞、转发、支持，您的支持是对我坚持最好的肯定(^_)