Satu artikel mengajar anda cara melaksanakan pengoptimuman cawangan dalam JavaScript

Artikel ini membawa anda pengetahuan yang berkaitan tentang JavaScript, yang terutamanya memperkenalkan kandungan yang berkaitan tentang pengoptimuman cawangan Jika terdapat banyak syarat penghakiman, menggunakan sebilangan besar cawangan if akan menjadikan keseluruhan kod Kebolehbacaan dan kebolehselenggaraan sangat berkurangan. Mari kita lihat.

[Cadangan berkaitan: Tutorial video JavaScript, bahagian hadapan web]

Tonton baru-baru ini sambil melayari Internet Berikut adalah sekeping kod:

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("此人比较神秘！");
    }}

Pada pandangan pertama, saya tidak merasakan apa-apa yang luar biasa, tetapi jika terdapat 1,000 syarat penghakiman, adakah sukar untuk menulis 1,000 if cawangan dalam cara 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, ia sememangnya masalah yang agak menyusahkan, jadi adakah ada cara untuk mencapai keperluan dan mengelakkan masalah ini?

Pengoptimuman cawangan ringkas

Ini melibatkan pengoptimuman cawangan Marilah kita mengubah 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 kesamaan, maka kita boleh menulis syarat penghakiman ini sebagai atribut ke dalam objek describeForNameMap Nilai yang sepadan dengan atribut ini ialah Fungsi pemprosesan selepas keadaan 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.

Pengoptimuman cawangan yang kompleks

Kemudian jika keadaan penghakiman dalam if cawangan kami bukan sekadar penghakiman kesaksamaan yang mudah, tetapi juga mempunyai beberapa ungkapan yang perlu dikira , Apa yang patut kita buat? (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. describeForNameMapfinddescribeForNameMap

Cawangan pengekstrakan

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

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

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("此人比较神秘！");}

akan mengembalikan nilai keputusan penghakiman yang diproses.

getUserDescribePada masa ini, getUserDescribepenekanan

fungsi

terletak pada getUserDescribepemprosesan keputusan penghakiman, bukan di cabang mana keputusan diperoleh, contohnya : Jika anda tidak melakukan pengoptimuman cawangan, fungsi

akan diduduki oleh sejumlah besar

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;}

cawangan, menjadikan fokus fungsi

hilang (fokus fungsi getUserDescribe if adalah untuk menilai pemprosesan hasil getUserDescribe, bukan cawangan mana hasil diperolehi), kemudian anda boleh melihat kod kami yang dioptimumkan: getUserDescribeLihat fungsi

dioptimumkan yang kita boleh Anda tahu, ia mendapat nilai daripada

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;}

dan memberikannya kepada

(kami tidak kisah bagaimana getUserDescribe mengembalikan nilai itu), dan kemudian melakukan beberapa pemprosesan pada describeForNameMap. Ini menyerlahkan fokus fungsi str (describeForNameMap memproses keputusan penghakiman str str). getUserDescribe

Dalam contoh ini, elemen kedua subbaris describeForNameMap boleh terus menggunakan nilai: [(name) => name.length > 3, "名字太长"], tetapi untuk kebolehskalaan kod keseluruhan, adalah disyorkan untuk menggunakan fungsi, kerana fungsi itu boleh menerima parameter , untuk memudahkan pengendalian senario yang lebih kompleks pada masa hadapan.

Kesimpulan

Pengoptimuman cawangan mempunyai kaedah pelaksanaan dan senario aplikasi yang berbeza dalam pelbagai bahasa Artikel ini lulus JavaScriptMemperkenalkan dua idea pengoptimuman cawangan kod Pelaksanaan 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.

[Cadangan berkaitan: Tutorial video JavaScript, bahagian hadapan web]

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