Eine kurze Diskussion darüber, wie man schöne bedingte Ausdrücke in JS schreibt

Eine kurze Diskussion darüber, wie man schöne bedingte Ausdrücke in JS schreibt

Mehrere bedingte Anweisungen

Mehrere 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?

Multiattributobjekt

Dies 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:

  • Wenn kein Tier vorhanden ist, werfen Sie einen Fehler
  • Drucken Sie die Tierart
  • Drucken Sie den Namen des Tieres
  • Drucken Sie das Geschlecht des Tieres
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:

  • If/else-Anweisungen zum Filtern ungültiger Bedingungen
  • 3 Ebenen verschachtelter if-Anweisungen (Bedingungen 1, 2 und 3)
  • Als allgemeine Regel gilt, bei Feststellung einer ungültigen Bedingung frühzeitig zurückzukehren.
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-Anweisung

Schauen 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 Destrukturierung

Wenn 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 Bedingungen

Durch 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ührung

https://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:
  • Zusammenfassung der Optimierungstechniken für bedingte Anweisungen in JavaScript
  • So schreiben Sie bessere bedingte Anweisungen in JavaScript
  • JSP implementiert allgemeine Paging-Komponente mit Abfragebedingungen
  • Detaillierte Erklärung von 5 Regeln zum Schreiben guter JS-Bedingungsanweisungen
  • Teilen Sie 5 Tipps zum Schreiben besserer bedingter Anweisungen in JavaScript
  • Detaillierte Erklärung zur Verwendung von bedingten Anweisungen in JavaScript
  • Detaillierte Erklärung der bedingten Kommentare in JScript
  • Javascript-Grundlagen-Tutorial - if-Bedingungsanweisung
  • Bedingtes Urteil in Javascript

<<:  MySQL 5.7-Bereitstellung und Remotezugriffskonfiguration unter Linux

>>:  Implementierung der Änderung von Konfigurationsdateien im Docker-Container

Artikel empfehlen

Besser aussehende benutzerdefinierte CSS-Stile (Titel h1 h2 h3)

Rendern Häufig verwendete Stile im Blog Garden /*...

Drei gängige Stilselektoren in HTML-CSS

1: Tag-Selektor Der Tag-Selektor wird für alle Ta...

Verwendung regulärer Ausdrücke in CSS-Selektoren

Ja, CSS hat auch reguläre Ausdrücke (Amen) Zwei l...

Vue implementiert die Internationalisierung der Sprachumschaltung für Webseiten

1. Grundlegende Schritte 1: Installieren Sie yarn...

So realisieren Sie die vertikale Anordnung von Text mit CSS3

In einem aktuellen Projekt wollte ich Text vertik...

JavaScript-Beispielcode zum Ermitteln, ob eine Datei vorhanden ist

1. Geschäftsszenario Ich habe kürzlich Entwicklun...

Vue Learning - Grundlagen des VueRouter-Routings

Inhaltsverzeichnis 1. VueRouter 1. Beschreibung 2...

Detaillierte Erklärung der Speicher-Engine in MySQL

Übersicht über die MySQL-Speicher-Engine Was ist ...