if… else… A better way to write it in complicated cases

If the code if… else… Too many statements, not only not good, when the amount of data is not easy to maintain, but also to further deepen the use of JS. It is better to use if the business logic is similar, but if the business logic is complex and different scenarios exist, use if… else… .

Case 1: The button click event executes a different callback function based on the status (parameter), status: 1. In progress; 2. The failure; 3. Sold out; 4. Success; 5. The system is abnormal

Method 1: Use if… else…

let onButtonClick = (status) =>{ if (status == 1){ sendLog('processing'); jumpTo('indexPage'); } else if (status == 2 || status == 3){ sendLog('fail'); jumpTo('FailPage'); }... }Copy the code

Method 2: Use the Switch

let onButtonClick = (status) =>{ switch (status) { case 1: sendLog('processing'); jumpTo('indexPage'); break; case 2: case 3: sendLog('fail'); jumpTo('FailPage'); break; default: break; }}Copy the code

Method 3: Use the object to set the status code to the key and callback method name value

const actions = {
    '1': ['processing', 'indexPage'],
    '2': ['fail', 'FailPage'],        '3': ['fail', 'FailPage'],    'default: ['other', 'indexPage']
};
const onButtonClick = (status) => {
    let action = actions[status] || actions[default],
        logName = action[0],
        pageName = action[1];
    sendLog(logName);
    pageName(indexPage);
};
Copy the code

Method 4: Use the Map object to set the status code to the key and callback method name value

const actions = new Map([
    [1, ['processing', 'indexPage']],
    [2, ['fail', 'failPage']],
    [3, ['fail', 'failPage']],
    ['default', ['other', 'indexPage']]
]);
const onButtonClick = (status) => {
    let action = actions.get(status) || actions.get(default),
        logName = action[0],
        pageName = action[1];
    sendLog(logName);
    pageName(indexPage);
};
Copy the code

Case 2: In addition to the first case, you need to consider the identity of the user

** If… else…

const onButtonClick = (status, identity) => {      if (identity == 'guest') {            if (status == 1) {            } else if (status == 2) {            } else if (status == 3) {            } else if (status == 4) {            } else if (status == 5) {            } else {            }      } else if (identity == 'master') {            if (status == 1) {            } else if (status == 2) {            } else if (status == 3) {            } else if (status == 4) {            } else if (status == 5) {            } else {            }      }};
Copy the code

Method 4: Use the Map object to set the status code and user identity to the key and callback method name value, and use the string template to get the value

const actions = new Map([ ['guest_1', () => {sendLog('processing'); pageName('indexPage'); ;], ['guest_2', () => {sendLog('fail'); pageName('failPage');};], ['master_1', () => {sendLog('fail'); pageName('failPage');};], ]); Const onButtonClick = (status, identity) => { The value is a function let action = actions. Get (` $${status} {an} _ `) | | actions. Get (" default "); action.call(this); };Copy the code

Method 5: Replace the string template with an object with a status code and user identity as the key of the Map object

const actions = new Map([
    [{identity:'guest', status:'1'}, () => { sendLog('processing'); pageName('indexPage');};],
    [{identity:'guest', status:'2'}, () => { sendLog('processing'); pageName('indexPage');};],    [{identity:'master', status:'1'}, () => { sendLog('processing'); pageName('indexPage');};],]);
const onButtonClick = (identity, status) => {
    let action = [...actions].fliter(([key, value]) => {key.identity == identity && key.status == status});
    action.forEach((key, value) => {value.call(this)});
};
Copy the code

Case 3: In addition to the second case, the same identity and multiple states need to have the same callback function

const actions = () => { const sendLog = (status) => {... }; const pageName = (page) => {... }; return new Map([ [/^guest_[1-4]$/, () => {sendLog(status)}], [/^guest_5$/, () => {sendLog(status)}], Func [/^guest_.*$/,func],]); }; const onButtonClick = (identity, status) => { let action = [...actions()].fliter([key,value]) => {key.test(`${identity}_${status}`)}; actions.forEach(([key, value]) => value.call(this)); };Copy the code