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 を応援していただければ幸いです。

以下もご興味があるかもしれません: