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

Inhaltsverzeichnis

Vorwort
&& Operator
|| Betreiber

Eine kleine Demo des ||-Operators

Kapitelziele

Fallbeispiel (Datenwiedergabe durch Laden von JSON)

Abschluss

Zusammenfassen

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