[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-javascriptswitch的條件式運算":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":19,"minRead":20},177,"javascriptswitch的條件式運算","[Javascript]switch的條件式運算","switch的條件式運算 Javascript中的if和switch想必在JS中都滿常使用，有時候有較多判斷時 […]","\u003Ch1>switch的條件式運算\u003C\u002Fh1>\n\u003Cp>Javascript中的if和switch想必在JS中都滿常使用，有時候有較多判斷時會使用switch，通常用法如下\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function checkFruit(fruit){\n  switch(fruit){\n    case 'Apple':\n      return 'Apple'\n    case 'Banana':\n      return 'Banana'\n    case 'Orange':\n      return 'Orange'\n    default: \n      return 'It is a fruit'\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>原本我以為fruit作為變數的概念傳進switch，再透過不同case判斷值達到判斷效果。直到寫到了條件式才發現這個想法是錯的！沒錯，以下這種寫法就會失效。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function checkYear(year){\n  switch(year){\n    case (year > 2000):\n      console.log('young')\n      break\n    case (year <= 2000 && year >= 1980):\n      console.log('old')\n      break\n    case (year < 1980 && year >= 1950):\n      console.log('too old')\n      break\n    default:\n      console.log("year:" + year)\n      break\n  }\n}\ncheckYear(2010) \u002F\u002F year:2010\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>居然不是預想的顯示\u003Cem>young\u003C\u002Fem>，仔細查了一下才發現使用switch時的理解錯了。其實在這個例子中switch 進行條件判斷的過程長這樣：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>year === (year > 2000) \u002F\u002Fexpression === (value > 2000) \u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>當然不會有作用，換成敘述來講，swtich長這樣：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>switch (expression) {\n    case value: statement\n        break;\n    case value: statement\n        break;\n    case value: statement\n        break;\n    default: statement\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>雖然都是宣告\u003Cem>year\u003C\u002Fem>但一個是expression一個是真正傳進去的value，意義上不同。如果要想要用switch進行條件式運算，就要將if~else的true反過來寫，如下：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function checkYear(true){\n  switch(year){\n    case (year > 2000):\n      console.log('young')\n      break\n    case (year <= 2000 && year >= 1980):\n      console.log('old')\n      break\n    case (year < 1980 && year >= 1950):\n      console.log('too old')\n      break\n    default:\n      console.log("year:" + year)\n      break\n  }\n}\ncheckYear(2010) \u002F\u002F young\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這樣就會是以下判斷，就能順利當if~else來用囉\u003C\u002Fp>\n\u003Cpre>\u003Ccode>true === (year > 2000)\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>結論\u003C\u002Fh2>\n\u003Cp>起初是看到了一些文章在講用不同方式處理降低使用if-else的依賴來達到判斷目的，但老實說就算使用switch，程式碼也不會減少太多，所以要不要用就見仁見智囉XD\u003C\u002Fp>\n","2023-01-03T20:00:02","",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"node","\u002Fblog\u002Fjavascriptswitch的條件式運算",1]