Perkongsian petua: kurangkan penggunaan if-else dan tingkatkan kebolehbacaan kod!

Saya percaya bahawa semua orang mempunyai lebih kurang kod projek dengan berbilang if elses sangat menjengkelkan semasa penyelenggaraan Kadang-kadang selepas pepijat diperiksa, saya berasa tidak selesa. if else

Artikel ini tidak bermaksud untuk menghapuskan atau mendiskriminasikan

Semua orang tahu betapa bergunanya if else ini hanya untuk memberikan anda idea tambahan dalam beberapa senario tertentu untuk meningkatkan kecekapan kod kami. if else

Kendalian litar pintas

Logik Javascript atau operasi litar pintas

kadangkala boleh digunakan untuk menggantikan yang lebih mudah ||if else

Kendalian litar pintas logik ATAU
• : Jika bahagian kiri boleh ditukar kepada benar, nilai ungkapan kiri dikembalikan, jika tidak nilai ungkapan kanan dikembalikan. ||

Berikut ialah kes mudah untuk menggambarkan

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

Semua orang akan berasa tidak selesa melihat kod di atas (saya mempunyai beberapa gangguan obsesif-kompulsif), ia jelas merupakan satu yang mudah Penghakiman memerlukan menulis beberapa baris kod untuk mencapainya. Pada masa ini kami boleh menggunakan operasi litar pintas untuk memudahkan kod kami.

let c = a || b

Adakah ini kelihatan lebih mudah?

Operator Ternary

Saya rasa semua orang harus biasa dengan operator ternary Banyak kali kita boleh menggunakan operator ternary untuk membuat pertimbangan mudah. hanya

dan satu tahap if else pengendali ternary disyorkan di sini, kerana operator ternary bersarang berbilang peringkat juga tidak mempunyai kebolehbacaan yang baik. Contoh: Kembalikan 1 apabila syarat adalah benar, sebaliknya kembalikan 0:

Pengendali ternary juga digunakan di banyak tempat, seperti: penugasan bersyarat, rekursi...

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

Dua kaedah di atas: operasi litar pintas dan operasi ternary sangat berguna dan kodnya sangat mudah, tetapi ia hanya boleh digunakan untuk tujuan mudah. ​​Penghakiman tidak boleh digunakan apabila berbilang penghakiman bersyarat ditemui.

Mengenai

, walaupun ia memang lebih mudah dibaca daripada

, saya rasa semua orang rasa lebih menyusahkan untuk menulis (saya rasa menyusahkan pula). switch caseelse ifContoh: Terdapat empat jenis: A, B, C dan D. Apabila A dan B adalah output, 1 ialah output, C output 2 dan D output 3. Output lalai ialah 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)
}

Mod konfigurasi/strategi objek

Konfigurasi objek kelihatan serupa dengan

, kedua-duanya menggunakan data/algoritma/fungsi yang berbeza mengikut parameter yang berbeza .

策略模式Corak strategi merangkumi satu siri algoritma dan menjadikannya boleh ditukar ganti. Algoritma terkapsul adalah bebas dan ciri-cirinya tidak boleh diubah oleh dunia luar.

Seterusnya, kami akan menggunakan kaedah konfigurasi objek untuk melaksanakan contoh di atas

Seterusnya, kami akan menggunakan beberapa contoh untuk menjadikan semua orang lebih akrab.

let type = 'A'

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

Harga promosi Pusat beli-belah Kes 1

Gunakan diskaun berbeza mengikut pengguna berbeza, seperti: tiada diskaun untuk pengguna biasa, diskaun 10% untuk ahli biasa dan 15 % diskaun untuk ahli tahunan , diskaun 20% untuk ahli super.

Gunakan

untuk melaksanakan

if else

Gunakan konfigurasi objek/corak strategi untuk dilaksanakan?

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

Jelas daripada kes di atas bahawa menggunakan konfigurasi Objek lebih mudah dibaca daripada menggunakan if else Jika anda perlu menambah diskaun pengguna kemudian, anda hanya perlu mengubah suai objek diskaun.

// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
    // 我们可以根据用户类型来生成我们的折扣对象
    let discounts = {
        '普通会员': 0.9,
        '年费会员': 0.85,
        '超级会员': 0.8,
        'default': 1
    }
    return discounts[userKey] || discounts['default']
}
console.log(getDiscount('普通会员')) // 0.9

Konfigurasi objek tidak semestinya perlu menggunakan objek untuk mengurus pasangan nilai kunci kami Anda juga boleh menggunakan

untuk mengurus?, seperti:

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

Kes. Anugerah Akhir Tahun 2

Bonus akhir tahun syarikat adalah berdasarkan asas gaji dan tahap prestasi pekerja. Sebagai contoh, bonus akhir tahun bagi seseorang yang mempunyai prestasi A ialah 4 kali ganda daripada gaji, iaitu bagi seseorang yang mempunyai prestasi B ialah 3 kali ganda, dan bagi seseorang yang mempunyai prestasi C hanya 2 kali ganda.

Jika Jabatan Kewangan memerlukan kami menyediakan sekeping kod untuk melaksanakan logik perakaunan ini, bagaimana kami melaksanakannya?

Bukankah ini sangat mudah?

Anda boleh mendapati bahawa kod ini sangat mudah, tetapi fungsi

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

agak besar Semua cabang logik disertakan dalam pernyataan

Jika tahap prestasi baharu D ditambah. Atau tukar gandaan tahap A kepada 5, maka kita mesti membaca semua kod untuk membuat pengubahsuaian. calculateBonusif elseJadi kita boleh menggunakan corak konfigurasi/strategi objek untuk memudahkan fungsi ini

Pada ketika ini, keperluan ini telah selesai, dan kemudian pengurus produk berkata bahawa perbezaan jabatan haruslah tambah. Andaikan syarikat itu mempunyai dua Terdapat jabatan D dan F. Jabatan D mempunyai prestasi yang lebih baik, jadi bonus akhir tahun dinaikkan sebanyak 1.2 kali ganda Jabatan F mempunyai prestasi yang lemah, jadi bonus akhir tahun didiskaun sebanyak 10%. .

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

Ubah kod di atas, sambungkan nilai status, dan kemudian simpannya dalam Peta

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

Tamat

Artikel ini terutamanya untuk sampaikan kepada semua orang Pemikiran, kami mempunyai banyak cara untuk mengoptimumkan kod kami dan meningkatkan kebolehbacaan kod kami.

tidak bermaksud mendiskriminasi

, saya hanya berharap akan ada lebih daripada sekadar

dalam kod masa hadapan anda. if elseif elseUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan

! !