Beispiele für die Verwendung der Operatoren && und || in JavaScript

Beispiele für die Verwendung der Operatoren && und || in JavaScript

Vorwort

Im Bereich der Frontend-Entwicklung werden der &&-Operator und der ||-Operator am häufigsten verwendet.

Die Funktionen des &&-Operators und des ||-Operators sind besonders leistungsstark. Wenn Sie ein hervorragender Front-End-Ingenieur werden möchten, sind der &&-Operator und der ||-Operator unverzichtbar.

Viele Front-End-Ingenieure (Neulinge [einschließlich des Herausgebers selbst]) verwenden den &&-Operator und den ||-Operator jedoch nur sehr wenig.

Bei der Entwicklung einiger Projekte in der Schule haben wir es bisher nie eingesetzt, da wir an traditionelle Konzepte gebunden waren. Dies ist unser Verständnis des &&-Operators und des ||-Operators.

&& Operator

  • Der &&-Operator gibt „true“ zurück, wenn sowohl das Ergebnis auf der linken als auch das Ergebnis auf der rechten Seite „true“ sind.
  • Der &&-Operator gibt „false“ zurück, wenn sowohl das Ergebnis links als auch das Ergebnis rechts „false“ sind.
  • Der &&-Operator gibt „false“ zurück, wenn entweder das Ergebnis links oder das Ergebnis rechts „false“ ist.

Zusammenfassung: Wahr, wenn gleich, andernfalls falsch

|| Betreiber

  • Das Ergebnis ist wahr, wenn sowohl das Ergebnis links als auch das Ergebnis rechts vom ||-Operator wahr sind.
  • Das Ergebnis des ||-Operators ist wahr, wenn entweder das Ergebnis links oder das Ergebnis rechts falsch ist.
  • Das Ergebnis des ||-Operators ist falsch, wenn sowohl das Ergebnis auf der linken als auch das Ergebnis auf der rechten Seite falsch sind.

Zusammenfassung: Wenn dasselbe falsch ist, ist es falsch, andernfalls ist es wahr

Aber ist das wirklich der Fall? Schauen wir uns eine kleine Demo des &&-Operators an.

<!DOCTYPE html>
<html>
   <Kopf>
       <meta charset="UTF-8">
       <Titel></Titel>
   </Kopf>
   <Text>
       <Skripttyp="text/javascript">
           lass Ergebnis=1&&2;
           console.log(Ergebnis);
 
 
                             </Skript>
   </body>
</html>

Ist das von Ihnen zurückgegebene Ergebnis wahr? Am Anfang war ich genauso wie Sie, aber nach einiger Übung stellte ich fest, dass dies nicht der Fall war. Bitte erlauben Sie mir, hier eine kleine Anzeige zu machen. Sie können im Tencent Classroom oder bei bilibili nach Duyi Education suchen. Ich kann es nur empfehlen. Ehrlich gesagt halten die Lehrer dort hervorragende Vorlesungen. Wer interessiert ist, kann es ausprobieren. Kommen wir nun zurück zum Thema. Das zurückgegebene Ergebnis ist tatsächlich 2.

Eine kleine Demo des ||-Operators

<!DOCTYPE html>
<html>
   <Kopf>
       <meta charset="UTF-8">
       <Titel></Titel>
   </Kopf>
   <Text>
       <Skripttyp="text/javascript">
           var Ergebnis=1||0
           console.log(Ergebnis);
       </Skript>
   </body>
</html>

Ergebnis:

Sind Sie überrascht? , oh mein Gott! Zu meiner Überraschung ist der Rückgabewert in beiden Fällen weder true noch false. Okay, ich will euch nicht auf die Folter spannen. Kommen wir direkt zur Sache.

Kapitelziele

  • Erfahren Sie, wie Sie die Operatoren && und || verwenden.
  • Vertiefen Sie Ihr Verständnis des &&-Operators und des ||-Operators anhand von Beispielen

Fallbeispiel (Datenwiedergabe durch Laden von JSON)

<!DOCTYPE html>
<html>
   <Kopf>
       <meta charset="UTF-8">
       <Titel></Titel>
       <style type="text/css">
           #meinTab{
               Breite: 800px;
               Rand: 0 automatisch;
           }
 
 
                             </Stil>
   </Kopf>
   <Text>
       <table border="1" cellspacing="0" cellpadding="0" id="meinTab">
           <tr>
               <th>Nummer</th>
               <th>Name</th>
               <th>Preis</th>
               <th>Status</th>
           </tr>
 
                  </Tabelle>
       <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
       <Skripttyp="text/javascript">
           //0 steht für ausstehende Zahlung, 1 steht für bezahlt, 2 steht für erhalten, 3 steht für andere var orderArray=[
           {
               Ich würde:10001,
               Name: „Xiaomi 9“,
               Preis:1999,
               Status: 0,
           },
           {
               Ich würde:10002,
               Name: „huaweiPro“,
               Preis:2999,
               Status: 1,
           },
           {
               Ich würde:10003,
               Name: „Xiaomi 8“,
               Preis:999,
               Status: 2,
           },
           {
               Ich würde:10004,
               Name: „Honor 8X“,
               Preis:1399,
               Status: 3,
           }
           ];
           $("#myTab tr:not(:eq(0))").entfernen();
           für(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(BestellArray[i].Preis);
               wenn(orderArray[i].status==0){
                   td4.html("Warten auf Zahlung")
               }sonst wenn(orderArray[i].status==1){
                   td4.html("Bezahlt")
               }sonst wenn(orderArray[i].status==2){
                   td4.html("Waren erhalten");
               }sonst wenn(orderArray[i].status==3){
                   td4.html("Andere")
               }
               tr.append(td1);
               tr.append(td2);
               tr.append(td3);
               tr.append(td4);
               $("#myTab").append(tr);
           }
       </Skript>
   </body>
</html>

Das Wirkungsdiagramm sieht wie folgt aus:

Dies ist das Ergebnis, wenn der Operator && und der Operator || nicht verwendet werden. Als Nächstes verwenden wir den Operator && und den Operator ||, um die if...else..if...else-Anweisung zu vereinfachen.

<!DOCTYPE html>
<html>
   <Kopf>
       <meta charset="UTF-8">
       <Titel></Titel>
       <style type="text/css">
           #meinTab{
               Breite: 800px;
               Rand: 0 automatisch;
           }
       </Stil>
   </Kopf>
   <Text>
       <table border="1" cellspacing="0" cellpadding="0" id="meinTab">
           <tr>
               <th>Nummer</th>
               <th>Name</th>
               <th>Preis</th>
               <th>Status</th>
           </tr>
       </Tabelle>
       <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
       <Skripttyp="text/javascript">
           //0 steht für ausstehende Zahlung, 1 steht für bezahlt, 2 steht für erhalten, 3 steht für andere var orderArray=[
           {
               Ich würde:10001,
               Name: „Xiaomi 9“,
               Preis:1999,
               Status: 0,
           },
           {
               Ich würde:10002,
               Name: „huaweiPro“,
               Preis:2999,
               Status: 1,
           },
           {
               Ich würde:10003,
               Name: „Xiaomi 8“,
               Preis:999,
               Status: 2,
           },
           {
               Ich würde:10004,
               Name: „Honor 8X“,
               Preis:1399,
               Status: 3,
           }
           ];
           $("#myTab tr:not(:eq(0))").entfernen();
           für(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(BestellArray[i].Preis);
               var status=orderArray[i].status== 0 && "Zu bezahlen" ||orderArray[i].status== 1 && "Bezahlt" ||orderArray[i].status== 2 && "Erhalten" ||orderArray[i].status== 3 && "Sonstiges"
               td4.html(status); 
// wenn(orderArray[i].status==0){
// td4.html("Warten auf Zahlung")
// }sonst wenn(orderArray[i].status==1){
// td4.html("Bezahlt")
// }sonst wenn(orderArray[i].status==2){
// td4.html("Waren erhalten");
// }anders{
// td4.html("Andere")
// }
               tr.append(td1);
               tr.append(td2);
               tr.append(td3);
               tr.append(td4);
               $("#myTab").append(tr);
           }
       </Skript>
   </body>
</html>

Hier verwenden wir einen Codesatz, um die if..else..if..else-Codeoperation zu lösen, und verwenden den &&-Operator und den ||-Operator, um den Code prägnanter und bequemer zu gestalten. Natürlich ist die Verwendung des &&-Operators und des ||-Operators nicht nur dies. Kurz gesagt, die Funktionen des &&-Operators und des ||-Operators sind besonders leistungsfähig, und wir müssen lernen, sie zu verwenden.

Abschluss

&& Operator

  • Zuerst wird das Ergebnis des ersten Ausdrucks betrachtet, der in einen Booleschen Wert umgewandelt wurde. Wenn dies zutrifft, wird anschließend das Ergebnis des zweiten Ausdrucks betrachtet, der in einen Booleschen Wert umgewandelt wurde. Wenn nur zwei Ausdrücke vorhanden sind, wird anschließend der Wert dieses Ausdrucks zurückgegeben, indem das Ergebnis des zweiten Ausdrucks betrachtet wird.
  • Wenn der Wert des ersten Ausdrucks falsch ist, wird der Wert des ersten Ausdrucks direkt und ohne Rückblick zurückgegeben.
  • Wenn der erste Operand ein Objekt ist, wird der zweite Operand zurückgegeben.
  • Wenn beide Operanden Objekte sind, wird der zweite Operand zurückgegeben.
  • Wenn der zweite Operand ein Objekt ist, wird es nur zurückgegeben, wenn der erste Operand als „true“ ausgewertet wird.
  • Wenn ein Operand null ist, wird null zurückgegeben.
  • Wenn der erste Operand NaN ist, wird NaN zurückgegeben.
  • Wenn der erste Operand nicht definiert ist, wird „undefiniert“ zurückgegeben.

|| Betreiber

  • Zuerst wird das Ergebnis des ersten Ausdrucks betrachtet, der in einen Booleschen Wert umgewandelt wurde. Wenn es falsch ist, wird das Ergebnis des zweiten Ausdrucks betrachtet, der in einen Booleschen Wert umgewandelt wurde. Wenn dann nur zwei Ausdrücke vorhanden sind, wird nur das Ergebnis des zweiten Ausdrucks betrachtet, um den Wert dieses Ausdrucks zurückzugeben.
  • Wenn der Wert des ersten Ausdrucks falsch ist, wird der Wert des zweiten Ausdrucks direkt und ohne Rückblick zurückgegeben.
  • Wenn der erste Operand ein Objekt ist, wird der erste Operand zurückgegeben.
  • Wenn der erste Operand als „false“ ausgewertet wird, wird der zweite Operand zurückgegeben.
  • Wenn beide Operanden Objekte sind, wird der erste Operand zurückgegeben.
  • Wenn beide Operanden null sind, wird null zurückgegeben.
  • Wenn beide Operanden NaN sind, wird NaN zurückgegeben.
  • Wenn beide Operanden undefiniert sind, wird „undefined“ zurückgegeben.

Als falsch betrachtete Werte: false, "", NaN, null, undefiniert

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung des &&-Operators und des ||-Operators in JavaScript. Weitere relevante Inhalte zum &&-Operator und dem ||-Operator in JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • js und oder Operator || && magische Verwendung
  • Einführung in die Verwendung des bitweisen UND-Operators (&) in Javascript
  • Einführung in die Verwendung des bitweisen UND-Zuweisungsoperators (&=) in Javascript
  • Nutzen Sie die Besonderheiten der Operatoren "||" und "&&" in JScript, um Code zu vereinfachen
  • Drei verschiedene Operatorebenen &&

<<:  CSS-Lösung zum Zentrieren von Elementen mit variabler Breite und Höhe

>>:  So konfigurieren Sie Http, Https, WS und WSS in Nginx

Artikel empfehlen

Werden die erfolgreichsten Unternehmen der Zukunft Technologieunternehmen oder Designunternehmen sein?

Moores Gesetz gilt nicht mehr Seit der Übernahme ...

Zusammenfassung der wichtigsten Erkenntnisse des Vue-Entwicklungshandbuchs

Inhaltsverzeichnis Überblick 0. Grundlagen von Ja...

Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial

Inhaltsverzeichnis 1: Kennwortfreie Anmeldekonfig...

So installieren Sie MySQL und aktivieren die Remote-Verbindung auf dem Cloud-Server Ubuntu_Server_16.04.1

1. Installieren Sie MySQL: Verwenden Sie die folg...

Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern

So erhalten Sie den Container-Startbefehl Der Con...

CentOS7-Installations-Tutorial für Zabbix 4.0 (Abbildung und Text)

Deaktivieren Sie SeLinux setenforce 0 Dauerhaft g...

Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System

Inhaltsverzeichnis Vorwort 1. Installieren Sie da...

Beispielanalyse für MySQL-Jointabelle und automatische ID-Inkrementierung

Wie schreibt man „join“? Wenn Sie „Left Join“ ver...

Eine andere Art von „Abbrechen“-Button

Der „Abbrechen“-Button ist nicht Teil des notwend...

In welchen Szenarien in JavaScript können Pfeilfunktionen nicht verwendet werden?

Inhaltsverzeichnis 1. Objektmethoden definieren 2...

Implementierung eines Random Roll Callers basierend auf JavaScript

In diesem Artikel wird der spezifische JavaScript...

JavaScript+html zur Implementierung der Sliding-Verifizierung auf Front-End-Seiten (2)

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

1. Dynamische Parameter Ab 2.6.0 können Sie einen...

Tools zur Bildoptimierung für Webseiten und Tipps zur Verwendung

Als grundlegendes Element einer Webseite sind Bil...

Verwendung des Linux-Befehls usermod

1. Befehlseinführung Der Befehl usermod (user mod...