JavaScript怎么實(shí)現(xiàn)分支優(yōu)化

這篇“JavaScript怎么實(shí)現(xiàn)分支優(yōu)化”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“JavaScript怎么實(shí)現(xiàn)分支優(yōu)化”文章吧。

成都創(chuàng)新互聯(lián)公司主營(yíng)淮陰網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開(kāi)發(fā),淮陰h5微信平臺(tái)小程序開(kāi)發(fā)搭建,淮陰網(wǎng)站營(yíng)銷推廣歡迎淮陰等地區(qū)企業(yè)咨詢

最近在網(wǎng)上沖浪時(shí)看到了這樣一段代碼：

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

咋一看沒(méi)感覺(jué)有什么異常，但如果有1000個(gè)判斷條件，按照這種寫(xiě)法難不成要寫(xiě)1000個(gè) if 分支？

如果寫(xiě)了大量的 if 分支，并且可能還具有分支套分支，可以想象到整個(gè)代碼的可讀性和可維護(hù)都會(huì)大大降低，這在實(shí)際開(kāi)發(fā)中，確實(shí)是一個(gè)比較頭疼的問(wèn)題，那有沒(méi)有什么辦法能夠即實(shí)現(xiàn)需求又能避免這些問(wèn)題呢？

簡(jiǎn)單分支優(yōu)化

這就涉及到分支優(yōu)化，讓我們轉(zhuǎn)換思維，去優(yōu)化一下上面的代碼結(jié)構(gòu)：

function getUserDescribe(name) {
    const describeForNameMap = {
        小劉: () => console.log("劉哥哥"),
        小紅: () => console.log("小紅妹妹"),
        陳龍: () => console.log("大師"),
        李龍: () => console.log("師傅"),
        大鵬: () => console.log("惡人"),
    };
    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比較神秘！");}

問(wèn)題代碼中的判斷都是簡(jiǎn)單的相等判斷，那么我們就可以將這些判斷條件作為一個(gè)屬性寫(xiě)到對(duì)象describeForNameMap 中去，這些屬性對(duì)應(yīng)的值就是條件成立后的處理函數(shù)。

之后我們就只需通過(guò)getUserDescribe函數(shù)接收到的參數(shù)去獲取describeForNameMap對(duì)象中對(duì)應(yīng)的值，如果該值存在就運(yùn)行該值（因?yàn)橹凳且粋€(gè)函數(shù)）。

這樣一來(lái)原本的 if 分支判斷就轉(zhuǎn)換成了簡(jiǎn)單的key value對(duì)應(yīng)值，條件與處理函數(shù)一一對(duì)應(yīng)，一目了然。

復(fù)雜分支優(yōu)化

那如果我們的 if 分支中的判斷條件不只是簡(jiǎn)單的相等判斷，還具有一些需要計(jì)算的表達(dá)式時(shí)，我們?cè)撛趺崔k呢？（如下所示）

function getUserDescribe(name) {
    if (name.length > 3) {
        console.log("名字太長(zhǎng)");
    } 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("此人比較神秘！");
    }}

對(duì)于這種結(jié)構(gòu)的代碼就不能引入對(duì)象來(lái)進(jìn)行分支優(yōu)化了，我們可以引入二維數(shù)組來(lái)進(jìn)行分支優(yōu)化：

function getUserDescribe(name) {
    const describeForNameMap = [
        [
            (name) => name.length > 3, // 判斷條件
            () => console.log("名字太長(zhǎng)") // 執(zhí)行函數(shù)
        ],
        [
            (name) => name.length < 2, 
            () => console.log("名字太短")
        ],
        [
            (name) => name[0] === "陳", 
            () => console.log("小陳")
        ],
        [
            (name) => name === "大鵬", 
            () => console.log("管理員")
        ],
        [
            (name) => name[0] === "李" && name !== "李鵬",
            () => console.log("小李"),
        ],
    ];
    // 獲取符合條件的子數(shù)組
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    // 子數(shù)組存在則運(yùn)行子數(shù)組中的第二個(gè)元素（執(zhí)行函數(shù)）
    getDescribe ? getDescribe[1]() : console.log("此人比較神秘！");}

上面我們定義了一個(gè)describeForNameMap數(shù)組，數(shù)組內(nèi)的每一個(gè)元素代表一個(gè)判斷條件與其執(zhí)行函數(shù)的集合（也是一個(gè)數(shù)組），之后我們通過(guò)數(shù)組的find方法查找describeForNameMap數(shù)組中符合判斷條件的子數(shù)組即可。

抽離分支

上面例子中我們定義的這個(gè)describeForNameMap對(duì)象是一個(gè)獨(dú)立的結(jié)構(gòu)，我們完全可以將它抽離出去：

