Mithilfe verschiedener JavaScript-Tipps und Syntaxkürzel helfen Ihnen diese Funktionen bei der Lösung vieler häufiger Probleme.

JavaScript ist die De-facto-Sprache zum Erstellen moderner Web- und Mobilanwendungen. Es unterstützt eine Vielzahl von Projekten, von einfachen Websites bis hin zu dynamischen, interaktiven Apps.

Um Produkte zu erstellen, die Benutzer lieben und schätzen werden, ist es wichtig, Code zu schreiben, der nicht nur funktional, sondern auch effizient und einfach zu warten ist. Sauberer JavaScript-Code ist entscheidend für den Erfolg jeder Web- oder mobilen App, egal ob es sich um ein Hobby-Nebenprojekt oder eine komplexe kommerzielle Anwendung handelt.

Was ist so gut an JavaScript-Funktionen?

Eine Funktion ist eine wesentliche Komponente zum Schreiben von Code für jede Anwendung. Es definiert einen Teil wiederverwendbaren Codes, den Sie aufrufen können, um eine bestimmte Aufgabe auszuführen.

Funktionen sind über ihre Wiederverwendbarkeit hinaus sehr vielseitig. Langfristig vereinfachen sie den Prozess der Skalierung und Wartung einer Codebasis. Von

instagram viewer
Erstellen und Verwenden von JavaScript-Funktionen, können Sie viel Entwicklungszeit sparen.

Hier sind einige hilfreiche JavaScript-Funktionen, die die Qualität des Codes Ihres Projekts erheblich verbessern können.

1. einmal

Diese Once-Funktion höherer Ordnung umschließt eine andere Funktion, um sicherzustellen, dass Sie sie nur einmal aufrufen können. Es sollte nachfolgende Versuche, die resultierende Funktion aufzurufen, stillschweigend ignorieren.

Stellen Sie sich eine Situation vor, in der Sie HTTP-API-Anforderungen stellen möchten, um Daten aus einer Datenbank abzurufen. Sie können die anhängen einmal Funktion als Rückruf für eine Ereignis-Listener-Funktion, sodass es einmal ausgelöst wird und nicht mehr.

So könnten Sie eine solche Funktion definieren:

konst einmal = (Funk) => {
lassen Ergebnis;
lassen funcCalled = FALSCH;
zurückkehren(...argumente) => {
Wenn (!funcCalled) {
 result = func(...args);
 funcCalled = WAHR;
 }
zurückkehren Ergebnis;
 };
};

Die Once-Funktion nimmt eine Funktion als Argument und gibt eine neue Funktion zurück, die Sie nur einmal aufrufen können. Wenn Sie die neue Funktion zum ersten Mal aufrufen, führt sie die ursprüngliche Funktion mit den angegebenen Argumenten aus und speichert das Ergebnis.

Alle nachfolgenden Aufrufe der neuen Funktion geben das gespeicherte Ergebnis zurück, ohne die ursprüngliche Funktion erneut auszuführen. Schauen Sie sich die folgende Implementierung an:

// Definieren Sie eine Funktion zum Abrufen von Daten aus der DB
FunktionBenutzerdaten abrufen() {
// ...
}
// Abrufen einer Version der getUserData-Funktion, die nur einmal ausgeführt werden kann
konst makeHTTPRequestOnlyOnce = einmal (getUserData);
konst userDataBtn = dokumentieren.querySelector("#btn");
userDataBtn.addEventListener("klicken", makeHTTPRequestOnlyOnce);

Durch die Verwendung der Once-Funktion können Sie sicherstellen, dass der Code nur eine Anfrage sendet, auch wenn der Benutzer mehrmals auf die Schaltfläche klickt. Dadurch werden Leistungsprobleme und Fehler vermieden, die durch redundante Anforderungen entstehen können.

2. Rohr

Mit dieser Pipe-Funktion können Sie mehrere Funktionen in einer Sequenz miteinander verketten. Die Funktionen in der Sequenz nehmen das Ergebnis der vorhergehenden Funktion als Eingabe und die letzte Funktion in der Sequenz berechnet das Endergebnis.

Hier ist ein Beispiel im Code:

// Definiere die Pipe-Funktion
konst Rohr = (...funktioniert) => {
zurückkehren(Arg) => {
 funcs.forEach(Funktion(Funk) {
 arg = func (arg);
 });
zurückkehren Arg;
 }
}


// Einige Funktionen definieren
konst addOne = (A) => ein + 1;
konst doppelt = (X) => X * 2;
konst Quadrat = (X) => x * x;


// Erstellen Sie eine Pipe mit den Funktionen
konst myPipe = pipe (addOne, double, square);
// Teste die Pipe mit einem Eingabewert
Konsole.log (meinePipe(2)); // Ausgabe: 36

Pipe-Funktionen können die Lesbarkeit und Modularität von Code verbessern, indem sie es Ihnen ermöglichen, komplexe Verarbeitungslogik präzise zu schreiben. Dadurch kann Ihr Code verständlicher und einfacher zu warten sein.

3. Karte

Die Kartenfunktion ist eine Methode der eingebauten JavaScript-Klasse Array. Es erstellt ein neues Array, indem es eine Callback-Funktion auf jedes Element des ursprünglichen Arrays anwendet.

Es durchläuft jedes Element im Eingabearray, übergibt es als Eingabe an die Callback-Funktion und fügt jedes Ergebnis in ein neues Array ein.

Es ist wichtig zu beachten, dass das ursprüngliche Array während dieses Prozesses in keiner Weise geändert wird.

Hier ist ein Beispiel für die Verwendung Karte:

konst zahlen = [1, 2, 3, 4, 5];
konst doubledNumbers = numbers.map(Funktion(Nummer) {
zurückkehren Nummer * 2;
});
Konsole.log (doubledNumbers);
// Ausgabe: [2, 4, 6, 8, 10]

In diesem Beispiel iteriert die map-Funktion über jedes Element im Zahlen-Array. Es multipliziert jedes Element mit 2 und gibt die Ergebnisse in einem neuen Array zurück.

Im Allgemeinen beseitigen Kartenfunktionen die Notwendigkeit von Verwendung von Schleifen in JavaScript, insbesondere Endlosschleifen – Endlosschleifen können einen erheblichen Rechenaufwand verursachen und zu Leistungsproblemen in einer Anwendung führen. Dadurch wird die Codebasis übersichtlicher und weniger fehleranfällig.

4. wählen

Mit dieser Auswahlfunktion können Sie selektiv bestimmte Eigenschaften aus einem vorhandenen Objekt extrahieren und als Ergebnis der Berechnung ein neues Objekt mit diesen Eigenschaften erzeugen.

Betrachten Sie beispielsweise eine Berichtsfunktion in einer Anwendung, die Sie mithilfe der Auswahlfunktion mühelos anpassen können verschiedene Berichte basierend auf den gewünschten Benutzerinformationen, indem Sie explizit die Eigenschaften angeben, die Sie in verschiedene aufnehmen möchten Berichte.

Hier ist ein Beispiel im Code:

konst wähle = (Objekt, ...Tasten) => {
zurückkehren Tasten.reduzieren ((Ergebnis, Schlüssel) => {
Wenn (object.hasOwnProperty (Schlüssel)) {
 Ergebnis[Schlüssel] = Objekt[Schlüssel];
 }
zurückkehren Ergebnis;
 }, {});
};

Die Pick-Funktion nimmt ein Objekt und eine beliebige Anzahl von Schlüsseln als Argumente. Die Schlüssel stellen die Eigenschaften dar, die Sie auswählen möchten. Anschließend wird ein neues Objekt zurückgegeben, das nur die Eigenschaften des ursprünglichen Objekts mit übereinstimmenden Schlüsseln enthält.

konst Benutzer = {
 Name: 'Martin',
 Alter: 30,
 Email: '[email protected]',
};
Konsole.log (wähle (Benutzer, 'Name', 'Alter'));
// Ausgabe: { Name: 'Martin', Alter: 30 }

Im Wesentlichen kann eine Auswahlfunktion komplexe Filterlogik in einer einzigen Funktion kapseln, wodurch der Code leichter verständlich und debuggbar wird.

Es kann auch die Wiederverwendbarkeit von Code fördern, da Sie die Auswahlfunktion in Ihrer gesamten Codebasis wiederverwenden können, wodurch die Codeduplizierung reduziert wird.

5. Reißverschluss

Diese Zip-Funktion kombiniert Arrays zu einem einzigen Array von Tupeln und passt entsprechende Elemente aus jedem Eingabearray an.

Hier ist eine Beispielimplementierung einer Zip-Funktion:

FunktionReißverschluss(...Arrays) {
konst maxLength = Mathematik.min(...arrays.map(Reihe => array.länge));
zurückkehrenArray.aus(
 { Länge: maximale Länge },
 (_, index) => arrays.map(Reihe => Array[Index])
 );
};


konst ein = [1, 2, 3];
konst b = ['A', 'B', 'C'];
konst c = [WAHR, FALSCH, WAHR];
Konsole.log (zip (a, b, c));
// Ausgabe: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Die Zip-Funktion akzeptiert Eingabearrays und berechnet ihre längste Länge. Anschließend wird mithilfe der JavaScript-Methode Array.from ein einzelnes Array erstellt und zurückgegeben. Dieses neue Array enthält Elemente aus jedem Eingabearray.

Dies ist besonders nützlich, wenn Sie Daten aus mehreren Quellen sofort kombinieren müssen, ohne redundanten Code schreiben zu müssen, der sonst Ihre Codebasis überladen würde.

Arbeiten mit JavaScript-Funktionen in Ihrem Code

JavaScript-Funktionen verbessern die Qualität Ihres Codes erheblich, indem sie eine vereinfachte und kompakte Möglichkeit bieten, einen Großteil der Programmierlogik für kleine und große Codebasen zu handhaben. Indem Sie diese Funktionen verstehen und verwenden, können Sie effizientere, lesbarere und wartbarere Anwendungen schreiben.

Das Schreiben von gutem Code ermöglicht es, Produkte zu erstellen, die nicht nur ein bestimmtes Problem für Endbenutzer lösen, sondern dies auch auf eine Weise tun, die einfach zu ändern ist.