Beispiele für die Verwendung der Operatoren && und || in JavaScript
VorwortIm 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
Zusammenfassung: Wahr, wenn gleich, andernfalls falsch || Betreiber
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
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
|| Betreiber
Als falsch betrachtete Werte: false, "", NaN, null, undefiniert ZusammenfassenDies 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:
|
<<: 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
Drei Möglichkeiten zum Konfigurieren einer JNDI-Datenquelle in Tomcat
In meiner früheren Arbeit war der Entwicklungsser...
Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle
MySQL Vorteil: Kleine Größe, hohe Geschwindigkeit...
Detaillierte grundlegende Operationen an Datentabellen in der MySQL-Datenbank
Inhaltsverzeichnis 1. Zeigen Sie die Tabellen in ...
Detaillierte Erläuterung der Datenbindung von Vue-Formularereignissen
<Text> <div id="Wurzel"> &l...
Detaillierte Erläuterung der offiziellen Gesichtsüberprüfung des WeChat Mini-Programms
Das Miniprogramm sammelte persönliche Benutzerinf...
Detaillierte Erklärung zu Drag-Time und Drag-Case in JavaScript
Inhaltsverzeichnis DragEvent-Schnittstelle Übersi...
Verwendung des Vuex-Namespace
Inhaltsverzeichnis Da Vuex einen einzelnen Zustan...
Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten
1.MySQL UPDATE JOIN-Syntax In MySQL können Sie di...
Die Fallstricke bei der Beurteilung von NULL-Werten in MySQL
Inhaltsverzeichnis Vorwort MySQL-Fall mit Syntax:...
JavaScript-Grundlagenobjekte
Inhaltsverzeichnis 1. Gegenstand 1.1 Was ist ein ...
Win10 MySQL 5.6.35 Winx64 kostenlose Installationsversion Konfigurations-Tutorial
Tutorial zur kostenlosen Konfiguration der mysql ...
Ein kurzes Verständnis der drei Prinzipien zum Hinzufügen von MySQL-Indizes
1. Die Bedeutung von Indizes Indizes werden verwe...
Einführung in den Unterschied zwischen OBJECT- und EMBED-Tags zur Anzeige von Flash-Inhalten
1. Einleitung: Wenn wir Flash-Inhalte normal auf d...
Detaillierte Erklärung des JSON-Dateischreibformats
Inhaltsverzeichnis Was ist JSON Warum diese Techn...
Die am häufigsten verwendeten HTML-Tags zum Erstellen von Webseiten
1. Optimierung häufig verwendeter HTML-Tags HTML ...