JavaScript 利用表達式優化你的程式碼 - 卡斯伯Blog

邏輯運算子包含 && 、 || 、 ! ，在語法的概念上稱為and、or、not，常見情境是用來作為判斷語句使用（condition），不過在文件中的描述卻不僅於此，以 ... CSS JS 生活 文章列表 關於 設計師轉職前端工程師，擅長將複雜觀念用圖形化方式呈現 追蹤卡斯伯 運算子邏輯運算子||、&&三元運算子/條件運算子框架運用 按讚，就是最大的支持 卡斯伯提供的教學資源： 近期活動通知： Modaltitle ... 關閉 javascriptjs 2020-09-18 上一節介紹了表達式的基本概念「回傳結果」，那麼接下來你一定會想了解有哪些地方可以用到表達式，本篇就列出JS語法與常見框架的表達式運用，熟悉以後將會大幅增加JS語法的變化性。

運算子運算子依據運算元數量，可分為一元、二元甚至是三元運算子，而運算元本身也是屬於表達式，以我們常見的===來說就屬於二元運算子。

運算元1運算子運算元2 此範例中的前後1皆是運算元，運算元本身也是屬於表達式，並且此運算子最終會回傳一個true的結果，請記住這個概念，我們延伸介紹幾個不同的運算子運用。

1===1; 邏輯運算子||、&&邏輯運算子包含&&、||、!，在語法的概念上稱為and、or、not，常見情境是用來作為判斷語句使用（condition），不過在文件中的描述卻不僅於此，以&&來說，文件上的敘述為： 假如運算式1可以被轉換成false的話，回傳運算式1；否則，回傳運算式2。

因此，&&只有在兩個運算元都是True時才會回傳True，否則回傳false。

expr1&&expr2 常見的情況下，我們預期兩者都為“真”時，取得“true”的結果。

console.log(false&&true);//只要其一為假值，就會回傳假值 不過運算元也是表達式，因此我們可以替換成任何表達式也可運行，以此範例來說我們取得的值並非為true，而是後者'杰倫'。

console.log('小明'&&'杰倫'); 然後勒？哪邊可以用到這個概念與&&相對應的是||，在文件上的說明為： 假如運算式1可以被轉換成true的話，回傳運算式1；否則，回傳運算式2。

因此，||在兩個運算元有任一個是True時就會回傳True，否則回傳false。

假定情境，我跟老媽去餐廳用餐，我和老媽都搶著付錢，但其中一人其實沒有錢，在此就可使用||來判斷有錢者的值為何。

varmyPay=0; varmomPay=1000; console.log(myPay||momPay);//1000 實戰中更常見“傳入值不確定是否為真值”，有可能為undefined、null、0…，不過在執行上為了避免出錯，我們強制需付予一個值時，可使用以下方法： varunconfirmed=undefined;//變數a無法確認來源值 vardefaultValue=unconfirmed||1000; //來源值為假值則賦予1000，如果是真值則套用來源值 console.log(defaultValue);//1000 三元運算子/條件運算子三元運算子的介紹：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator 「三元運算子/條件運算子」是唯一用到三個運算元的運算子，它的結構如下：condition?exprIfTrue:exprIfFalse 範例如下，當年齡大於18則會取得‘成年’的結果，如果否定則回傳‘未成年’。

varmyAge=22; console.log(myAge>=18?'成年':'未成年'); 而運算元本身就是屬於表達式，我們可以在這判斷式、前後運算元替換任何的表達式來運行它，也因為如此三元運算子還經常作為if(){...}的縮寫。

if(){...}是很易讀的判斷式，但如果僅做簡單判斷時，則會顯得過於攏長。

//宣告函式1,2 functionfn1(){ return'函式1' } functionfn2(){ return'函式2' } varvariable=false; //當變數為真值時，執行fn1，如果為假值則執行fn2 if(variable){ console.log(fn1());//不執行 }else{ console.log(fn2());//'函式2' } 如果改為三元運算子則可改寫成如下，當變數為真時執行並回傳fn1()，如果為假時執行並回傳fn2()：console.log(variable?fn1():fn2()); 透過此方式可以將多行的if(){...}判斷式縮減成一行，除了行數減少外，還可以同時回傳值（運算子最終也會回傳值），因此許多進階的開發者都會使用三元運算子取代單純的if(){...}判斷式。

框架運用目前的主流框架都是屬於畫面與JS邏輯分離（關注點分離），而在邏輯資料傳回畫面時的片段程式碼，大多都可利用表達式的方式撰寫，以Vue來說就明確說明可多利用表達式的特性，參考文件。

可利用的表達式範例：{{number+1}} {{ok?'YES':'NO'}} {{message.split('').reverse().join('')}} 但如果使用的是陳述式則會無情地對你噴出錯誤： {{vara=1}} {{if(ok){returnmessage}}} 可開啟以下連結，並使用ChromeConsole除錯：https://codepen.io/Wcc723/pen/RwarveQ 程式碼如下： {{num===1}}
{{num===1?'數字1':'不是數字1'}}
{{num2=1}} 本篇介紹表達式的常用情境，以及程式碼可以怎麼拆以及如何運用，下一篇則會繼續介紹表達式中常會引發的額外錯誤。

撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮)) 上一篇：JavaScript表達式觀念及運用-JSExpression 下一篇：開發總是沒問題，上線老是各種錯 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮)) 相似文章 十分鐘快速掌握Markdown Markdown是目前非常普遍用來撰寫文檔的語言，一開始的目標就是使用「易讀易寫的純文字格式編寫文件」，此初衷讓使用者可以專注在文字的本身，而不需要透過其它工具來切換格式。

以Word撰寫文檔來說，就必須透過上方的工具列來切換標題、列表、粗體、斜體等等；而Markdown並沒有這樣的工具列，... 一分鐘切換成中文版VSCode（完整圖文版） 雖然開發者都具有一定的英文閱讀能力，但如果在不熟悉的情況下，就比較難以快速上手一個新工具。

如果要快速掌握一個完整的工具或技術，最好的方式還是先切換成熟悉的語言。

而VSCode雖然預設並無法直接切換語系，但官方有提供各國的語言套件，讓開發者可以自行選用。

切換成中文版如果你對於VSCode有... 前端開發者，圖片常犯的五個粗心錯誤 前端開發者是透過程式碼將資訊呈現成畫面，因此畫面的好壞也多少影響品質，在觀看許多履歷或作業的過程中，會發現許多相似的錯誤，而這些錯誤都是有跡可循，並且可以避免的；本篇先以常見的圖片問題與大家分享，看是否你也犯了這些錯誤呢？ 一、圖片變形新手錯誤率：⭐⭐⭐⭐令人感受的粗心度：👎👎👎👎 圖片變形... 十分鐘上手前端單元測試-使用Jest 隨著應用程式越來越大，人工流程的測試也會耗去許多的時間，許多功能再開發後都必須重新進行點擊特定目標、撰寫複雜表單、送出來檢驗功能的正確性，當功能越來越複雜時，人工測試所花的時間也會越來越常，因此改用測試工具相對會節省去許多時間。

尤其到了上線時才發現錯誤，那時候心中真的會吶喊No、No、No～。

前... 粉絲專頁 卡斯伯 標籤雲 BootstrapSassasyncawaitbeginnerbootstrapborderbusinesscompasscoursescssd3d3jsdesigndevelopdnsemmetes6fire.appgitgithubgridgulphtmliconfontsiconsintroironmanjavascriptjekylljestjqueryjslifemacmarkdownmobilemodulesnode.jsnodejsnpmoocssosxprojectpromisepuppeteerrailsreactjsrubysassscsssketchsslstudysublimetextsvgtesttooltoolsvscodevuewebworkshopzeplin履歷 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮))