{"id":6510,"date":"2020-01-25T23:05:00","date_gmt":"2020-01-25T22:05:00","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=6510"},"modified":"2020-01-25T23:05:00","modified_gmt":"2020-01-25T22:05:00","slug":"clean-up-your-code-by-removing-if-else-statements","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2020\/01\/25\/clean-up-your-code-by-removing-if-else-statements\/","title":{"rendered":"Clean up your code by removing \u2018if-else\u2019 statements"},"content":{"rendered":"

\"\"<\/a> Clean up your code by removing \u2018if-else\u2019 statements<\/a><\/em><\/p>\n

Nifty techniques, I fear they will be soon be abused by too many people….<\/p>\n

<\/p>\n

\n
\n
\n

Clean up your code by removing \u2018if-else\u2019 statements<\/h1>\n<\/div>\n<\/div>\n
\n

Some tips to make your JavaScript code more elegant.<\/h2>\n<\/div>\n
\n
\n
\n
\n

When we write JS code, we often encounter the situation of complex logic judgment. Generally, you can use if\/else<\/em> or switch<\/em> to implement multiple conditional judgment, but there will be a problem: With the increase of logic complexity, if\/else<\/em> and switch<\/em> in the code will become more and more bloated. This article will take you to try to write more elegant judgment logic.<\/p>\n

For example, let\u2019s look at a piece of code:<\/p>\n

\n
\n
\n\n\n\n
\/**<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
* Button click event<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
* @param {number} status <\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
* Activity status: 1 in progress, 2 in failure, 3 out of stock, 4 in success, 5 system cancelled<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
*\/<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
const<\/span> onButtonClick<\/span> =<\/span> (<\/span>status<\/span>)<\/span>=><\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
if<\/span>(<\/span>status<\/span> ==<\/span> 1<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘processing’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘IndexPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
}<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 2<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘fail’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘FailPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
}<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 3<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘fail’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘FailPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
}<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 4<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘success’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘SuccessPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
}<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 5<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘cancel’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘CancelPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
}<\/span>else<\/span> {<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘other’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘Index’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
}<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

}<\/span><\/div>\n<\/div>\n<\/figure>\n

You can see the click logic of this button in the code: Do two things according to the different activity state, send the log buried point and jump to the corresponding page, you can easily come up with a rewrite of this code by switch appearance.<\/p>\n

\n
\n
\n\n\n\n
const<\/span> onButtonClick<\/span> =<\/span> (<\/span>status<\/span>)<\/span>=><\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
switch<\/span> (<\/span>status<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
case<\/span> 1<\/span>:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘processing’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘IndexPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
break<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
case<\/span> 2<\/span>:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
case<\/span> 3<\/span>:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘fail’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘FailPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
break<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
case<\/span> 4<\/span>:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘success’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘SuccessPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
break<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
case<\/span> 5<\/span>:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘cancel’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘CancelPage’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
break<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
default<\/span>:<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>‘other’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>‘Index’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
break<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
}<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

}<\/span><\/div>\n<\/div>\n<\/figure>\n

Well, it looks much clearer than if\/else<\/em>, careful readers may have also found a small trick: case 2 and case 3’s logic is the same, we can save the execution statement and break, case 2 will automatically execute with case 3’s logic.<\/p>\n

But there\u2019s a simpler way to write it.<\/p>\n

\n
\n
\n\n\n\n
const<\/span> actions<\/span> =<\/span> {<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
‘1’<\/span>: [<\/span>‘processing’<\/span>,<\/span>‘IndexPage’<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
‘2’<\/span>: [<\/span>‘fail’<\/span>,<\/span>‘FailPage’<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
‘3’<\/span>: [<\/span>‘fail’<\/span>,<\/span>‘FailPage’<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
‘4’<\/span>: [<\/span>‘success’<\/span>,<\/span>‘SuccessPage’<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
‘5’<\/span>: [<\/span>‘cancel’<\/span>,<\/span>‘CancelPage’<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
‘default’<\/span>: [<\/span>‘other’<\/span>,<\/span>‘Index’<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
}<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
const<\/span> onButtonClick<\/span> =<\/span> (<\/span>status<\/span>)<\/span>=><\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
let<\/span> action<\/span> =<\/span> actions<\/span>[<\/span>status<\/span>]<\/span> ||<\/span> actions<\/span>[<\/span>‘default’<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
logName<\/span> =<\/span> action<\/span>[<\/span>0<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
pageName<\/span> =<\/span> action<\/span>[<\/span>1<\/span>]<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>logName<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>pageName<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

}<\/span><\/div>\n<\/div>\n<\/figure>\n

The code above does look cleaner, and the clever thing about this approach is that it uses the judgment condition as the object\u2019s property name, and the processing logic as the object\u2019s property value. When the button is clicked, this method is especially suitable for the case of unary condition judgment, which makes logical judgment by means of object attribute lookup.<\/p>\n

It\u2019s fine, but is there another way to code?<\/p>\n

Yes!<\/p>\n

\n
\n
\n\n\n\n
const<\/span> actions<\/span> =<\/span> new<\/span> Map<\/span>(<\/span>[<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
[<\/span>1<\/span>,<\/span> [<\/span>‘processing’<\/span>,<\/span>‘IndexPage’<\/span>]<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
[<\/span>2<\/span>,<\/span> [<\/span>‘fail’<\/span>,<\/span>‘FailPage’<\/span>]<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
[<\/span>3<\/span>,<\/span> [<\/span>‘fail’<\/span>,<\/span>‘FailPage’<\/span>]<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
[<\/span>4<\/span>,<\/span> [<\/span>‘success’<\/span>,<\/span>‘SuccessPage’<\/span>]<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
[<\/span>5<\/span>,<\/span> [<\/span>‘cancel’<\/span>,<\/span>‘CancelPage’<\/span>]<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
[<\/span>‘default’<\/span>,<\/span> [<\/span>‘other’<\/span>,<\/span>‘Index’<\/span>]<\/span>]<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
]<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
const<\/span> onButtonClick<\/span> =<\/span> (<\/span>status<\/span>)<\/span>=><\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
let<\/span> action<\/span> =<\/span> actions<\/span>.<\/span>get<\/span>(<\/span>status<\/span>)<\/span> ||<\/span> actions<\/span>.<\/span>get<\/span>(<\/span>‘default’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
sendLog<\/span>(<\/span>action<\/span>[<\/span>0<\/span>]<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
jumpTo<\/span>(<\/span>action<\/span>[<\/span>1<\/span>]<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

}<\/span><\/div>\n<\/div>\n<\/figure>\n

There are many advantages to using Map instead of Object, which we will talk about later.<\/p>\n

What\u2019s the difference between a Map object and a normal object?<\/p>\n

    \n
  • An object usually has its own prototype, so an object always has a \u201cprototype\u201d key<\/li>\n
  • An object\u2019s key can only be a string or Symbols, but a Map\u2019s key can be any value<\/li>\n
  • You can easily get the number of key-value pairs in a Map by using the size attribute, whereas the number of key-value pairs in an object can only be confirmed manually<\/li>\n<\/ul>\n

    Now let\u2019s upgrade the difficulty of the problem. When clicking the button, you need to judge not only the status but also the user\u2019s identity:<\/p>\n

    \n
    \n
    \n\n\n\n
    \/**<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    * Button click event<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    * @param {number} status <\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    * Activity status: 1 in progress, 2 in failure, 3 out of stock, 4 in success, 5 system cancelled<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    *<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    * @param {string} identity: guest, master<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    *\/<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    const<\/span> onButtonClick<\/span> =<\/span> (<\/span>status<\/span>,<\/span>identity<\/span>)<\/span>=><\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    if<\/span>(<\/span>identity<\/span> ==<\/span> ‘guest’<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    if<\/span>(<\/span>status<\/span> ==<\/span> 1<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 2<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 3<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 4<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 5<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> {<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>identity<\/span> ==<\/span> ‘master’<\/span>)<\/span> {<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    if<\/span>(<\/span>status<\/span> ==<\/span> 1<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 2<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 3<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 4<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> if<\/span>(<\/span>status<\/span> ==<\/span> 5<\/span>)<\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span>else<\/span> {<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    \/\/do sth<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    }<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    }<\/span><\/div>\n<\/div>\n<\/figure>\n

    As you can see from the example above when your logic escalates to double judgment, your judgment doubles, and your code doubles.<\/p>\n

    How can we code more cleanly?<\/p>\n

    Here is a solution:<\/p>\n

    \n
    \n
    \n\n\n\n
    const<\/span> actions<\/span> =<\/span> new<\/span> Map<\/span>(<\/span>[<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘guest_1’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘guest_2’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘guest_3’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘guest_4’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘guest_5’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘master_1’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘master_2’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘master_3’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘master_4’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘master_5’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    [<\/span>‘default’<\/span>,<\/span> (<\/span>)<\/span>=><\/span>{<\/span>\/*do sth*\/<\/span>}<\/span>]<\/span>,<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    ]<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    const<\/span> onButtonClick<\/span> =<\/span> (<\/span>identity<\/span>,<\/span>status<\/span>)<\/span>=><\/span>{<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    let<\/span> action<\/span> =<\/span> actions<\/span>.<\/span>get<\/span>(<\/span>`${<\/span>identity}<\/span><\/span>_${<\/span>status}<\/span><\/span>`<\/span>)<\/span> ||<\/span> actions<\/span>.<\/span>get<\/span>(<\/span>‘default’<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
    action<\/span>.<\/span>call<\/span>(<\/span>this<\/span>)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    }<\/span><\/div>\n<\/div>\n<\/figure>\n

    The core logic of the above code is: Two judgment conditions are spliced into a string to serve as the key of Map, and then the value corresponding to the corresponding string is directly searched during query.<\/p>\n

    Of course, we can also change Map to Object here:<\/p>\n

    const actions = {\n  'guest_1':()=>{\/*do sth*\/},\n  'guest_2':()=>{\/*do sth*\/},\n  \/\/....\n}<\/span>const onButtonClick = (identity,status)=>{\n  let action = actions[`${identity}_${status}`] || actions['default']\n  action.call(this)\n}<\/span><\/pre>\n
    If readers find it a bit awkward to spell out the query as a string, there is another solution, which is to use a Map object as the key:<\/p>\n
    \n
    \n