JavaScript 中邏輯與 (&&) 和或 (||) 的靈活運用

介紹

布林值是絕對值，true 或 false。這是非常明確的。 JavaScript 中的其他資料類型也具有這些固有值 true 和 false，但不那麼明顯，因為它們看起來像 32、null、0 和“Hello”，而不是 true 和 false。知道所有值都具有這些固有值意味著我們可以對通常用於布林值的所有資料類型執行操作。這為我們在編碼時提供了更多的創造力和靈活性。

理解真值和假值

當使用 if 等控制流關鍵字和 AND (&&) 和 OR (||) 等邏輯運算子時，我們使用布林值來實現某些結果。這些布林值可以明確地與 true 或 false 一起使用，但我們經常使用 ===、 等比較運算子來產生它們。

如果我們不使用具有控制流或邏輯運算符的布林值會發生什麼？好吧，你很幸運！所有價值觀本質上都是真或假，以幫助實現這一點。我們可以將所有值分為兩類：truthy 或 falsy.

當試圖判斷一個值是真值還是假值時，最好記住 假值 值，因為它們的數量有限：

• false（布林值）
• 空
• 未定義
• NaN（不是數字）
• 0（數值）
• ""（空字串值）

其他都是真實。如果您不確定某些內容是真是假，或者遇到似乎不明確的獨特情況，您可以隨時建立 if 語句來查看以下程式碼區塊中的程式碼是否運行。

if (23) { console.log(“truthy”); } // Prints “truthy”
else { console.log(“falsy”); }

if (null) { console.log(“truthy”); } 
else { console.log(“falsy”); } // Prints “falsy”

邏輯與 (&&)

將布林值與邏輯 AND (&&) 一起使用時，兩個值都必須為 true 才能使邏輯運算子傳回 true。否則，如果至少有一個值為 false，則傳回 false。

console.log(false && false); // false
console.log(true && false); // false
console.log(true && true); // true

了解邏輯 AND (&&) 運算子的機制可以幫助您處理真值和假值。如果左邊的值為 false，則傳回；否則，傳回右側的值。

console.log(0 && 1); // 0
console.log("a" && ""); // "" (an empty string)
console.log([] && [1, 2, 3]); // [1, 2, 3]

邏輯 AND (&&) 運算子想要傳回一個假值，並且只有在兩者都為真時才傳回右邊的真值。你可以這樣想這兩個參數：

（左側）僅當我是虛假值時才使用我。 &&（右側）否則就用我吧。

邏輯或 (||)

當將布林值與邏輯或 (||) 一起使用時，兩個值都必須為 false 才能使邏輯運算子傳回 false。否則，如果至少有一個值為 true，則傳回 true。

console.log(false || false); // false
console.log(true || false); // true
console.log(true || true); // true

以下是邏輯 OR (||) 運算子的工作原理：如果左邊的值為 true，則傳回它；如果左邊的值為 true，則傳回它；否則，傳回右側的值。

console.log(1 || 0); // 1
console.log("" || "a"); // "a"
console.log(undefined || null); // null
console.log([] || [1, 2, 3]); // []

邏輯 OR (||) 運算子想要傳回真值，並且只有在兩者都是假值時才傳回右側的假值。你可以這樣想這兩個參數：

（左）僅當我是真實值時才使用我。 || （右側）不然就用我吧。

AND (&&) 和 OR (||) 的創意運用

期望輸入時使用預設值

假設您正在建立一個代表一個人的對象，該對象具有描述該人的屬性以及使用該對像中的其他屬性向其他人打招呼的函數。

function Person(name) {
    // If name is undefined, this.name will 
    // default to 'a person with no name'
    this.name = name || 'a person with no name';
    this.greet = function() {
        console.log('Hello, I am ' + this.name + '.');
    };
}

// Create Person variables
var tyler = new Person('Tyler');
var mystery = new Person(); 
// Without an input, this.name defaults to the 
// second option since name is undefined.

// Call greet() from each Person object
tyler.greet(); // "Hello, I am Tyler."
mystery.greet(); // "Hello, I am a person with no name."

在上面的範例中，我們期望輸入 name 參數，因此僅當 name 未定義（函數呼叫時沒有參數）時才使用 OR (||) 運算中的第二個值。

需要多個輸入

如果您正在建立物件並希望在建立物件之前確保擁有一定數量的輸入，則可以將每個必需參數之間的邏輯 AND (&&) 運算子連結在一起。

function Person(firstName, lastName, age) {
  if (firstName && lastName && age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${this.firstName} ${this.lastName}`;
    this.age = age;
    this.greet = function() {
      console.log(`Hello, my name is ${this.fullName} and I'm ${this.age} years old.`);
    };
  } 

  // If any argument is missing, the object will only have this property.
  else {
    this.greet = function() {
      console.log(`Hello, I am not a fully formed Person.`)
    };
  }
}

var tyler = new Person('Tyler', 'Meyer', 32);
var brad = new Person('Brad', '', 38);

tyler.greet(); // "Hello, my name is Tyler Meyer and I'm 32 years old."
brad.greet(); // "Hello, I am not a fully formed Person."

if 語句在建立完整的 Person 物件之前檢查每個參數的參數。如果即使有一個參數是假值，它也會使用 else 語句建立一個物件。因此，我們可以防止不完整的物件或為不完整的條目建立預設物件。

결론

값이 제공될 때까지 기본값이 필요한 경우 논리 OR(||) 연산자가 매우 유용할 수 있습니다. 계속하기 전에 여러 값을 요구해야 하는 경우 논리 AND(&&) 연산자가 매우 유용할 수 있습니다. 이는 단지 두 가지 예일 뿐이며, 이러한 연산자를 계속 탐색하면 참 또는 거짓 부울 값을 확인하는 일반적인 검사 외에 이러한 연산자를 사용하는 더 많은 방법이 있다는 것을 알게 될 것입니다. 논리 AND(&&) 및 OR(||) 사용을 고려할 때 다음 두 가지 사항을 염두에 두십시오.

• OR (||) : 참인 경우에만 왼쪽의 값을 사용하세요.
• AND (&&) : falsy인 경우에만 왼쪽 값을 사용하세요.

궁금한 점은 댓글로 남겨주세요. 이 주제에 대해 더 자세히 논의하고 싶습니다.

즐거운 코딩하세요!

以上是JavaScript 中邏輯與 (&&) 和或 (||) 的靈活運用的詳細內容。更多資訊請關注PHP中文網其他相關文章！