Mehrere bedingte AnweisungenMehrere bedingte Anweisungen mit Array.includes Zum Beispiel Funktion printAnimals(Tier) { if (Tier === "Hund" || Tier === "Katze") { console.log(`Ich habe ein ${animal}`); } } console.log(printAnimals("dog")); // Ich habe einen Hund Diese Schreibweise scheint in Ordnung zu sein, wenn weniger Bedingungen vorliegen. Derzeit haben wir nur zwei Tierarten, aber was ist, wenn wir mehr Bedingungen zum Beurteilen haben (mehr Tiere)? Wenn wir die Beurteilungsbedingungen weiter ausbauen, wird es schwierig, den Code zu warten, und die Logik wird unklar. Problemumgehung Sie können Array.includes verwenden, um bedingte Anweisungen neu zu schreiben Funktion printAnimals(Tier) { const animals = ["Hund", "Katze", "Hamster", "Schildkröte"]; wenn (Tiere.includes(Tier)) { console.log(`Ich habe ein ${animal}`); } } console.log(printAnimals("hamster")); // Ich habe einen Hamster Hier erstellen wir ein Array von Tieren, um die Bedingung getrennt vom Rest des Codes zu extrahieren. Wenn wir jetzt nach anderen Tieren suchen möchten, müssen wir lediglich ein neues Array-Element hinzufügen. Wir können die Variable „animals“ auch außerhalb des Gültigkeitsbereichs dieser Funktion verwenden, um sie an anderer Stelle im Code wiederzuverwenden. Auf diese Weise können Sie Code schreiben, der klarer, leichter verständlich und wartbar ist. Ist es nicht? MultiattributobjektDies ist ein sehr guter Trick, um Ihren Code zu verdichten und ihn übersichtlicher erscheinen zu lassen. Nehmen wir das vorherige Beispiel und fügen noch ein paar weitere Bedingungen hinzu. Was wäre, wenn das Tier keine einfache Schnur, sondern ein Objekt mit bestimmten Eigenschaften wäre? Die Anforderung lautet nun:
const printAnimalDetails = (Tier) => { let result; // deklariere eine Variable zum Speichern des Endwerts // Bedingung 1: Überprüfe, ob das Tier einen Wert hat wenn (Tier) { // Bedingung 2: Überprüfen Sie, ob das Tier eine Typ-Eigenschaft hat wenn (Tier.Typ) { // Bedingung 3: Überprüfen Sie, ob das Tier eine Namenseigenschaft hat wenn (Tiername) { // Bedingung 4: Überprüfen Sie, ob das Tier eine Geschlechtseigenschaft hat if (Tier.Geschlecht) { Ergebnis = `${animal.name} ist ein ${animal.gender} ${animal.type};`; } anders { Ergebnis = „Kein Tiergeschlecht“; } } anders { Ergebnis = „Kein Tiername“; } } anders { Ergebnis = "Keine Tierart"; } } anders { Ergebnis = "Kein Tier"; } Ergebnis zurückgeben; }; console.log(printAnimalDetails()); // 'Kein Tier' console.log(printAnimalDetails({ Typ: "Hund", Geschlecht: "weiblich" })); // 'Kein Tiername' console.log(printAnimalDetails({ Typ: "Hund", Name: "Lucy" })); // 'Kein Tiergeschlecht' konsole.log( printAnimalDetails({ Typ: "Hund", Name: "Lucy", Geschlecht: "weiblich" }) ); // 'Lucy ist eine Hündin' Der obige Code funktioniert einwandfrei, ist jedoch lang und schwer zu pflegen. Ohne die Verwendung des Tooltips verschwenden Sie möglicherweise einige Zeit damit, herauszufinden, wo sich die schließende Klammer befindet. Stellen Sie sich vor, was passieren würde, wenn der Code eine komplexere Logik hätte. Viele if...else-Anweisungen! Wir können die obige Funktion mit dem ternären Operator , &&-Bedingung usw. umgestalten. Schreiben wir aber einen präziseren Code mit mehreren Return-Anweisungen. const printAnimalDetails = ({ Typ, Name, Geschlecht } = {}) => { if (!type) return "Keine Tierart"; if (!name) return "Kein Tiername"; if (!gender) return "Kein Tiergeschlecht"; // Jetzt sind wir in dieser Codezeile sicher, dass wir hier ein Tier mit allen //drei Eigenschaften haben. return `${name} ist ein ${gender} ${type}`; }; console.log(printAnimalDetails()); // 'Keine Tierart' console.log(printAnimalDetails({ type: dog })); // 'Kein Tiername' console.log(printAnimalDetails({ Typ: Hund, Geschlecht: weiblich })); // 'Kein Tiername' console.log(printAnimalDetails({ Typ: Hund, Name: "Lucy", Geschlecht: "weiblich" })); // 'Lucy ist eine Hündin' In der überarbeiteten Version sind auch Destrukturierungs- und Standardparameter enthalten. Standardparameter stellen sicher, dass wir, wenn wir „undefined“ als Argument an eine Methode übergeben, immer noch einen zu destrukturierenden Wert haben, in diesem Fall ein leeres Objekt {}. Normalerweise wird Code zwischen diesen beiden Methoden geschrieben. Zum Beispiel Funktion printVegetablesWithQuantity(Gemüse, Menge) { const Gemüse = ["Kartoffel", "Kohl", "Blumenkohl", "Spargel"]; // Bedingung 1: Gemüse muss vorhanden sein wenn (Gemüse) { // Bedingung 2: muss eins der Elemente aus der Liste sein wenn (Gemüse.enthält(Gemüse)) { console.log(`Ich mag ${vegetable}`); // Bedingung 3: muss große Menge sein wenn (Menge >= 10) { console.log("Ich habe eine große Menge gekauft"); } } } anders { throw new Error("Kein Gemüse in der Liste!"); } } printVegetablesWithQuantity(null); // Kein Gemüse in der Liste! printVegetablesWithQuantity("Kohl"); // Ich mag Kohl printVegetablesWithQuantity("Kohl", 20); // 'Ich mag Kohl' // 'Ich habe eine große Menge gekauft' Jetzt haben wir:
Funktion printVegetablesWithQuantity(Gemüse, Menge) { const Gemüse = ["Kartoffel", "Kohl", "Blumenkohl", "Spargel"]; // Bedingung 1: Fehler frühzeitig auslösen if (!gemüse) throw new Error("Kein Gemüse in der Liste!"); // Bedingung 2: muss in der Liste sein wenn (Gemüse.enthält(Gemüse)) { console.log(`Ich mag ${vegetable}`); // Bedingung 3: muss eine große Menge sein wenn (Menge >= 10) { console.log("Ich habe eine große Menge gekauft"); } } } Dadurch reduzieren wir die Anzahl verschachtelter Anweisungen um eine Ebene. Dieser Codierstil ist gut, insbesondere bei der Verwendung langer if-Anweisungen. Wir können die verschachtelte „if“-Verteilung weiter reduzieren, indem wir die Bedingung invertieren und frühzeitig zurückkehren. Nachfolgend sehen Sie, wie Bedingung 2 umgesetzt wird: Funktion printVegetablesWithQuantity(Gemüse, Menge) { const Gemüse = ["Kartoffel", "Kohl", "Blumenkohl", "Spargel"]; if (!gemüse) throw new Error("Kein Gemüse in der Liste!"); // Bedingung 1: Fehler frühzeitig auslösen wenn (!Gemüse.includes(Gemüse)) return; // Bedingung 2: Rückkehr von der Funktion ist das Gemüse nicht in // die Liste console.log(`Ich mag ${vegetable}`); // Bedingung 3: muss eine große Menge sein wenn (Menge >= 10) { console.log("Ich habe eine große Menge gekauft"); } } Durch die Umkehrung der Bedingungen der Bedingung 2 weist der Code keine verschachtelten Anweisungen mehr auf. Diese Technik ist nützlich, wenn wir viele Bedingungen haben und die weitere Verarbeitung stoppen möchten, wenn eine bestimmte Bedingung nicht erfüllt ist. Versuchen Sie daher immer, die Nisttätigkeit zu reduzieren und frühzeitig zurückzukehren, aber übertreiben Sie es nicht. Ersetzen der Switch-AnweisungSchauen wir uns das folgende Beispiel an, in dem wir Früchte entsprechend ihrer Farbe drucken möchten: Funktion printFruits(Farbe) { // Switch Case verwenden, um Früchte nach Farbe zu finden Schalter (Farbe) { Fall "rot": return ["Apfel", "Erdbeere"]; Fall "gelb": return ["Banane", "Ananas"]; Fall "lila": return ["Traube", "Pflaume"]; Standard: zurückkehren []; } } printFruits(null); // [] printFruits("gelb"); // ['Banane', 'Ananas'] Der obige Code ist korrekt, aber sehr ausführlich. Mit einer präziseren Syntax lässt sich dasselbe Ergebnis erzielen. // Objektliteral verwenden, um Früchte nach Farbe zu finden const Fruchtfarbe = { rot: ["Apfel", "Erdbeere"], gelb: ["Banane", "Ananas"], lila: ["Traube", "Pflaume"], }; Funktion printFruits(Farbe) { returniere Fruchtfarbe[Farbe] || []; } In ähnlicher Weise können Sie Map auch für Folgendes verwenden: //Verwende Map, um Früchte nach Farbe zu finden const Fruchtfarbe = neue Map() .set("rot", ["Apfel", "Erdbeere"]) .set("gelb", ["Banane", "Ananas"]) .set("lila", ["Traube", "Pflaume"]); Funktion printFruits(Farbe) { gibt Fruchtfarbe zurück.get(Farbe) || []; } Map ist ein seit ES5 verfügbarer Objekttyp, der die Speicherung von Schlüsselwerten ermöglicht. Für das obige Beispiel können Sie Array.filter verwenden, um dasselbe Ergebnis zu erzielen. const Früchte = [ { Name: "Apfel", Farbe: "rot" }, { Name: "Erdbeere", Farbe: "rot" }, { Name: "Banane", Farbe: "Gelb" }, { Name: "Ananas", Farbe: "gelb" }, { Name: "Traube", Farbe: "lila" }, { Name: "Pflaume", Farbe: "lila" }, ]; Funktion printFruits(Farbe) { returniere Früchte.Filter((Obst) => Frucht.Farbe === Farbe); } Standardparameter und DestrukturierungWenn wir mit JavaScript arbeiten, müssen wir immer auf Null/Undefiniert prüfen und einen Standardwert zuweisen, sonst bricht die Kompilierung ab. Funktion printVegetablesWithQuantity(Gemüse, Menge = 1) { // wenn die Menge keinen Wert hat, weise 1 zu wenn (!Gemüse) return; console.log(`Wir haben ${quantity} ${vegetable}!`); } //Ergebnisse } printVegetablesWithQuantity('Kohl'); // Wir haben 1 Kohl! printVegetablesWithQuantity('potato', 2); // Wir haben 2 Kartoffeln! Was ist, wenn Gemüse ein Objekt ist? Können wir einen Standardparameter zuweisen? Funktion printVegetableName(Gemüse) { if (Gemüse && Gemüse.Name) { Konsole.log(Gemüsename); } anders { console.log("unbekannt"); } } printVegetableName(undefined); // unbekannt printVegetableName({}); // unbekannt printVegetableName({ name: "Kohl", Menge: 2 }); // Kohl Im obigen Beispiel möchten wir den Namen des Gemüses drucken, wenn es verfügbar ist, oder den Namen des unbekannten Gemüses drucken. Wir können das bedingte if (vegetable && vegetable.name){} vermeiden, indem wir Standardparameter verwenden und eine Destrukturierung durchführen. // Zerstören – nur die Namenseigenschaft abrufen // Standardmäßig leeres Objekt zuweisen {} Funktion printVegetableName({ name } = {}) { console.log(Name || "unbekannt"); } printVegetableName(undefined); // unbekannt printVegetableName({}); // unbekannt printVegetableName({ name: "Kohl", Menge: 2 }); // Kohl Da wir nur den Eigenschaftsnamen benötigen, können wir die Struktur des Parameters ändern, um {name} zu verwenden. Dann können wir den Namen als Variable im Code verwenden, anstatt vegetable.name. Wir haben außerdem ein leeres Objekt {} als Standardwert zugewiesen. Andernfalls tritt bei der Ausführung von printVegetableName(undefined) ein Fehler auf: „Die Eigenschaft „Name“ von „undefined“ oder „null“ kann nicht destrukturiert werden, da in „undefined“ keine Eigenschaft „Name“ vorhanden ist.“ Erfüllen Sie alle oder einen Teil der BedingungenDurch die Verwendung dieser Array-Methoden können wir die Anzahl der Codezeilen reduzieren. Im folgenden Code möchten wir überprüfen, ob alle Früchte rot sind: const Früchte = [ { Name: "Apfel", Farbe: "rot" }, { Name: "Banane", Farbe: "Gelb" }, { Name: "Traube", Farbe: "lila" }, ]; Funktion test() { sei isAllRed = true; // Bedingung: alle Früchte müssen rot sein für (sei f von Früchten) { wenn (!isAllRed) brechen; istAllesRed = f.color == "rot"; } console.log(isAllRed); // falsch } Der obige Code ist zu lang. Wir können die Anzahl der Codezeilen durch Verwendung von Array.every reduzieren: const Früchte = [ { Name: "Apfel", Farbe: "rot" }, { Name: "Banane", Farbe: "Gelb" }, { Name: "Traube", Farbe: "lila" }, ]; Funktion test() { // Bedingung: kurzer Weg, alle Früchte müssen rot sein const isAllRed = Früchte.jedes((f) => f.color == "rot"); console.log(isAllRed); // falsch } Wenn wir testen möchten, ob eine Frucht rot ist, können wir analog dazu Array.some verwenden: const Früchte = [ { Name: "Apfel", Farbe: "rot" }, { Name: "Banane", Farbe: "Gelb" }, { Name: "Traube", Farbe: "lila" }, ]; Funktion test() { // Bedingung: wenn eine beliebige Frucht rot ist const isAnyRed = Früchte.einige((f) => f.color == "rot"); console.log(isAnyRed); // wahr } Verwenden optionaler Verkettung und Nullish-Zusammenführunghttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE Diese beiden Funktionen sind sehr nützlich, um prägnantere Bedingungsanweisungen in JavaScript zu schreiben. Zum Zeitpunkt des Schreibens werden sie nicht vollständig unterstützt und müssen möglicherweise mit Babel transpiliert werden. Optionale Verkettung ist in der Lage, baumartige Strukturen zu verarbeiten, ohne dass explizit geprüft werden muss, ob Zwischenknoten vorhanden sind, und Nullish funktioniert in Verbindung mit optionaler Verkettung sehr effektiv, um sicherzustellen, dass Standardwerte für nicht vorhandene Knoten vorhanden sind. Zum Beispiel: const Auto = { Modell: "Fiesta", Hersteller: Name: "Ford", Adresse: Straße: "Ein Straßenname", Nummer: "5555", Staat: "USA", }, }, }; // um das Automodell zu erhalten const model = (Auto && Auto.Modell) || "Standardmodell"; // um die Herstellerstraße zu erhalten const Straße = (Auto && Autohersteller && Autoherstelleradresse && Auto.Hersteller.Adresse.Straße) || "Standardstraße"; // eine nicht vorhandene Eigenschaft anfordern const Telefonnummer = Auto && Autohersteller && Autoherstelleradresse && Autohersteller-Telefonnummer; console.log(Modell); // "Fest" console.log(street); // 'Ein Straßenname' console.log(Telefonnummer); // undefiniert Wenn wir also ausdrucken möchten, ob der Autohersteller aus den USA stammt, würde der Code folgendermaßen aussehen: const isManufacturerFromUSA = () => { Wenn ( Auto && Autohersteller && Autoherstelleradresse && auto.hersteller.adresse.staat === "USA" ) { console.log("true"); } }; checkCarManufacturerState(); // 'wahr' Sie können deutlich erkennen, wie unübersichtlich dies bei komplexeren Objektstrukturen werden kann. Es gibt einige Bibliotheken von Drittanbietern wie lodash oder idx, die über eigene Funktionen verfügen. Beispielsweise hat lodash eine _.get-Methode. Diese Funktion wurde jedoch in der JavaScript-Sprache selbst eingeführt. So funktionieren diese neuen Funktionen: // um das Automodell zu erhalten const model = car?.model ?? "Standardmodell"; // um die Herstellerstraße zu erhalten const street = Auto?.Hersteller?.Adresse?.Straße ?? "Standardstraße"; // um zu prüfen, ob der Autohersteller aus den USA kommt const isManufacturerFromUSA = () => { if (Auto?.Hersteller?.Adresse?.Bundesland === "USA") { console.log("true"); } }; Derzeit in Phase 3. Oben sind einige bedingte Ausdrücke auf JavaScript-Basis aufgeführt. Ich hoffe, dass sie Ihnen weiterhelfen können. Oben finden Sie eine kurze Erläuterung zum Schreiben schöner bedingter Ausdrücke in JS. Weitere Informationen zum Schreiben schöner bedingter Ausdrücke in JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: MySQL 5.7-Bereitstellung und Remotezugriffskonfiguration unter Linux
>>: Implementierung der Änderung von Konfigurationsdateien im Docker-Container
Rendern Häufig verwendete Stile im Blog Garden /*...
1: Tag-Selektor Der Tag-Selektor wird für alle Ta...
In Tomcat ist JSP nicht verstümmelt, aber HTML-Ch...
Lassen Sie uns heute über eine Situation sprechen...
Ja, CSS hat auch reguläre Ausdrücke (Amen) Zwei l...
1. Grundlegende Schritte 1: Installieren Sie yarn...
Es handelt sich hauptsächlich um ein CSS-Stilsteue...
Heute habe ich mysql-5.7.18-winx64.zip von der of...
Inhaltsverzeichnis Installieren Sie MySQL Konfigu...
In einem aktuellen Projekt wollte ich Text vertik...
1. Geschäftsszenario Ich habe kürzlich Entwicklun...
Inhaltsverzeichnis 1. VueRouter 1. Beschreibung 2...
Übersicht über die MySQL-Speicher-Engine Was ist ...
Im Prozess der Teamentwicklung ist die Formulieru...
Vorwort Dieser Artikel stellt hauptsächlich die B...