什麼？你不讓我用if...else了！！！

摘要

在開發中，我們經常要寫 if…else 來判斷條件。但是過多的 if…else 會讓代碼變得冗長難懂不好維護，有什麼好方法呢？讓我們來聽個故事！

正文

故事開始

小白是一名 CocosCreator 程序員，任務是在遊戲開發組組長的帶領下開發一款遊戲。一天，組長髮來了一個任務，讓小白來處理他傳過來的角度值，判斷區域。

小白心喜：哈哈，我剛看完的 TypeScript 枚舉寫法正好用上了！小白整理了一下思路：
“我應該先定義一個區域枚舉，組長說是四個區域”

enum Area {
    A = 0,
    B,
    C,
    D
}

“然後寫一個方法來判斷傳入的角度”

public getArea (degree: number): Area {
    if (degree >= 0 && degree < 90) {
        return Area.A;
    } else if (degree >= 90 && degree < 180) {
        return Area.B;
    } else if (degree >= 180 && degree < 270) {
        return Area.C;
    } else {
        return Area.D;
    }
}

“最後接收返回值打印就好了”

public onLoad (): void {
    // 組長傳來角度讓你判斷區域
    let degree: number = 150;
    // 以下爲你負責部分
    let area: Area = this.getArea(degree);
    if (area === Area.A) {
        console.log("A 區");
    } else if (area === Area.B) {
        console.log("B 區");
    } else if (area === Area.C) {
        console.log("C 區");
    } else {
        console.log("D 區");
    }
}

回爐重造

高興的小白連着測試了幾個角度值都正確，他就愉快的提交到 Git 然後去喫午飯。但是沒讓他想到的是，下午剛回到公司組長就找他談話：小白，你這代碼不行！回去重寫，不許出現 if…else！

“什麼？你不讓我用if…else了！！！”終究小白只是心中吼了一下，沒敢喊出來。他灰溜溜的回去看自己的代碼，卻也沒個頭緒。

這時，他的同事小黑看到了愁眉苦臉的小白問怎麼了。待了解了事情的原委後，小黑哈哈一笑：我要是組長我也說你，你這樣寫代碼，如果碰到了 16 個區域判斷你要寫 16 個 if…else 嗎？你難道忘了你學過的數組結構了嗎？

小白猛的一拍大腿，對啊！！！

“打印區域用數組改寫”

public onLoad (): void {
    // 組長傳來角度讓你判斷區域
    let degree: number = 150;
    // 以下爲你負責部分
    let area: Area = this.getArea(degree);
    let areaList: string[] = ["A 區", "B 區", "C 區", "D 區"];
    console.log(areaList[area]);
}

“角度判斷改寫”

public getArea (degree: number): Area {
    /** 每個區域佔據角度 */
    const EveryAreaDegree: number = 90;
    let index: number = Math.floor(degree / EveryAreaDegree);
    let degreeArray: Area[] = [Area.A, Area.B, Area.C, Area.D];
    return degreeArray[index];
}

字符串枚舉

這回小白總算是過關了。小白事後請小黑吃了頓大餐！

在工作之餘，小白自己還測試了下字符串枚舉。

enum Area {
    A = "a",
    B = "b",
    C = "c",
    D = "d"
}

同理，不過是換成對象

public onLoad (): void {
    // 組長傳來角度讓你判斷區域
    let degree: number = 150;
    // 以下爲你負責部分
    let area: Area = this.getArea(degree);
    let areaList: object = {
        "a": "A 區",
        "b": "B 區",
        "c": "C 區",
        "d": "D 區"
    };
    console.log(areaList[area]);
}

故事到這裏就結束了，小夥伴們有沒有有所感悟呢？
O(∩_∩)O~~

結語

if 雖好，可不要貪杯哦！

O(∩_∩)O~~

微信公衆號