ヒントの共有: if-else の使用を減らし、コードの可読性を高めます。

誰もが多かれ少なかれ、巨大な if else を含むプロジェクト コードに遭遇したことがあると思います。複数のネストされた if else は、メンテナンス中に非常に煩わしいものです。バグのトラブルシューティングを行った後、場合によっては、深刻な虚無感を感じます。

この記事は、if else を排除したり差別したりすることを目的としたものではありません。誰もが if else の有用性を知っています。ここでは、特定のシナリオにおける全員を対象としています。コードの可読性を高めるための追加のアイデアを提供してください。

ショートサーキット操作

JavaScript のロジックまたは || のショートサーキット操作を使用して、より単純な # を置き換えることができる場合があります。 ##if else

論理和の短絡演算
• ||: 左辺が true に変換できた場合、左辺の式の値が返され、それ以外の場合は右側の式の値が返されます。

簡単なケースを使って説明しましょう

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

上記のコードを見ると誰もが不快に感じるでしょう (私は強迫性障害を患っています)。これは明らかに非常に単純な判断ですが、これを実現するには、数行のコードを記述する必要があります。現時点では、ショートサーキット操作を使用してコードを簡素化できます。

let c = a || b

これのほうがずっとシンプルだと思いませんか?

三項演算子

三項演算子は誰もがよく知っているはずです。多くの場合、三項演算子を使用して簡単な判断を行うことができます。

if の代わりにelse では、複数レベルのネストされた三項演算子も可読性が低いため、ここでは 1 レベルの 三項演算子のみをお勧めします。

例: 条件が 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

上記 2 つの方法、短絡演算と三値演算は非常に便利で、コードも非常に簡潔ですが、単純な判断にしか使用できません。複数の条件を判定する場合には使用できません。

switch case は、確かに else if よりも可読性は高いですが、書くのが面倒だと誰もが思うと思います (とにかく私は非常に面倒だと感じます) 。

例: A、B、C、D の 4 種類があります。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 ショッピング モールのプロモーション価格

一般ユーザーは割引なし、一般会員は 10% オフ、15 割引など、ユーザーに応じて割引を使い分けます。年間会員は % オフ、スーパー会員は 20% オフ。

Use

if elseAchievement

// 获取折扣 --- 使用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

Use objectconfiguration/strategy pattern to達成?

// 获取折扣 -- 使用对象配置/策略模式
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倍しかありません。

財務部門から、この会計ロジックを実装するためのコードの提供を要求された場合、どのように実装すればよいでしょうか?

これは非常に簡単ではありませんか? たった 1 つの関数で実行できます。

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 部門の業績が悪いため、期末賞与は 10% 割引されます。

上記のコードを変換し、ステータス値を結合し、マップに保存します。

// 以绩效_部门的方式拼接键值存入
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

End

この記事は主に、次のことを伝えることを目的としています。コードを最適化し、コードの読みやすさを向上させる方法はたくさんあります。

は

if else を差別するという意味ではありません。将来のコードには if else だけではないものがあることを願っています。

プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！