邏輯運算子： &&、||、!

JavaScript 有三種邏輯運算子： &&、||、!

&& （And）

🎃 && 代表：所有條件「都需要成立」，才會回傳「true」

舉一個生活化的例子：

用程式碼來表達：

🎃 先宣告兩個變數

• 有帶身分證： var isID = true;
• 沒帶印章： var isInk = false;

🎃 必須同時滿足這兩個條件，來做驗證：「身分證」、「印章」都要帶

isID == true && isInk == true;

最後回傳 false 的原因為：

• 雖然第一個條件「isID == true」是 true
• 但是第二個條件「isInk == true」是 false

–> 只要有「其中一個條件是 false」，最後就會回傳 false

|| （Or）

🎃 || 代表：只要「其中一個條件成立」即可 （最後就會回傳 true）

舉一個生活化的例子：

用程式碼來表達：

🎃 先宣告兩個變數

• 我的帳單金額： var bill = 1200;
• 我不是 VIP： var isVIP = false;

🎃 只要「其中一個條件成立」即可

bill >= 1000 || isVIP == true

最後回傳 true 的原因為：

• 雖然「第二個條件 isVIP == true」會回傳 false
• 但是 「第一個條件 bill >= 1000」是回傳 true

–> 只要「其中一個條件成立」，最後就會回傳 true

! （Not）

🎃 ! 可以把「原本是 true」的，轉型成「false」

例如：

• 原本 2 > 3 是回傳 false

🎃 如果寫 !(2 > 3)，就會回傳 true

範例練習

我的 codepen 範例

https://codepen.io/saffranwang/full/QWwGWyN

html 架構

html:

<div class="wrap">
    <div class="wrap-inner">
        <h1>六角西餐廳 - 贈品篇</h1>
        <p>服務生：請問你是 VIP 嗎？帳單有滿千嗎？兩者達到有送贈品哦！</p>
        <p>  顧客：<em class="tag" id="andId"></em></p>
        <p>服務生：抱歉我記錯了，只要一個有達到就送贈品嘍，你有嗎？</p>
        <p>  顧客：<em class="tag" id="orId"></em></p>
    </div>
</div>

JS 程式碼

🎃 先宣告兩個變數：

• 我的帳單金額： var myBill = 1250;
• 我不是 VIP： var isVIP = false;

🎃 因為服務生一開始說「“兩者達到”才能送贈品」，所以要使用「&&」來寫條件

var andCheck = myBill >= 1000 && isVIP == true;

🎃 服務生後來又說「“只要一個有達到”就送贈品」，所以要使用「||」來寫條件

var orCheck = myBill >= 1000 || isVIP == true;

🎃 接下來，就可以把「andCheck帶入id="andId"」，把「orCheck帶入id="orId"」

JS:

var myBill = 1250;
var isVIP = false;

var andCheck = myBill >= 1000 && isVIP == true;
var orCheck = myBill >= 1000 || isVIP == true;

document.getElementById('andId').textContent = andCheck;
document.getElementById('orId').textContent = orCheck;