Satu artikel mengajar anda cara melaksanakan JavaScript jika pengoptimuman cawangan

Adakah 1000 syarat penghakiman memerlukan 1000 jika? Bagaimana untuk mengoptimumkan jika penyata cawangan? Artikel berikut akan bercakap dengan anda tentang cara mencapai pengoptimuman cawangan. Saya harap ia akan membantu semua orang!

Baru-baru ini saya melihat sekeping kod ini semasa melayari Internet:

function getUserDescribe(name) {
    if (name === "小刘") {
        console.log("刘哥哥");
    } else if (name === "小红") {
        console.log("小红妹妹");
    } else if (name === "陈龙") {
        console.log("大师");
    } else if (name === "李龙") {
        console.log("师傅");
    } else if (name === "大鹏") {
        console.log("恶人");
    } else {
        console.log("此人比较神秘！");
    }
}

Saya tidak merasakan apa-apa yang luar biasa pada pandangan pertama, tetapi jika ada adakah 1000 penghakiman Syarat, adakah sukar untuk menulis 1000 if cabang mengikut kaedah penulisan ini?

Jika anda menulis sejumlah besar if cawangan, dan anda juga mungkin mempunyai cawangan dalam cawangan , anda boleh bayangkan bahawa kebolehbacaan dan kebolehselenggaraan keseluruhan kod akan dikurangkan dengan banyaknya, yang akan dikurangkan dengan banyak dalam pembangunan sebenar , sememangnya merupakan masalah yang agak menyusahkan, jadi adakah ada cara untuk mencapai keperluan sambil mengelakkan masalah ini? [Pembelajaran yang disyorkan: tutorial video javascript]

1️⃣ Pengoptimuman cawangan mudah

Ini melibatkan pengoptimuman cawangan, mari berubah pemikiran kita dan mengoptimumkan struktur kod di atas:

function getUserDescribe(name) {
    const describeForNameMap = {
        小刘: () => console.log("刘哥哥"),
        小红: () => console.log("小红妹妹"),
        陈龙: () => console.log("大师"),
        李龙: () => console.log("师傅"),
        大鹏: () => console.log("恶人"),
    };
    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘！");
}

Pertimbangan dalam kod masalah semuanya mudah Pertimbangan kesaksamaan, maka kita boleh menggunakan syarat pertimbangan ini sebagai atribut Tuliskannya ke objek describeForNameMap Nilai yang sepadan dengan atribut ini ialah fungsi pemprosesan selepas syarat ditetapkan. Selepas

kita hanya perlu mendapatkan nilai yang sepadan dalam objek getUserDescribe melalui parameter yang diterima oleh fungsi describeForNameMap, dan jika nilai itu wujud, jalankan nilai (kerana nilainya ialah fungsi).

Dengan cara ini, pertimbangan cabang if asal ditukar kepada nilai sepadan key value yang mudah, dan keadaan serta fungsi pemprosesan sepadan dengan satu sama lain, menjadikannya jelas sekali imbas.

2️⃣ Pengoptimuman cawangan yang kompleks

Kemudian jika syarat penghakiman dalam if cawangan kami bukan sekadar penghakiman kesaksamaan yang mudah, tetapi juga mempunyai beberapa ungkapan yang perlu dikira, apa yang perlu kita lakukan? (Seperti yang ditunjukkan di bawah)

function getUserDescribe(name) {
    if (name.length > 3) {
        console.log("名字太长");
    } else if (name.length < 2) {
        console.log("名字太短");
    } else if (name[0] === "陈") {
        console.log("小陈");
    } else if (name[0] === "李" && name !== "李鹏") {
        console.log("小李");
    } else if (name === "李鹏") {
        console.log("管理员");
    } else {
        console.log("此人比较神秘！");
    }
}

Untuk kod dengan struktur ini, objek tidak boleh diperkenalkan untuk pengoptimuman cawangan Kami boleh memperkenalkan tatasusunan dua dimensi untuk pengoptimuman cawangan:

<🎜. >

function getUserDescribe(name) {
    const describeForNameMap = [
        [
            (name) => name.length > 3, // 判断条件
            () => console.log("名字太长") // 执行函数
        ],
        [
            (name) => name.length < 2, 
            () => console.log("名字太短")
        ],
        [
            (name) => name[0] === "陈", 
            () => console.log("小陈")
        ],
        [
            (name) => name === "大鹏", 
            () => console.log("管理员")
        ],
        [
            (name) => name[0] === "李" && name !== "李鹏",
            () => console.log("小李"),
        ],
    ];
    // 获取符合条件的子数组
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    // 子数组存在则运行子数组中的第二个元素（执行函数）
    getDescribe ? getDescribe[1]() : console.log("此人比较神秘！");
}

Di atas kami mentakrifkan tatasusunan

Setiap elemen dalam tatasusunan mewakili satu set syarat penghakiman dan fungsi pelaksanaan (juga tatasusunan). Subarray dalam tatasusunan yang memenuhi syarat penghakiman boleh digunakan. describeForNameMapfinddescribeForNameMap3️⃣ Cawangan ekstrak

Objek yang kami takrifkan dalam contoh di atas ialah struktur bebas dan kami boleh mengekstraknya sepenuhnya:

describeForNameMap

const describeForNameMap = {
    小刘: () => console.log("刘哥哥"),
    小红: () => console.log("小红妹妹"),
    陈龙: () => console.log("大师"),
    李龙: () => console.log("师傅"),
    大鹏: () => console.log("恶人"),
};

function getUserDescribe(name) {
    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘！");
}

Melalui pembangunan modular, anda juga boleh menulis objek

const describeForNameMap = [
    [
        (name) => name.length > 3, // 判断条件
        () => console.log("名字太长") // 执行函数
    ],
    [
        (name) => name.length < 2, 
        () => console.log("名字太短")
    ],
    [
        (name) => name[0] === "陈", 
        () => console.log("小陈")
    ],
    [
        (name) => name === "大鹏", 
        () => console.log("管理员")
    ],
    [
        (name) => name[0] === "李" && name !== "李鹏",
        () => console.log("小李"),
    ],
];
    
function getUserDescribe(name) {
    // 获取符合条件的子数组
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    // 子数组存在则运行子数组中的第二个元素（执行函数）
    getDescribe ? getDescribe[1]() : console.log("此人比较神秘！");
}

ini ke dalam fail

yang berasingan, dan kemudian mengimportnya di mana-mana sahaja anda perlu menggunakannya.

mapjs

4️⃣ Kontroversi

Dengan cara ini, keseluruhan fungsi menjadi sangat ringkas Sesetengah pelajar mungkin bertanya apakah kegunaan ini? Bukankah ini lebih menyusahkan? Jika anda benar-benar rasa

tidak kelihatan bagus, maka saya hanya akan menggunakan

dan bukannya getUserDescribe: if elseif returnelseBayangkan, jika terdapat 1000 cabang penghakiman dalam <🎜 anda > fungsi, Dan ia juga mempunyai sejumlah besar kod pemprosesan yang dilaksanakan berdasarkan keputusan penghakiman, dan fungsi

akan mengembalikan nilai keputusan penghakiman yang diproses.

function getUserDescribe(name) {
    if (name === "小刘") {
        console.log("刘哥哥");
        return;
    }
    if (name === "小红") {
        console.log("小红妹妹");
        return;
    }
    if (name === "陈龙") {
        console.log("大师");
        return;
    }
    if (name === "李龙") {
        console.log("师傅");
        return;
    }
    if (name === "大鹏") {
        console.log("恶人");
        return;
    }
    console.log("此人比较神秘！");
}

Pada masa ini, getUserDescribepenekanangetUserDescribe fungsi

terletak pada

pemprosesan keputusan penghakimangetUserDescribe, bukan di cabang mana keputusan diperoleh, contohnya : Jika anda tidak melakukan pengoptimuman cawangan, fungsi akan diduduki oleh sejumlah besar

cawangan, menjadikan fokus fungsi

function getUserDescribe(name) {
    let str; // 存储判断结果
    if (name.length > 3) {
        str = "名字太长";
    } else if (name.length < 2) {
        str = "名字太短";
    } else if (name[0] === "陈") {
        str = "小陈";
    } else if (name[0] === "李" && name !== "李鹏") {
        str = "小李";
    } else if (name === "李鹏") {
        str = "管理员";
    } else {
        str = "此人比较神秘！";
    }
    // 对判断结果str的一些处理
    // ......
    console.log(str);
    return str;
}

hilang (fokus fungsi

getUserDescribe adalah untuk menilai pemprosesan hasil if, bukan cawangan mana hasil diperolehi), kemudian anda boleh melihat kod kami yang dioptimumkan: getUserDescribegetUserDescribeLihat fungsi dioptimumkan yang kita boleh Anda tahu, ia mendapat nilai daripada

dan memberikannya kepada

const describeForNameMap = [
    [(name) => name.length > 3, () => "名字太长"],
    [(name) => name.length < 2, () => "名字太短"],
    [(name) => name[0] === "陈", () => "小陈"],
    [(name) => name === "大鹏", () => "管理员"],
    [(name) => name[0] === "李" && name !== "李鹏", () => "小李"],
];

function getUserDescribe(name) {
    let str; // 存储判断结果
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    if (getDescribe) {
        str = getDescribe[1]();
    } else {
        str = "此人比较神秘！";
    }
    // 对判断结果str的一些处理
    // ......
    console.log(str);
    return str;
}

(kami tidak kisah bagaimana

mengembalikan nilai itu), dan kemudian melakukan beberapa pemprosesan pada getUserDescribe. Ini menyerlahkan fokus fungsi describeForNameMap (str memproses keputusan penghakiman str describeForNameMap). strgetUserDescribeDalam contoh ini, elemen kedua subbaris boleh terus menggunakan nilai:

, tetapi untuk kebolehskalaan kod keseluruhan, adalah disyorkan untuk menggunakan fungsi, kerana Parameter fungsi boleh diterima untuk memudahkan pengendalian senario yang lebih kompleks kemudian.

? Kesimpulan

Pengoptimuman cawangan mempunyai kaedah pelaksanaan dan senario aplikasi yang berbeza dalam pelbagai bahasa. Artikel ini memperkenalkannya melalui JavaScript Dua idea pengoptimuman cawangan kod diperkenalkan Perlaksanaan kod adalah sangat mudah, dan tumpuan adalah pada aplikasi idea ini.

Malah, terdapat kontroversi mengenai isu pengoptimuman cawangan pada masa ini terdapat dua pandangan:

• Lihat 1: Tidak perlu bersusah payah. mengoptimumkannya dan mengoptimumkannya Oleh kerana kod berikut mencipta 对象/数组 tambahan, mendapatkan semula 对象/数组 adalah lebih tidak cekap daripada hanya menggunakan if else.
• Paparan 2: Kod yang dioptimumkan cawangan 可读性/可维护性 adalah lebih baik dan isu prestasi yang disebabkan oleh memperkenalkan 对象/数组 sememangnya tidak wajar disebut dalam era hari ini.

Apakah pendapat anda?

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengajaran Pengaturcaraan! !

Atas ialah kandungan terperinci Satu artikel mengajar anda cara melaksanakan JavaScript jika pengoptimuman cawangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!