JavaScript es6 复杂判断优化

//点击按钮,根据状态做不同的事情
/**=> ===function */

    const onBtnClick=(status)=>{
        /**
         * == 是相对判断,===是绝对判断(类型相等,值相等)
         * 例：'2'==2 成立,'2'===2 不成立。因为一个是字符窜,一个是数值类型
         * */
        let sta=parseInt(status);//此处可以做些处理isNaN()
        if(sta===1){
            sendLog("执行了");
            setPage("IndexPage");
        }else if(sta===2){
            sendLog("success");
            setPage("SuccessPage");
        }else if(sta===3){
            sendLog("error");
            setPage("ErrorPage");
        }else if(sta===4){
            sendLog("fail");
            setPage("FailPage");
        }else{
            sendLog("other");
            setPage("Index");
        }
        //等等else if条件.
        //可能有人是用switch(值){case 1:事件 break} 可以使用的时候确实对if()else if()else(){}清晰很多
    }

但我们可以声明json对象的key value取值

例:

    const actionJson={
        '1':['执行了','IndexPage'],
        '2':['success','SuccessPage'],
        '3':['error','ErrorPage'],
        '4':['fail','FailPage'],
        'default':['other','Index']
    }
    const onBtnClick=(status)=>{
        let action=actionJson[status]||actionJson['default'],//当状态status 找不到时,取默认
        logName=action[0],
        pageName=action[1];
        sendLog(logName);
        setPage(pageName);
    }
    //或者使用es6的Map对象
    const actionMap=new Map({
        [1,['执行了','IndexPage']],
        [2,['success','SuccessPage']],
        [3,['error','ErrorPage']],
        [4,['fail','FailPage']],
        ['default',['other','Index']]
    });
    
    const onBtnClick=(status)=>{
        let action=actionMap.get(status)||actionMap.get('default'),//当状态status 找不到时,取默认
        logName=action[0],
        pageName=action[1];
        sendLog(logName);
        setPage(pageName);
    };

//大量的if(){if(status==1)else if(status==2){}else{}}else if(){if(status==1)else if(status==2){}else{}} else {if(status==1)else if(status==2){}else{}}这种优化

const actionMap= new Map({
        ['条件1_条件2',()=>{/*do sth*/}],
        ['条件1_条件2',()=>{/*do sth*/}],
        ['条件1_条件2',()=>{/*do sth*/}],
        ['条件1_条件2',()=>{/*do sth*/}],
        ['默认条件',()=>{/*do sth*/}],
    });
    
    /**
     * 将条件拼接成字符串，然后去Map集里查找对应条件并执行
     * */
    const onBtnClick=('条件1','条件2')=>{
        let action=actionMap.get(`${条件1}_${条件2}`)||actionMap.get('默认条件');
        action.call(this);//call()、apply()、bind() 都是用来重定义 this 这个对象的！
        
    }
    //或者以Map对象,object对象作为key
    const actionMap= new Map({
        [{条件1:'条件1',条件2:'条件2'},()=>{/*do sth*/}],
        [{条件1:'条件1',条件2:'条件2'},()=>{/*do sth*/}],
        [{条件1:'条件1',条件2:'条件2'},()=>{/*do sth*/}],
        [{条件1:'条件1',条件2:'条件2'},()=>{/*do sth*/}],
    });
    //使用filter指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组,然后循环执行对应方法
    const onBtnClick=('条件1','条件2')=>{
        let action =actionMap.filter(([key,value])=>(key.'条件1'=='条件1' && key.'条件2'=='条件2'));
        action.forEach(([key,value])=>value.call(this))
    }

//同时Map对象的key 是可以用正则类型作为key
例:

const action=()=>{
        const  test1=()=>{/* do sth*/}
        const  test2=()=>{/* do sth*/}
        const  test3=()=>{/* do sth*/}
        return new Map([
            [/^条件1_[条件2-条件2]$/,test1],
            [/^条件1_[条件2]$/,test2],
            [/^条件1_.*$/,test3],
        ])
    }
    //使用filter指定的函数并通过正则测试所有元素,返回符合正则条件的新数组
    const onBtnClick=('条件1','条件2')=>{
        let action =[actionMap()].filter(([key,value])=>(Key.test(`${条件1}_${条件2}`)));
        action.forEach(([key,value])=>value.call(this));
    }