const describeForNameMap = {
    小劉: () => console.log("劉哥哥"),
    小紅: () => console.log("小紅妹妹"),
    陳龍: () => console.log("大師"),
    李龍: () => console.log("師傅"),
    大鵬: () => console.log("惡人"),};function getUserDescribe(name) {
    describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比較神秘！");}

登錄后復(fù)制

const describeForNameMap = [
    [
        (name) => name.length > 3, // 判斷條件
        () => console.log("名字太長(zhǎng)") // 執(zhí)行函數(shù)
    ],
    [
        (name) => name.length < 2, 
        () => console.log("名字太短")
    ],
    [
        (name) => name[0] === "陳", 
        () => console.log("小陳")
    ],
    [
        (name) => name === "大鵬", 
        () => console.log("管理員")
    ],
    [
        (name) => name[0] === "李" && name !== "李鵬",
        () => console.log("小李"),
    ],];
    function getUserDescribe(name) {
    // 獲取符合條件的子數(shù)組
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    // 子數(shù)組存在則運(yùn)行子數(shù)組中的第二個(gè)元素（執(zhí)行函數(shù)）
    getDescribe ? getDescribe[1]() : console.log("此人比較神秘！");}

通過(guò)模塊化的開(kāi)發(fā)也可以將這個(gè)map對(duì)象寫(xiě)進(jìn)一個(gè)單獨(dú)的js文件，之后在需要使用的地方導(dǎo)入即可。

爭(zhēng)議

這樣一來(lái)整個(gè)getUserDescribe函數(shù)就變得非常簡(jiǎn)潔，有的同學(xué)可能會(huì)問(wèn)這有什么用呢？這不是更加麻煩了嗎？如果真的嫌if else不好看，那我就使用if return不用else就好了：

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

試想一下，如果你getUserDescribe函數(shù)中有1000個(gè)判斷分支，并且還具有大量的根據(jù)判斷結(jié)果來(lái)執(zhí)行的處理代碼，并且getUserDescribe函數(shù)會(huì)返回這個(gè)處理后的判斷結(jié)果的值。

這時(shí)getUserDescribe函數(shù)的重點(diǎn)在于對(duì)判斷結(jié)果的處理，而不在于這個(gè)結(jié)果是通過(guò)什么分支獲取的，例如：

function getUserDescribe(name) {
    let str; // 存儲(chǔ)判斷結(jié)果
    if (name.length > 3) {
        str = "名字太長(zhǎng)";
    } else if (name.length < 2) {
        str = "名字太短";
    } else if (name[0] === "陳") {
        str = "小陳";
    } else if (name[0] === "李" && name !== "李鵬") {
        str = "小李";
    } else if (name === "李鵬") {
        str = "管理員";
    } else {
        str = "此人比較神秘！";
    }
    // 對(duì)判斷結(jié)果str的一些處理
    // ......
    console.log(str);
    return str;}

如果你不進(jìn)行分支優(yōu)化，getUserDescribe函數(shù)就會(huì)被大量的 if 分支搶占空間，使得getUserDescribe函數(shù)的重點(diǎn)迷失（getUserDescribe函數(shù)重點(diǎn)在于對(duì)判斷結(jié)果的處理，而不在于這個(gè)結(jié)果是通過(guò)什么分支獲取的），這時(shí)你再看一下我們優(yōu)化后的代碼：

const describeForNameMap = [
    [(name) => name.length > 3, () => "名字太長(zhǎng)"],
    [(name) => name.length < 2, () => "名字太短"],
    [(name) => name[0] === "陳", () => "小陳"],
    [(name) => name === "大鵬", () => "管理員"],
    [(name) => name[0] === "李" && name !== "李鵬", () => "小李"],];function getUserDescribe(name) {
    let str; // 存儲(chǔ)判斷結(jié)果
    const getDescribe = describeForNameMap.find((item) => item[0](name));
    if (getDescribe) {
        str = getDescribe[1]();
    } else {
        str = "此人比較神秘！";
    }
    // 對(duì)判斷結(jié)果str的一些處理
    // ......
    console.log(str);
    return str;}

查看優(yōu)化后的getUserDescribe函數(shù)我們能夠知道，它從describeForNameMap獲取了一個(gè)值賦值給了str（describeForNameMap是如何返回值的我們并不關(guān)心），之后對(duì)str作了一些處理。這就突出了getUserDescribe函數(shù)的重點(diǎn)（對(duì)判斷結(jié)果str進(jìn)行處理）。

在這個(gè)例子中describeForNameMap子數(shù)組的第二個(gè)元素完全可以直接使用一個(gè)值：[(name) => name.length > 3, "名字太長(zhǎng)"]，但為了整體代碼的可擴(kuò)展性，推薦還是使用函數(shù)，因?yàn)楹瘮?shù)可以接收參數(shù)，方便應(yīng)對(duì)之后更復(fù)雜的場(chǎng)景。

JavaScript是什么

JavaScript是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

以上就是關(guān)于“JavaScript怎么實(shí)現(xiàn)分支優(yōu)化”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：JavaScript怎么實(shí)現(xiàn)分支優(yōu)化
標(biāo)題鏈接：http://chinadenli.net/article12/gsgsgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、企業(yè)建站、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容