JavaScript での && および || 演算子の使用例

JavaScript での && および || 演算子の使用例

序文

フロントエンド開発の分野では、&& 演算子と || 演算子が最も頻繁に使用されます。

特に && 演算子と || 演算子の機能は強力です。優秀なフロントエンドエンジニアになりたいなら、&& 演算子と || 演算子は欠かせません。

しかし、多くのフロントエンドエンジニア(初心者(編集者自身も含む))は、&& 演算子と || 演算子をほとんど使用しません。

私たちは伝統的な概念に縛られていたため、学校でプロジェクトを開発する際にはこれまでそれを使用したことがありませんでした。これが && 演算子と || 演算子についての私たちの理解です。

&& 演算子

  • && 演算子は、左側の結果と右側の結果の両方が true の場合に true を返します。
  • && 演算子は、左側の結果と右側の結果の両方が false の場合に false を返します。
  • && 演算子は、左側の結果または右側の結果のいずれかが false の場合に false を返します。

要約: 同じ場合は真、そうでない場合は偽

|| 演算子

  • || 演算子の左側の結果と右側の結果の両方が true の場合、結果は true になります。
  • || 演算子の結果は、左側の結果または右側の結果のいずれかが false の場合に true になります。
  • 左側の結果と右側の結果の両方が false の場合、 || 演算子の結果は false になります。

要約:同じことが偽であれば偽であり、そうでなければ真である

しかし、これは本当にそうなのでしょうか? && 演算子の小さなデモを見てみましょう。

<!DOCTYPE html>
<html>
   <ヘッド>
       <メタ文字セット="UTF-8">
       <タイトル></タイトル>
   </head>
   <本文>
       <script type="text/javascript">
           結果=1&&2;とします。
           console.log(結果);
 
 
                             </スクリプト>
   </本文>
</html>

返される結果は true ですか?最初は私もあなたと同じでしたが、実践してみるとそうではないことがわかりました。ここで少し宣伝させてください。Tencent ClassroomまたはbilibiliでDuyi Educationを検索できます。強くお勧めします。正直に言うと、そこの教師は素晴らしい講義をします。興味のある方は試してみてください。さて、本題に戻りましょう。返された結果は実際には2です。

|| 演算子の簡単なデモ

<!DOCTYPE html>
<html>
   <ヘッド>
       <メタ文字セット="UTF-8">
       <タイトル></タイトル>
   </head>
   <本文>
       <script type="text/javascript">
           var 結果 = 1 ||0
           console.log(結果);
       </スクリプト>
   </本文>
</html>

結果:

驚きましたか? 、 何てことだ!驚いたことに、どちらの場合も戻り値は true でも false でもありません。さて、皆さんを不安にさせるのはやめておきます。早速本題に入りましょう。

章の目的

  • &&演算子と||演算子の使い方を学ぶ
  • 例を通して&&演算子と||演算子の理解を深めます

ケース演習(json を読み込んでデータをレンダリングする)

<!DOCTYPE html>
<html>
   <ヘッド>
       <メタ文字セット="UTF-8">
       <タイトル></タイトル>
       <スタイル タイプ="text/css">
           #マイタブ{
               幅: 800ピクセル;
               マージン: 0 自動;
           }
 
 
                             </スタイル>
   </head>
   <本文>
       <表の境界線="1" セル間隔="0" セルパディング="0" id="myTab">
           <tr>
               <th>番号</th>
               <th>名前</th>
               <th>価格</th>
               <th>ステータス</th>
           </tr>
 
                  </テーブル>
       <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           //0は支払い保留中、1は支払い済み、2は受け取り済み、3はその他を表します var orderArray=[
           {
               id:10001,
               名前:「Xiaomi 9」、
               価格:1999年、
               ステータス:0,
           },
           {
               id:10002,
               名前:'huaweiPro',
               価格:2999、
               ステータス:1,
           },
           {
               id:10003,
               名前:「Xiaomi 8」、
               価格:999,
               ステータス:2,
           },
           {
               id:10004,
               名前:「Honor 8X」、
               価格:1399,
               ステータス:3,
           }
           ];
           $("#myTab tr:not(:eq(0))").remove();
           for(var i=0;i<orderArray.length;i++){
               var tr=$("<tr/>");
               var td1 = $("<td/>");
               var td2=$("<td/>");
               var td3=$("<td/>");
               var td4=$("<td/>")
               td1.html(orderArray[i].id);
               td2.html(orderArray[i].name);
               td3.html(orderArray[i].price);
               if(orderArray[i].status==0){
                   td4.html("支払い待ち")
               }そうでない場合(orderArray[i].status==1){
                   td4.html("有料")
               }そうでない場合(orderArray[i].status==2){
                   td4.html("商品を受け取りました");
               }そうでない場合(orderArray[i].status==3){
                   td4.html("その他")
               }
               tr.append(td1);
               tr.append(td2);
               tr.append(td3);
               tr.append(td4);
               $("#myTab").append(tr);
           }
       </スクリプト>
   </本文>
