JavaScript邏輯運算符AND和OR之間的區(qū)別
本文的目標(biāo)是讓您了解這些運算符的工作原理以及它們的不同之處。
要理解這些運算符，了解JavaScript 中真值和假值的概念非常重要。
（更|多優(yōu)質(zhì)內(nèi)|容：java567 點 c0m）
真實值和虛假值
在 JavaScript 中，許多值可以用它們的布爾值來表示。由 表示的值false是假值，由 表示的值true是真值。讓我們看一些例子：
?0
?false
?undefined
?null
?"" // empty string
值0、false、undefined、null和空字符串""是假值，因為它們的布爾表示是false。
至于真值，任何不是真值的值falsy都是truthy。這意味著真值包括true, 1, [3. 4], {}, "hello"。
現(xiàn)在我們已經(jīng)解決了這個問題，讓我們看看它們?nèi)绾闻cANDandOR運算符聯(lián)系起來。
如果您對此感興趣，我有該主題的視頻版本。
AND操作員
邏輯AND運算符用在表達式中的兩個操作數(shù)之間，如下所示：
?operand1 && operand2
如果第一個操作數(shù)是真值，則該運算符返回第二個操作數(shù)。如果第一個操作數(shù)是假值，則運算符將返回第一個操作數(shù)。正如我們所見，真值是計算結(jié)果為 的值true。
讓我們看一個例子：
?const exp1 = 5
?const exp2 = "Dillion"
?
?const result = exp1 && exp2
?
?console.log(result)
?// "Dillion"
在此示例中，我們的exp1值為5和exp2值為"Dillion"。然后我們有一個result變量，它保存使用和&&之間的運算符返回的值。exp1``exp2
這里發(fā)生的是，運算符從左側(cè)開始檢查是否exp1為真值。5是真值，因此運算符返回右側(cè)的值。這就是為什么“Dillion”result具有價值。
AND讓我們看另一個多次使用運算符的示例：
?function returnFalsy() {
? ?return ""
?}
?
?const exp1 = [1, 2]
?const exp2 = returnFalsy()
?const exp3 = { name: "Dillion" }
?
?const result = exp1 && exp2 && exp3
?
?console.log(result)
?// ""
正如我們在這個例子中看到的，我們有：
exp1用一個數(shù)組
exp1與調(diào)用的返回值returnFalsy()（這是一個空字符串 - 一個虛假值）
exp3與一個物體
最后，我們有一個result變量，它保存使用and&&之間的運算符和and之間的運算符返回的值。exp1exp2exp2``exp3
我們這里有exp1 && exp2操作數(shù) 1 和操作數(shù) 2。然后這個表達式的結(jié)果將成為下一個表達式的操作數(shù) 1：result && exp3。exp3這是第二個表達式中的第二個操作數(shù)。
這里發(fā)生的是，運算符從左側(cè)開始檢查是否exp1為真值。exp2在本例中，我們有一個數(shù)組，它是一個真值，這意味著將返回第二個操作數(shù)。exp2成為第一個操作數(shù)，并exp3成為第二個表達式的第二個操作數(shù)。
第二個&&運算符檢查是否exp2為真值。在這種情況下，空字符串“”是一個假值，因此運算符返回exp2。它不需要檢查，exp3因為錯誤的事實exp2意味著操作員將停止從左到右的檢查。
這里發(fā)生的是短路，您可以在我關(guān)于短路運算符的文章中了解更多信息
OR操作員
邏輯OR運算符用在表達式中的兩個操作數(shù)之間，如下所示：
?operand1 || operand2
如果第一個操作數(shù)是真值，則運算符返回第一個操作數(shù)。如果第一個操作數(shù)是假值，則運算符將返回第二個操作數(shù)。
讓我們看一個例子：
?const exp1 = 5
?const exp2 = "Dillion"
?
?const result = exp1 || exp2
?
?console.log(result)
?// 5
在此示例中，我們的exp1值為5和exp2值為"Dillion"。然后我們有一個result變量，它保存使用和||之間的運算符返回的值。exp1``exp2
這里發(fā)生的是，運算符從左側(cè)開始檢查是否exp1為真值。5是一個真值，因此運算符返回它。這就是為什么result值為5的原因。
操作OR員不會費心去檢查，exp2因為它已經(jīng)找到了一個真實值。這與運算符相反AND。AND繼續(xù)從左向右，只要true。但OR會停止（再次，一旦看到true- 它只會繼續(xù)從左到右，只要false
OR讓我們看另一個多次使用運算符的示例：
?function returnFalsy() {
? ?return ""
?}
?
?const exp1 = null
?const exp2 = returnFalsy()
?const exp3 = { name: "Dillion" }
?
?const result = exp1 || exp2 || exp3
?
?console.log(result)
?// { name: "Dillion" }
正如我們在這個例子中看到的，我們有：
exp1值為null（假值）
exp1與調(diào)用的返回值returnFalsy()（這是一個空字符串 - 一個虛假值）
exp3與一個物體
最后，我們有一個result變量，它保存使用and||之間的運算符和and之間的運算符返回的值。exp1exp2exp2``exp3
我們這里有exp1 || exp2操作數(shù) 1 和操作數(shù) 2。然后這個表達式的結(jié)果將成為下一個表達式的操作數(shù) 1：result || exp3。exp3這是第二個表達式中的第二個操作數(shù)。
這里發(fā)生的是，運算符從左側(cè)開始檢查是否exp1為真值。在本例中，我們有，它是一個假值，這意味著將返回null第二個操作數(shù)。成為第一個操作數(shù)，并成為第二個表達式的第二個操作數(shù)。exp2exp2exp3
第二個||運算符檢查是否exp2為真值。在這種情況下，空字符串“”是一個假值，因此運算符返回exp3。正如您在這里所注意到的，OR只要遇到錯誤值，運算符就會繼續(xù)運行。它只會在找到真值或到達表達式末尾時停止。
使用ANDand ORinif語句
if語句允許您創(chuàng)建條件語句，您可以在其中確定根據(jù)條件執(zhí)行的內(nèi)容。
AND讓我們看一個在語句中使用的示例if：
?const isLoggedIn = true
?const cart = []
?
?if (isLoggedIn && cart.length) {
? ?console.log("Cart not empty")
?} else {
? ?console.log("Cart is empty")
?}
你能猜出執(zhí)行這段代碼的結(jié)果嗎？結(jié)果是：
?// Cart is empty
原因如下。if該語句的條件是isLoggedIn && cart.length。左操作數(shù)的isLoggedIn計算結(jié)果為true。請記住，&&如果左操作數(shù)為 ，則運算符返回右操作數(shù)true。如果左操作數(shù)為 ，則僅返回左操作數(shù)false。在這種情況下，該運算符將返回cart.length，其計算結(jié)果為 0，因為cart數(shù)組為空。
這意味著該if塊被執(zhí)行為if(0).
該if語句將強制0為布爾值。正如我們之前看到的，0是一個假值。因此if，看到條件表達式0為的語句false將執(zhí)行else塊：console.log("Cart is empty")。您可以在本文中了解有關(guān)類型強制的更多信息。
假設(shè)OR被使用：
?const isLoggedIn = true
?const cart = []
?
?if (isLoggedIn || cart.length) {
? ?console.log("Cart not empty")
?} else {
? ?console.log("Cart is empty")
?}
你能猜到這個結(jié)果嗎？這里是：
?// Cart not empty
原因如下。if這里語句的條件是isLoggedIn || cart.length。左操作數(shù)的isLoggedIn計算結(jié)果為true。請記住，||如果左操作數(shù)為 ，則該運算符將返回該操作數(shù)true。如果左操作數(shù)為 ，則僅返回右操作數(shù)false。在這種情況下，運算符將返回isLoggedIn其計算結(jié)果為true。
這意味著該if塊被執(zhí)行為if(true).
在這種情況下，不會發(fā)生強制轉(zhuǎn)換，因為它true已經(jīng)是一個布爾值。因此if，看到條件表達式true為的語句true將執(zhí)行if塊：console.log("Cart not empty")。
包起來
AND以下是和之間的區(qū)別摘要OR：
AND如果左表達式是，則返回右表達式true
AND如果左表達式是，則返回左表達式false
OR如果左表達式是，則返回右表達式false
OR如果左表達式是，則返回左表達式true
您注意到 是 的OR倒數(shù)AND嗎？只要AND左邊在，就一直向右true，LEFT只要左邊在，就一直向右false
如果您喜歡這篇文章，請與其他人分享。
