4、数组的 includes 方法
假设我们要根据所提供的食品类型返回相应的配料数组。如果使用if..else语句，通常会这样写：
function getIngredients(foodType) { let ingredients = []; if (foodType === 'pizza') { ingredients = ['cheese', 'sauce', 'pepperoni']; } else if (foodType === 'burger') { ingredients = ['bun', 'beef patty', 'lettuce', 'tomato', 'onion']; } else if (foodType === 'taco') { ingredients = ['tortilla', 'beef', 'lettuce', 'shredded cheese']; } else if (foodType === 'sandwich') { ingredients = ['bread', 'turkey', 'lettuce', 'mayo']; } else { console.log('Unknown food type'); } return ingredients; }
这样的场景下，就可以使用includes方法来优化这个冗长的if...else语句：
function getIngredients(foodType) { const menu = [ {food: 'pizza', ingredients: ['cheese', 'sauce', 'pepperoni']}, {food: 'burger', ingredients: ['bun', 'beef patty', 'lettuce', 'tomato', 'onion']}, {food: 'taco', ingredients: ['tortilla', 'beef', 'lettuce', 'shredded cheese']}, {food: 'sandwich', ingredients: ['bread', 'turkey', 'lettuce', 'mayo']} ]; const item = menu.find(menuItem => menuItem.food === foodType); if (item === undefined) { console.log('Unknown food type'); return []; } return item.ingredients; }
这样做的好处在于：
- 可读性更强：使用数组和对象结合来代替
if..else语句，代码更加简洁易懂，并且减少了嵌套，更容易阅读和理解。 - 扩展性更好：添加新的菜单项只需要向
menu数组中添加一个新的对象即可，而不需要修改原函数getIngredients，大大提高了代码的扩展性。 - 可维护性更好：当想要删除或更新某个菜单项时，只需要修改
menu数组即可，而不需要修改原函数getIngredients。因此，代码的可维护性也更好。
5、使用对象或者Map
5.1 对象
比如我们通常会遇到这种场景：
function getStatusColor (status) { if (status === 'success') { return 'green' } if (status === 'warning') { return 'yellow' } if (status === 'info') { return 'blue' } if (status === 'error') { return 'red' } }
const statusColors = { success: 'green', warning: 'yellow', info: 'blue', error: 'red' }; function getStatusColor(status) { return statusColors[status] || ''; }
这样做的好处有两个：
- 可读性更好：当需要增加新的状态时，只需要添加一个新的键值对即可。这比原来的
if..else语句更易于阅读和维护。 - 执行效率更高：因为在JavaScript中，对象的属性访问是常数时间，而
if..else语句则需要逐个匹配条件。由于我们只需要访问一个属性，所以使用对象映射比if..else语句更有效率。
5.2 Map
来看下面的例子，我们要根据颜色打印水果：
function test(color) { switch (color) { case 'red': return ['apple', 'strawberry']; case 'yellow': return ['banana', 'pineapple']; case 'purple': return ['grape', 'plum']; default: return []; } } test(null); // [] test('yellow'); // ['banana', 'pineapple']
我们可以使用Map数据结构来优化上面的代码，具体实现如下：
const foodMap = new Map([ ['red', ['apple', 'strawberry']], ['yellow', ['banana', 'pineapple']], ['purple', ['grape', 'plum']] ]); function test(color) { return foodMap.get(color) || []; }
这样做的好处在于：
- 这段代码更加简洁：使用
Map数据结构可以使代码更短，可读性也更强。 - 可维护性更高：将数据存储在
Map中，如果需要修改或添加一个颜色和对应的食物列表，只需在Map中修改或添加一条记录即可。 - 搜索时间更短：由于
Map内部使用了哈希表来存储键值对，所以搜索时间可能比基于条件语句的方法更快。当有大量数据时，这种优化可能会显著提高代码的性能。
6、减少嵌套，提前返回
6.1 场景1
假设我们需要根据用户的年龄，返回一个字符串表示他们的人生阶段。使用if..else语句，一般可能会这样写：
function getLifeStage(age) { let stage; if (age < 1) { stage = 'baby'; } else { if (age < 4) { stage = 'toddler'; } else { if (age < 13) { stage = 'child'; } else { if (age < 20) { stage = 'teenager'; } else { if (age < 65) { stage = 'adult'; } else { stage = 'senior'; } } } } } return `Your life stage is ${stage}`; }
我们可以使用减少嵌套和提前返回的方法来优化这个冗长的if...else语句，代码如下所示：
function getLifeStage(age) { if (age < 1) { return 'Your life stage is baby'; } if (age < 4) { return 'Your life stage is toddler'; } if (age < 13) { return 'Your life stage is child'; } if (age < 20) { return 'Your life stage is teenager'; } if (age < 65) { return 'Your life stage is adult'; } return 'Your life stage is senior'; }
这样做的好处在于：
- 可读性更强：减少了嵌套层次以及大括号，使代码更加简洁明了，并且易于阅读和理解。
- 扩展性更好：当需要添加或删除一个年龄段时，只需要在相应的位置插入或删除一个if语句即可，而不需要影响其他部分的代码，大大提高了代码的扩展性。
- 错误处理更好：每个if语句可以处理一种情况，这样可以更及时地返回正确的结果。同时，避免了多个判断条件匹配的情况下重复执行同一个代码块的情况。
