VorwortWenn wir JavaScript schreiben, stoßen wir häufig auf logische Urteile, die mit if/else oder switch umgesetzt werden können. Bei komplexen Urteilen machen jedoch zu viele Bedingungen unseren Code oft lang und verringern die Lesbarkeit. Also müssen wir unseren Code optimieren, um ihn eleganter zu machen💎. 1. Monadisches Urteil 1.1 BeispielWir schreiben eine allgemeine if/else-Beurteilungsfunktion und optimieren sie dann. const meineFunktion = (status) => { wenn (Status === 1) { console.log("status1"); } sonst wenn (Status === 2) { console.log("status2"); } sonst wenn (Status === 3) { console.log("status3"); } }; 1.2 Setzen Sie es in das Objekt einWir wissen, dass das Objekt von JavaScript eigentlich eine ungeordnete Sammlung von Schlüssel-Wert-Paaren ist, weshalb wir es zum Speichern von Beurteilungsbedingungen verwenden können. Beispielsweise ist im obigen Fall die Beurteilungsbedingung ein numerischer Typ und die nachfolgende Operation verwendet nur eine Zeichenfolge. Zu diesem Zeitpunkt können wir ein Objekt erstellen und die verwendete Zahl und Zeichenfolge als Schlüsselnamen bzw. entsprechenden Wert des Objekts verwenden. //Setze die Beurteilungsbedingung in das Objekt ein const statusObj = { 1: "status1", 2: "status2", 3: "status3", }; // Optimierte Funktion 💎 const meineFunktion = (status) => { console.log(statusObj[status]); }; 1.3 In Karte einfügenZusätzlich zu primitiven Objekten können wir auch Map-Objekte verwenden. Sehen wir uns die Beschreibung von MDN dazu an: Map-Objekte speichern Schlüssel-Wert-Paare und können sich die ursprüngliche Einfügereihenfolge der Schlüssel merken. Jeder beliebige Wert (Objekt oder Primitiv) kann als Schlüssel oder Wert verwendet werden. Es ist nicht schwer zu erkennen, dass das Map-Objekt tatsächlich eine erweiterte Version des normalen Objekts ist. Insbesondere kann jeder Wert als Schlüssel-Wert-Paar verwendet werden, was bedeutet, dass Funktionen, reguläre Ausdrücke usw. auch als Schlüssel oder Wert verwendet werden können, was unsere Operationen, bei denen wir es als Beurteilung verwenden, erheblich erleichtert. Auf die Details zum Map-Objekt wird hier nicht näher eingegangen. //Setze die Beurteilungsbedingungen in die Map ein const statusMap = new Map([ [1, "status1"], [2, "status2"], [3, "status3"], ]); // Optimierte Funktion 💎 const meineFunktion = (status) => { console.log(statusMap.get(status)); }; 2. Mehrfachbeurteilung 2.1 Ein BeispielDa univariate Urteile optimiert werden können, können auch plurale Urteile optimiert werden. Im Folgenden wird ein Fall mit zwei Urteilsbedingungen beschrieben. // Gib ein Beispiel 🌰 const meineFunktion = (rechts, status) => { if (rechts === "Administrator" && Status === 1) { console.log("Administrator mag Wang Bingbing"); } sonst wenn (rechts === "Administrator" && Status === 2) { console.log("Administrator mag Wang Bingbing nicht"); } sonst wenn (rechts === "Benutzer" && Status === 1) { console.log("Benutzer mag Wang Bingbing"); } sonst wenn (rechts === "Benutzer" && Status === 2) { console.log("Der Benutzer mag Wang Bingbing nicht"); } }; // Beispiel mit Duplizierung 🌰 const meineFunktion = (rechts, status) => { if (rechts === "Administrator" && Status === 1) { console.log("Administrator mag Wang Bingbing"); } sonst wenn (rechts === "Administrator" && Status === 2) { console.log("Administrator mag Wang Bingbing"); } sonst wenn (rechts === "Benutzer" && Status === 1) { console.log("Benutzer mag Wang Bingbing"); } sonst wenn (rechts === "Benutzer" && Status === 2) { console.log("Benutzer mag Wang Bingbing"); } }; 2.2 Setzen Sie die Beurteilungsbedingungen in eine Zeichenfolge und fügen Sie sie in das Objekt einBeide Situationen können auch durch die Verwendung von Object optimiert werden. // „Beispiel 🌰“ optimieren //Setze die Beurteilungsbedingung in das Objekt ein const actionsObj = { "administrator-1": "Administrator mag Wang Bingbing", "administrator-2": "Administrator mag Wang Bingbing nicht", "user-1": "Benutzer mag Wang Bingbing", "user-2": "Der Benutzer mag Wang Bingbing nicht", }; // Optimierte Funktion 💎 const meineFunktion = (rechts, status) => { Konsole.log(actionsObj[`${right}-${status}`]); }; // Sie können die Funktion als „Wert“ verwenden. Die folgenden Fälle sind ähnlich und werden nicht im Detail beschrieben. const AktionenObj = { "administrator-1": () => console.log("Administrator mag Wang Bingbing"), "administrator-2": () => console.log("Administrator mag Wang Bingbing"), "user-1": () => console.log("Administrator mag Wang Bingbing"), "user-2": () => console.log("Administrator mag Wang Bingbing"), }; // Optimierte Funktion 💎 const meineFunktion = (rechts, status) => { AktionenObj[`${right}-${status}`](); }; // „Beispiele mit doppelten Situationen 🌰“ optimieren // Öffentliche Funktionen können extrahiert werden. Die folgenden Situationen sind ähnlich und werden nicht wiederholt 🍓 const Aktionen = () => { const f1 = () => console.log("Administrator mag Wang Bingbing"); const f2 = () => console.log("Benutzer mag Wang Bingbing"); zurückkehren { "Administrator-1": f1, "Administrator-2": f1, "Benutzer-1": f2, "Benutzer-2": f2, }; }; // Optimierte Funktion 💎 const meineFunktion = (rechts, status) => { Aktionen()[`${right}-${status}`](); }; 2.3 Setzen Sie die Beurteilungsbedingungen in eine Zeichenfolge und fügen Sie sie in die Karte einIn ähnlicher Weise können wir auch Map-Objekte verwenden. Wir speichern die beiden Bedingungen als Strings. // „Beispiel 🌰“ optimieren //Setze die Beurteilungsbedingungen in die Map ein const actionsMap = new Map([ ['administrator-1', 'Administrator mag Wang Bingbing'], ['administrator-2', 'Der Administrator mag Wang Bingbing nicht'], ['user-1', 'Benutzer mag Wang Bingbing'], ['Benutzer-2', 'Der Benutzer mag Wang Bingbing nicht'] ]); // Optimierte Funktion 💎 const meineFunktion = (rechts, status) => { console.log(actionsMap.get(`${right}-${status}`)); }; 2.4 Setzen Sie die Beurteilungsbedingung in das Objekt und dann in die Karte ein// „Beispiel 🌰“ optimieren //Setze die Beurteilungsbedingungen in die Map ein const actionsMap = new Map([ [{ right: 'administrator', status: 1 }, () => console.log('Administrator mag Wang Bingbing')], [{ right: 'administrator', status: 2 }, () => console.log('Administrator mag Wang Bingbing nicht')], [{ right: 'user', status: 1 }, () => console.log('Benutzer mag Wang Bingbing')], [{ right: 'user', status: 2 }, () => console.log('Der Benutzer mag Wang Bingbing nicht')] ]); // Optimierte Funktion 💎 const meineFunktion = (rechts, status) => { const action = [...actionsMap].filter(([e]) => (e.right === right && e.status === status)); Aktion.fürJeden(([_, index]) => index.call()); }; 2.5 Schreiben Sie die Beurteilungsbedingung als regulären Ausdruck und fügen Sie sie dann in die Karte einMit regulären Ausdrücken können relativ komplexe Situationen behandelt werden. // „Beispiele mit doppelten Situationen 🌰“ optimieren // Schreibe die Beurteilungsbedingung als regulären Ausdruck und füge sie dann in die Map ein const actions = () => { const f1 = () => console.log('Dem Administrator gefällt Wang Bingbing'); const f2 = () => console.log('Benutzer mag Wang Bingbing'); gib eine neue Karte zurück ([ [/^administrator-[1-2]/, f1], [/^Benutzer-[1-2]/, f2] ]); }; // Optimierte Funktion 💎 const meineFunktion = (rechts, status) => { const action = [...actions()].filter(([e]) => e.test(`${right}-${status}`)); Aktion.fürJeden(([_, index]) => index.call()); }; AbschlussWir verwenden native Objekt- und Map-Objekte, um die Beurteilung zu optimieren, aber im eigentlichen Entwicklungsprozess müssen wir dennoch zunächst dem Prinzip der Praktikabilität folgen und eine Überoptimierung vermeiden. Dies ist das Ende dieses Artikels über die elegante Art, Urteile in JavaScript zu schreiben. Weitere Informationen zur eleganten Art, Urteile in JavaScript zu schreiben, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Tutorial zu HTML-Tabellen-Tags (8): Hintergrundbild-Attribut BACKGROUND
>>: Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen
Warum brauchen wir ein Berechtigungsmanagement? 1...
Lösung zum Vergessen des MySQL-Passworts: [root@l...
Bei der Installation in MySQL 8.0.16 können einig...
Holen Sie sich das Mongo-Image sudo docker pull m...
Kommen wir ohne weitere Umschweife direkt zum Cod...
In diesem Artikel wird der spezifische Code von j...
sudo-Konfigurationsdatei Die Standardkonfiguratio...
Traditionell erstellen Entwickler Eigenschaften i...
1. Effektanzeige Ein in JavaScript geschriebenes ...
1. Einleitung: Wenn wir Flash-Inhalte normal auf d...
CSS spielt auf einer Webseite eine sehr wichtige ...
Wie können wir sagen, dass wir 404 vermeiden soll...
Beim Erstellen von Datenbankstatistiken müssen Si...
1. Chinesische Eingabemethode einrichten 2. Stell...
Inhaltsverzeichnis 1. Beispiel für Drag-Effekt 2....