</html>

効果図は以下のとおりです。

これは、&& 演算子と || 演算子を使用しない結果です。次に、&& 演算子と || 演算子を使用して、if...else..if...else ステートメントを簡略化します。

<!DOCTYPE html>
<html>
   <ヘッド>
       <メタ文字セット="UTF-8">
       <タイトル></タイトル>
       <スタイル タイプ="text/css">
           #マイタブ{
               幅: 800ピクセル;
               マージン: 0 自動;
           }
       </スタイル>
   </head>
   <本文>
       <表の境界線="1" セル間隔="0" セルパディング="0" id="myTab">
           <tr>
               <th>番号</th>
               <th>名前</th>
               <th>価格</th>
               <th>ステータス</th>
           </tr>
       </テーブル>
       <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           //0は支払い保留中、1は支払い済み、2は受け取り済み、3はその他を表します var orderArray=[
           {
               id:10001,
               名前:「Xiaomi 9」、
               価格:1999年、
               ステータス:0,
           },
           {
               id:10002,
               名前:'huaweiPro',
               価格:2999、
               ステータス:1,
           },
           {
               id:10003,
               名前:「Xiaomi 8」、
               価格:999,
               ステータス:2,
           },
           {
               id:10004,
               名前:「Honor 8X」、
               価格:1399,
               ステータス:3,
           }
           ];
           $("#myTab tr:not(:eq(0))").remove();
           for(var i=0;i<orderArray.length;i++){
               var tr=$("<tr/>");
               var td1 = $("<td/>");
               var td2=$("<td/>");
               var td3=$("<td/>");
               var td4=$("<td/>")
               td1.html(orderArray[i].id);
               td2.html(orderArray[i].name);
               td3.html(orderArray[i].price);
               var status=orderArray[i].status== 0 && "支払い予定" ||orderArray[i].status== 1 && "支払い済み" ||orderArray[i].status== 2 && "受領済み" ||orderArray[i].status== 3 && "その他"
               td4.html(ステータス); 
// if(orderArray[i].status==0){
// td4.html("支払いを待っています")
// }そうでない場合、orderArray[i].status==1{
// td4.html("有料")
// }そうでない場合、orderArray[i].status==2{
// td4.html("商品を受け取りました");
// }それ以外{
// td4.html("その他")
// }
               tr.append(td1);
               tr.append(td2);
               tr.append(td3);
               tr.append(td4);
               $("#myTab").append(tr);
           }
       </スクリプト>
   </本文>
</html>

ここでは、1 文のコードを使用して if..else..if..else コード操作を解決し、&& 演算子と || 演算子を使用してコードをより簡潔で便利にします。 もちろん、&& 演算子と || 演算子の使用はこれだけではありません。 つまり、&& 演算子と || 演算子の機能は特に強力であり、それらの使用方法を習得する必要があります。

結論

