ホームページ ウェブフロントエンド jsチュートリアル JavaScript での論理 AND (&&) および OR (||) の柔軟な使用

JavaScript での論理 AND (&&) および OR (||) の柔軟な使用

Sep 26, 2024 am 07:16 AM

Flexible Uses of the Logical AND (&&) and OR (||) in JavaScript

導入

ブール値は絶対値、true または false です。それは非常に明白です。 JavaScript の他のデータ型にも、これらの固有の値 true と false がありますが、これらは true と false ではなく、32、null、0、および「Hello」のように見えるため、それほど明白ではありません。すべての値にこれらの固有の値があることがわかっているということは、通常ブール値に使用されるすべてのデータ型に対して演算を実行できることを意味します。これにより、コーディング時の創造性と柔軟性がさらに高まります。

真実の価値観と偽りの価値観を理解する

if などの制御フロー キーワードや、AND (&&) や OR (||) などの論理演算子を使用する場合、ブール演算を使用して特定の結果を実現します。これらのブール値は true または false で明示的に使用できますが、多くの場合、===、<、> などの比較演算子を使用して生成されます。

制御フローまたは論理演算子でブール値を使用しない場合はどうなりますか?そうですね、あなたは幸運です!これを支援するために、すべての値は本質的に true または false です。すべての値は、真実 または の 2 つのカテゴリに分類できます。

値が真実か虚偽かを判断しようとするときは、の値が限られているため、それらの値を覚えておくことが最善です。

  • 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 である必要があります。それ以外の場合、少なくとも 1 つの値が 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 (&&) 演算子は偽の値を返し、両方が真実である場合にのみ右側の真実の値を返します。 2 つの引数は次のように考えることができます:

(左側) 私が偽りの値である場合にのみ私を使用してください。 && (右側) それ以外の場合は、私を使用してください。

論理和 (||)

論理 OR (||) でブール値を使用する場合、論理演算子が false を返すには、両方の値が false である必要があります。それ以外の場合、少なくとも 1 つの値が true であれば、true を返します。

console.log(false || false); // false
console.log(true || false); // true
console.log(true || true); // true
ログイン後にコピー

論理 OR (||) 演算子がどのように機能するかは次のとおりです。左側の値が true の場合は、それを返します。それ以外の場合は、右側の値を返します。

console.log(1 || 0); // 1
console.log("" || "a"); // "a"
console.log(undefined || null); // null
console.log([] || [1, 2, 3]); // []
ログイン後にコピー

論理 OR (||) 演算子は真の値を返したいと考えており、両方が偽の場合にのみ右側の偽の値を返します。 2 つの引数は次のように考えることができます:

(左側) 私が真実の価値観である場合にのみ私を使用してください。 || (右側) それ以外の場合は、私を使用してください。

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 パラメーターの入力が必要であるため、OR (||) 演算の 2 番目の値は、name が未定義 (関数呼び出し時に引数がない) の場合にのみ使用されます。

複数の入力を必要とする

オブジェクトを作成していて、オブジェクトを作成する前に入力の数が設定されていることを確認したい場合は、必須のパラメーターごとに論理 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 オブジェクトを作成する前に、各パラメーターの引数をチェックします。引数が 1 つでも false の場合は、代わりに else ステートメントを使用してオブジェクトを作成します。したがって、不完全なオブジェクトを防止したり、不完全なエントリ用のデフォルト オブジェクトを作成したりできます。

結論

値が指定されるまでデフォルト値が必要な場合は、論理 OR (||) 演算子が非常に役立ちます。続行する前に複数の値が必要な場合は、論理 AND (&&) 演算子が非常に役立ちます。これらは 2 つの例にすぎません。これらの演算子を調べ続けると、通常の true または false のブール値のチェック以外にもこれらの演算子を使用する方法がたくさんあることがわかります。論理 AND (&&) と OR (||) の使用を検討するときは、次の 2 つの点に留意してください。

  • OR (||) : 真実である場合にのみ、左側の値を使用します。
  • AND (&&) : falsy の場合にのみ、左側の値を使用します。

ご質問がございましたら、コメントに残してください。この話題についてさらに詳しくお話しさせていただければ幸いです。

コーディングを楽しんでください!

以上がJavaScript での論理 AND (&&) および OR (||) の柔軟な使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles