“我正在参加「启航方案」”

前语‍♂️

信任我们或多或少都接触过具有巨大 if else 的项目代码吧,多重嵌套的 if else 在保护的时分真的让人很动火,有时分一个 bug 排查下来,严重感觉身体被掏空。

本文并未有消除或小看 if else的意思,if else 的好用都知道,这儿只是在某些特定场景为我们额定供应一种思路,添加我们代码的可读性。

短路运算

Javascript 的逻辑或 || 的短路运算有时分可以用来替代一些比较简略的 if else

  • 逻辑或 || 的短路运算:若左边能转成true,回来左边式子的值,反之回来右边式子的值。

下面用一个简略的案例来表述

let c
if(a){
    c = a
} else {
    c = b
}

我们看着上面的代码会伤心嘛(自己有一丢丢的强迫症),分明就是一个很简略的判别却需求写好几行代码才干完结。这个时分我们就可以用短路运算去简化我们的代码啦。

let c = a || b

这样看起来是不是就简练了许多。

三元运算符

三元运算符我觉得我们应该都很了解吧,许多时分简略的一些判别我们都可以运用三元运算符去替代 if else,这儿只推荐 一层 三元运算符,由于多层嵌套的三元运算符也不具备良好的可读性。

比如:条件为 true 时回来1,反之回来0:

const fn = (nBoolean) {
    if (nBoolean) {
        return 1
    } else {
        return 0
    }
}
// 运用三元运算符
const fn = (nBoolean) {
    return nBoolean ? 1 : 0
}

三元运算符运用的当地也比较多,比如:条件赋值,递归

// num值在nBoolean为true时为10,否则为5
let num = nBoolean ? 10 : 5
// 求0-n之间的整数的和
let sum = 0;
function add(n){
    sum += n
    return n >= 2 ? add(n - 1) : result;
};
let num = add(10);//55

switch case️

上述的两种方法:短路运算跟三元运算虽然很好用,代码也很简练,不过都只能用于简略的判别,遇到多重条件判别就不能运用了。

关于 switch case,虽然它的可读性确实比 else if 更高,可是我想我们应该都觉得它写起来比较费事吧(横竖我觉得很费事)。

例:有A、B、C、D四种种类型,在A、B的时分输出1,C输出2、D输出3,默许输出0。

let type = 'A'
//if else if
if (type === 'A' || type === 'B') {
    console.log(1);
} else if (type === 'C') {
    console.log(2);
} else if(type === 'D') {
    console.log(3);
} else {
    console.log(0)
}
//switch case
switch (type) {
    case 'A':
    case 'B':
        console.log(1)
        break
    case 'C':
        console.log(2)
        break
    case 'D':
        console.log(3);
        break;
    default:
        console.log(0)
}

方针配备/战略方式

方针配备看起来跟 战略方式 差不多,都是根据不同得参数运用不同得数据/算法/函数。

战略方式就是将一系列算法封装起来,并使它们相互之间可以替换。被封装起来的算法具有独立性,外部不行改动其特性。

接下来我们用方针配备的方法完结一下上述的比如

let type = 'A'
let tactics = {
    'A': 1,
    'B': 1,
    'C': 2,
    'D': 3,
    default: 0
}
console.log(tactics[type]) // 1

接下来用几个比如让我们愈加了解一点。

案例1 商场促销价

根据不同的用户运用不同的扣头,如:一般用户不打折,一般会员用户9折,年费会员8.5折,超级会员8折。

运用if else完结

// 获取扣头 --- 运用if else
const getDiscount = (userKey) => {
    if (userKey === '一般会员') {
        return 0.9
    } else if (userKey === '年费会员') {
        return 0.85
    } else if (userKey === '超级会员') {
        return 0.8
    } else {
        return 1
    }
}
console.log(getDiscount('一般会员')) // 0.9

运用方针配备/战略方式完结

// 获取扣头 -- 运用方针配备/战略方式
const getDiscount = (userKey) => {
    // 我们可以根据用户类型来生成我们的扣头方针
    let discounts = {
        '一般会员': 0.9,
        '年费会员': 0.85,
        '超级会员': 0.8,
        'default': 1
    }
    return discounts[userKey] || discounts['default']
}
console.log(getDiscount('一般会员')) // 0.9

从上面的案列中可以显着看得出来,运用方针配备比运用if else可读性更高,后续假定需求添加用户扣头也只需求修正扣头方针就行。

方针配备不一定非要运用方针去办理我们键值对,还可以运用 Map去办理,如:

// 获取扣头 -- 运用方针配备/战略方式
const getDiscount = (userKey) => {
    // 我们可以根据用户类型来生成我们的扣头方针
    let discounts = new Map([
        ['一般会员', 0.9],
        ['年费会员', 0.85],
        ['超级会员', 0.8],
        ['default', 1]
    ])
    return discounts.get(userKey) || discounts.get('default')
}
console.log(getDiscount('一般会员')) // 0.9

案例2 年终奖

公司的年终奖根据职工的薪酬基数和绩效等级来发放的。例如,绩效为A的人年终奖有4倍薪酬,绩效为B的有3倍,绩效为C的只需2倍。

假定财务部要求我们供应一段代码来完结这个核算逻辑,我们要怎样完结呢?

这不是很简略嘛,一个函数就搞定了。

const calculateBonus = (performanceLevel, salary) => {
    if (performanceLevel === 'A'){
        return salary * 4
    }
    if (performanceLevel === 'B'){
        return salary * 3
    }
    if (performanceLevel === 'C'){
        return salary * 2
    }
}
calculateBonus( 'B', 20000 ) // 输出:60000

可以发现,这段代码非常简略,可是 calculateBonus函数比较巨大,一切的逻辑分支都包含在if else语句中,假定添加了一种新的绩效等级D,或许把A等级的倍数改成5,那我们有必要阅读一切代码才干去做修正‍♂️。

所以我们可以用方针配备/战略方式去简化这个函数

let strategies = new Map([
    ['A', 4],
    ['B', 3],
    ['C', 2]
])
const calculateBonus = (performanceLevel, salary) => { 
    return strategies.get(performanceLevel) * salary
}
calculateBonus( 'B', 20000 ) // 输出:60000

至此,这个需求做完了,然后产品司理说要加上一个部分区分,假定公司有两个部分D和F,D部分的成绩较好,所以年终奖翻1.2倍,F部分的成绩较差,年终奖打9折。

改造以上代码,把状态值拼接,然后存入Map中

// 以绩效_部分的方法拼接键值存入
let strategies = new Map([
    ['A_D', 4 * 1.2],
    ['B_D', 3 * 1.2],
    ['C_D', 2 * 1.2],
    ['A_F', 4 * 0.9],
    ['B_F', 3 * 0.9],
    ['C_F', 2 * 0.9]
])
const calculateBonus = (performanceLevel, salary, department) => { 
    return strategies.get(`${performanceLevel}_${department}`) * salary
}
calculateBonus( 'B', 20000, 'D' ) // 输出:72000

结束

本文首要是向我们传递一种思想,我们有许多的方法去优化我们的代码,进步我们代码的可读性。

if else并没有小看的意思,只是期望在我们今后的代码中不仅仅只需if else

博客首要记录一些学习的文章,如有不足,望我们指出,谢谢。