&& 演算子

  • まず、ブール値に変換された最初の式の結果を調べます。それが真であれば、ブール値に変換された 2 番目の式の結果を調べます。次に、式が 2 つしかない場合は、2 番目の式の結果を調べてその式の値を返します。
  • 最初の式の値が false の場合、後戻りせずに最初の式の値が直接返されます。
  • 最初のオペランドがオブジェクトの場合、2 番目のオペランドが返されます。
  • 両方のオペランドがオブジェクトの場合、2 番目のオペランドを返します。
  • 2 番目のオペランドがオブジェクトの場合、最初のオペランドが true と評価された場合にのみ返されます。
  • 1 つのオペランドが null の場合、null を返します。
  • 最初のオペランドが NaN の場合、NaN が返されます。
  • 最初のオペランドが未定義の場合、undefined を返します。

|| 演算子

  • まず、最初の式をブール値に変換した結果を調べます。それが false の場合は、2 番目の式をブール値に変換した結果を調べます。次に、式が 2 つしかない場合は、2 番目の式の結果のみを調べて、その式の値を返します。
  • 最初の式の値が false の場合、後戻りせずに 2 番目の式の値が直接返されます。
  • 最初のオペランドがオブジェクトの場合、最初のオペランドが返されます。
  • 最初のオペランドが false と評価された場合、2 番目のオペランドが返されます。
  • 両方のオペランドがオブジェクトの場合、最初のオペランドが返されます。
  • 両方のオペランドが null の場合、null を返します。
  • 両方のオペランドが NaN の場合、NaN が返されます。
  • 両方のオペランドが未定義の場合、undefined が返されます。

偽とみなされる値: false、""、NaN、null、undefined

要約する

これで、JavaScript での && 演算子と || 演算子の使用に関するこの記事は終了です。JS での && 演算子と || 演算子に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js and or 演算子 || && マジック使用
  • Javascript のビット AND 演算子 (&) の使用の紹介
  • Javascript のビット AND 代入演算子 (&=) の使用法の紹介
  • JScriptの演算子「||」と「&&」の特殊機能を使用してコードを簡素化します
  • 3つの異なるレベルの演算子&&

<<:  幅と高さが可変の要素を中央に配置するための CSS ソリューション

>>:  Nginx で Http、Https、WS、WSS を設定する方法

推薦する

HTML リスト タグ dl、ul、ol の使用例

コードをコピーコードは次のとおりです。 <!--リストタグ: <dl>: 階層リス...

CSS3 フィルター属性の使い方の紹介

1. はじめにフロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少な...

WeChatアプレットのスクロールビューの改行問題を解決する

今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...

jsはタイトルと説明のキーワードを検出し、見つかった場合は置換するか他のページにジャンプします。

キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...

Sitemesh チュートリアル - ページ装飾技術の原理と応用

1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...

CSSマウスを画像の上に置いたときにマスクレイヤー効果を追加する実装

まず効果を見てみましょう: マウスを画像の上に移動すると、影の効果とテキスト/アイコンが追加されます...

JS ベースのページフローティングボックスを実装するためのサンプルコード

スクロール バーを下に引くと、主にposition:fixed;スタイルにより、フローティング ボッ...

nginxカスタム変数と組み込み定義済み変数の使用

概要Nginx では変数を使用して設定を簡素化し、設定の柔軟性を向上させることができます。すべての変...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...

ログインボックスのドラッグ効果を実現するためのJavascript

この記事では、ログインボックスのドラッグ効果を実現するためのJavascriptの具体的なコードを参...

動的画像読み込み技術の応用とjquery.lazyloadプラグインの使用例

アプリケーション例ウェブサイト http://www.uhuigou.net画像の動的読み込みは目新...

MySql はコミットする必要がありますか?

MySQL が挿入などの操作を実行するときにコミットする必要があるかどうかは、ストレージ エンジン...

VMware ESXi のインストールと使用記録(ダウンロード付き)

目次1. ESXiをインストールする2. ESXiをセットアップする3. ESXiを起動するESXi...

Tencent Cloud Server Centosにデータディスクをマウントする方法

まず、ハードディスクデバイスにデータディスクがあるかどうかを確認します # まずfdisk -lを実...

Vueルーティング相対パスジャンプメソッド

目次Vueルーティング相対パスジャンプ1. 属性の追加2.router.resolveメソッドVue...