Open sfsoul opened 4 years ago
function supply(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
// 条件 1: 水果存在
if (fruit) {
// 条件 2: 属于红色水果
if (redFruits.includes(fruit)) {
console.log('红色水果');
// 条件 3: 水果数量大于 10 个
if (quantity > 10) {
console.log('数量大于 10 个');
}
}
} else {
throw new Error('没有水果啦!');
}
}
存在三层 if
条件嵌套 ,若提前 return
掉无效条件,将 if else
的多重嵌套层次减少到一层,更容易理解和维护。
function supply(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (!fruit) throw new Error('没有水果啦'); // 条件 1: 当 fruit 无效时,提前处理错误
if (!redFruits.includes(fruit)) return; // 条件 2: 当不是红色水果时,提前 return
console.log('红色水果');
// 条件 3: 水果数量大于 10 个
if (quantity > 10) {
console.log('数量大于 10 个');
}
}
需要枚举值处理不同的业务分支逻辑时:
// if else 写法
function pick(color) {
// 根据颜色选择水果
if(color === 'red') {
return ['apple', 'strawberry'];
} else if (color === 'yellow') {
return ['banana', 'pineapple'];
} else if (color === 'purple') {
return ['grape', 'plum'];
} else {
return [];
}
}
if else
分支太多if else
更适合于条件区间判断,而 switch case
更适合于具体枚举值的分支判断// switch case 优化
function pick(color) {
// 根据颜色选择水果
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
借助 Object 的 {key: value}
结构,在 Object 中枚举所有的情况,然后将 key
作为索引,直接通过 Object.key
或者 Object[key]
来获取内容。
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum'],
};
function pick(color) {
return fruitColor[color] || [];
}
使用 Map 数据结构,真正的 (key, value)
键值对结构
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function pick(color) { return fruitColor.get(color) || []; }
## 使用数组新特性简化逻辑判断
### 多条件判断
function judge(fruit) { if (fruit === 'apple' || fruit === 'strawberry' || fruit === 'cherry' || fruit === 'cranberries' ) { console.log('red'); } }
**使用 `Array.includes` 优化:**
// 将判断条件抽取成一个数组 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; function judge(fruit) { if (redFruits.includes(fruit)) { console.log('red'); } }
### 判断数组中是否所有项都满足某条件
const fruits = [ { name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'grape', color: 'purple' } ];
function match() { // 条件:所有水果都必须是红色 const isAllRed = fruits.every(f => f.color === 'red'); console.log(isAllRed); // false }
### 判断数组中是否有某一项满足条件
const fruits = [ { name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'grape', color: 'purple' } ];
// 条件:是否有红色水果 const isAnyRed = fruits.some(f => f.color == 'red');
应避免三个以上参数的函数。参数超过三个意味着函数功能过于复杂,此时需要重新优化你的函数。当确实需要多个参数时,大多数情况下可以考虑将这些参数封装成一个对象。
Bad:
function createMenu(title, body, buttonText, cancellable) {
// ...
}
Good:
function createMenu({ title, body, buttonText, cancellable }) {
// ...
}
createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
})
参考文章