Allgemeine Artikel

15 Advanced JavaScript -Techniken, die jeder Entwickler wissen sollte

15 Advanced JavaScript -Techniken, die jeder Entwickler wissen sollte

JavaScript ist eine vielseitige und leistungsstarke Programmiersprache, die in der Entwicklung von Webanwendungen ausgiebig verwendet wurde. Als Entwickler ist es wichtig, die Fähigkeiten und fortschrittlichen Techniken der Sprache ein solides Verständnis zu haben, um robuste, effiziente und skalierbare Webanwendungen zu erstellen.

Hier sind 15 erweiterte JavaScript -Techniken, die jeder Entwickler kennen sollte.

1. Schließungen

Verschluss ist eine leistungsstarke Technik in JavaScript, mit der Sie Funktionen mit persistierendem Zustand erstellen können. Im Wesentlichen ist eine Schließung eine Funktion, die sich an die Umgebung „erinnert“, in der sie geschaffen wurde. Dies kann nützlich sein, um private Variablen zu erstellen und Funktionen zu erstellen, mit denen andere Funktionen generiert werden können.

Zum Beispiel:

Funktion counter () let count = 0; return function () return ++ count; const c = counter (); Konsole.log (c ()); // 1 Konsole.log (c ()); // 2 Konsole.log (c ()); // 3
1234567891011Funktion counter () let count = 0; return function () return ++ count; const c = counter (); Konsole.log (c ()); // 1console.log (c ()); // 2console.log (c ()); // 3

Im obigen Beispiel gibt die Zählerfunktion eine Funktion zurück, die Zugriff auf die Zählvariable in ihrem äußeren Bereich hat. Jedes Mal, wenn die zurückgegebene Funktion aufgerufen wird, erhöht sie die Zählvariable und gibt ihren Wert zurück.

2. Currying

Currying ist eine Technik, bei der eine Funktion mit mehreren Argumenten in eine Reihe von Funktionen umgewandelt wird, die jeweils ein einzelnes Argument aufnehmen. Dies kann nützlich sein, um modulare Code zu erstellen und Funktionen zu erstellen, die in verschiedenen Kontexten wiederverwendet werden können.

Zum Beispiel:

Funktion add (a, b) return a + b; Funktion Curryadd (a) return function (b) return add (a, b); const add5 = curryadd (5); Konsole.log (add5 (10)); // 15
123456789101112Funktion add (a, b) return a + b; Funktion Curryadd (a) return function (b) return add (a, b); const add5 = curryadd (5); Konsole.log (add5 (10)); // 15

Im obigen Beispiel wird die Funktion hinzufügen in eine Curry -Funktion unter Verwendung der Curryadd -Funktion in eine Curry -Funktion umgewandelt. Die Curryadd -Funktion nimmt das erste Argument A auf und gibt eine neue Funktion zurück, die das zweite Argument B übernimmt und die ursprüngliche Add -Funktion mit beiden Argumenten aufruft.

3. Memoisierung

Memoisierung ist eine Technik zur Optimierung der Leistung von Funktionen, indem die Ergebnisse teurer Berechnungen zwischengespeichert werden. Dies kann für Funktionen nützlich sein, die häufig bezeichnet werden oder die längere Zeit dauern.

Zum Beispiel:

Funktion fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(… args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci); console.log(memoizedFibonacci(10)); // 55
12345678910111213141516171819202122Funktion fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(...args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci);console.log(memoizedFibonacci(10)); // 55

Im obigen Beispiel nimmt die Memoize -Funktion einen Funktionsfunktion und gibt eine neue Funktion zurück, die das Ergebnis des ursprünglichen Funktionsaufrufs basierend auf seinen Eingabeparametern zwischengespräche. Wenn die Funktion das nächste Mal mit denselben Eingabeparametern aufgerufen wird, wird das zwischengespeicherte Ergebnis zurückgegeben, anstatt die ursprüngliche Funktion auszuführen.

4. Drosselung

Drosseln ist eine Technik, bei der in einem bestimmten Zeitintervall höchstens eine Funktion ausgeführt wird. Dies kann dazu beitragen, die Anzahl der aufgerufenen Funktionen zu begrenzen und die Leistung Ihrer Anwendung zu verbessern.

Zum Beispiel:

Funktion throttle (func, delay) lastcall = 0; Rückgabefunktion (… args) const Now = new Date ().Zeit bekommen(); if (jetzt - lastcall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling'); , 100));
123456789101112131415Funktion throttle (func, delay) lastcall = 0; Rückgabefunktion (...args) const Now = new Date ().Zeit bekommen(); if (jetzt - lastcall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling');, 100));

Im obigen Beispiel nimmt die Gasfunktion einen Funktionsfunktion und eine Zeitintervallverzögerung als Argumente und gibt eine neue Funktion zurück, die höchstens einmal pro Verzögerung Millisekunden ausführt.

Im obigen Beispiel ist der Listener des Scroll -Ereignisses mit einer Drosselklappenfunktion eingewickelt, die die Häufigkeit der Konsole einschränkt.Anweisung log ('Scrollen') wird beim Scrollen ausgeführt.

5. Debouncing

Debouncing ist eine Technik, bei der eine Funktion verzögert wird, bis ein bestimmtes Zeitintervall nach dem letzten Aufruf verstrichen ist. Dies kann dazu beitragen, die Anzahl der aufgerufenen Funktionen zu verringern und die Leistung Ihrer Anwendung zu verbessern.

Zum Beispiel:

Funktion debounce (func, delay) let timerId; Rückgabefunktion (… args) if (timerId) ClearTimeout (TimerId); TimerID = setTimeout (() => func.anwenden (dies, args); TimerId = null; , Verzögerung); Fenster.AddEventListener ('Größe', Debounce (function () Konsole.log ('Änderung'); , 500));
12345678910111213141516Funktion debounce (func, delay) let timerId; Rückgabefunktion (...args) if (timerId) ClearTimeout (TimerId); TimerID = setTimeout (() => func.anwenden (dies, args); TimerId = null; , Verzögerung); Fenster.AddEventListener ('Größe', Debounce (function () Konsole.log ('Größe');, 500));

Im obigen Beispiel übernimmt die Dbard -Funktion einen Funktionsfunktion und eine Zeitintervallverzögerung als Argumente und gibt eine neue Funktion zurück, die die Ausführung von Func verzögert.

Im obigen Beispiel ist der Ereignishörer der Größe des Ereignisses mit einer Entfernung abgeschlossen, die die Häufigkeit der Konsole einschränkt.Anweisung log ('Änderung') wird ausgeführt, während die Größe des Fensters die Größe.

6. Versprechen

Versprechen sind eine Möglichkeit, den asynchronen Code in JavaScript zu verwalten. Sie sind im Wesentlichen ein Platzhalter für einen Wert, der möglicherweise noch nicht verfügbar ist, aber in Zukunft sein wird. Versprechen können verwendet werden, um sicherzustellen, dass bestimmte Code erst nach Abschluss anderer Code ausgeführt werden, und sie können auch verwendet werden, um Fehler auf elegantere Weise zu behandeln als herkömmliche Fehlerbehandlung.

Zum Beispiel:

Funktion fetchData () Neues Versprechen zurückgeben ((Resolve, ablehnen) => fetch ('https: // Beispiel.com/daten ') .Dann (Antwort => Antwort.JSON ()) .Dann (Data => Resolve (data)) .catch (error => ablehnen (Fehler)); ); Daten abrufen() .Dann (Data => Konsole.Logdaten)) .catch (Fehler => Konsole.Fehler (Fehler));
123456789101112Funktion fetchData () Neues Versprechen zurückgeben ((Resolve, ablehnen) => fetch ('https: // Beispiel.com/daten ') .Dann (Antwort => Antwort.JSON ()) .Dann (Data => Resolve (data)) .catch (error => ablehnen (Fehler)); ); Daten abrufen() .Dann (Data => Konsole.Logdaten)) .catch (Fehler => Konsole.Fehler (Fehler));

Im obigen Beispiel gibt die Fetchdata -Funktion ein Versprechen zurück, das sich mit den von https: // abgerufenen Daten auflöst.com/Daten. Das Versprechen wird dann mit den damaligen und fangen Methoden konsumiert, um die aufgelösten Daten und alle Fehler zu verarbeiten.

7. Asynchron/wartet

Async/Auseait ist ein syntaktischer Zucker über Versprechen, mit dem Sie asynchronen Code schreiben können, der wie Synchroncode aussieht. Dies kann asynchroner Code lesbarer und leichter zu pflegen.

Zum Beispiel:

Async -Funktion fetchData () try const response = act act fetch ('https: // Beispiel.com/data '); const data = erwarten.JSON (); Daten zurückgeben; catch (error) Neuen Fehler werfen (Fehler); Daten abrufen() .Dann (Data => Konsole.Logdaten)) .catch (Fehler => Konsole.Fehler (Fehler));
12345678910111213Async -Funktion fetchData () try const response = act act fetch ('https: // Beispiel.com/data '); const data = erwarten.JSON (); Daten zurückgeben; catch (error) Neuen Fehler werfen (Fehler); Daten abrufen() .Dann (Data => Konsole.Logdaten)) .catch (Fehler => Konsole.Fehler (Fehler));

Im obigen Beispiel wird die Fetchdata -Funktion mit dem asynchrischen Schlüsselwort deklariert und verwendet das Keyword, um auf den aufgelösten Wert von Versprechen zu warten, die durch das Fetch und die Antwort zurückgegeben wurden.JSON -Methoden. Alle Fehler werden mit einem Try/Catch -Block erfasst.

8. Generatoren

Generatoren sind eine leistungsstarke Funktion in JavaScript, mit der Sie die Ausführung einer Funktion innehalten und wieder aufnehmen können, während Sie ihren internen Zustand beibehalten. Dies kann für eine Vielzahl von Anwendungen nützlich sein, von asynchronen Programmierungen bis hin zu den Bau Iteratoren.

Hier ist ein Beispiel dafür, wie Sie einen Generator verwenden können, um einen Iterator zu erstellen, der eine unendliche Folge von Fibonacci -Zahlen erzeugt:

Funktion* fibonacci () let [prev, curr] = [0, 1]; while (wahr) Relief curr; [prev, curr] = [Curr, Prev + crus]; const fib = fibonacci (); Konsole.log (fib.nächste().Wert); // Protokolle 1 Konsole.log (fib.nächste().Wert); // Protokolle 1 Konsole.log (fib.nächste().Wert); // Protokolle 2 Konsole.log (fib.nächste().Wert); // Protokolle 3 Konsole.log (fib.nächste().Wert); // Protokolle 5
123456789101112131415Funktion* fibonacci () let [prev, curr] = [0, 1]; while (wahr) Relief curr; [prev, curr] = [Curr, Prev + crus]; const fib = fibonacci (); Konsole.log (fib.nächste().Wert); // Protokolle 1Console.log (fib.nächste().Wert); // Protokolle 1Console.log (fib.nächste().Wert); // Protokolle 2Console.log (fib.nächste().Wert); // Protokolle 3Console.log (fib.nächste().Wert); // Protokolle 5

In diesem Beispiel wird die Fibonacci -Funktion unter Verwendung der Funktion* Syntax als Generatorfunktion deklariert. Die Funktion verwendet eine while -Schleife, um eine unendliche Folge von Fibonacci -Zahlen zu erzeugen, die jeweils mit dem Keyword zum Rendite -Keyword nachgegeben werden. Die FIB -Variable wird dann als Iteratorobjekt unter Verwendung der Funktion fibonacci () initialisiert, und jeder nachfolgende Aufruf zur nächsten () -Methode generiert die nächste Zahl in der Sequenz.

9. Operator ausbreiten

Der mit drei Punkten (…) bezeichnete Spread -Operator ist eine leistungsstarke Funktion in JavaScript, mit der Sie ein iterables Objekt (wie ein Array oder eine Zeichenfolge) in einzelne Elemente erweitern können. Dies kann verwendet werden, um Ihren Code auf verschiedene Weise zu vereinfachen und zu optimieren.

Hier ist ein Beispiel dafür, wie Sie den Spread Operator verwenden könnten, um zwei Arrays zu verkettet:

const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [… arr1,… arr2]; Konsole.log (arr3); // Protokolle [1, 2, 3, 4, 5, 6]
12345const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; Konsole.log (arr3); // Protokolle [1, 2, 3, 4, 5, 6]

In diesem Beispiel wird der Spread -Operator verwendet, um arr1 und arr2 in ein neues Array arr3 zu verkettet. Die… arr1 -Syntax erweitert das ARR1 -Array in einzelne Elemente, die dann mit der… arr2 -Syntax verkettet werden.

10. Funktionen höherer Ordnung

Eine Funktion höherer Ordnung ist eine Funktion, die eine andere Funktion als Argument nimmt oder eine Funktion als Ergebnis zurückgibt. Dies kann nützlich sein, um wiederverwendbares Code zu erstellen, der so angepasst werden kann, dass sie unterschiedliche Anwendungsfälle anpassen.

Funktion multiplyby (faktor) return function (number) return number * faktor; ; const double = multiplyby (2); const triple = multiplyby (3); Konsole.log (Doppel (5)); // Protokolle 10 Konsole.log (Triple (5)); // Protokolle 15
1234567891011Funktion multiplyby (faktor) return function (number) return number * faktor; ; const double = multiplyby (2); const triple = multiplyby (3); Konsole.log (Doppel (5)); // Protokolle 10Console.log (Triple (5)); // Protokolle 15

In diesem Beispiel gibt die Multiplyby -Funktion eine andere Funktion zurück, die eine bestimmte Zahl mit einem bestimmten Faktor multipliziert. Die zurückgegebene Funktion kann verwendet werden, um andere Funktionen zu erstellen, die sich mit verschiedenen Faktoren vermehren.

11. Zerstören

Destructuring ist eine Möglichkeit, Werte aus Objekten oder Arrays auf prägnantere Weise zu extrahieren. Dies kann besonders nützlich sein, wenn Sie mit komplexen Datenstrukturen umgehen, da Sie die von Ihnen benötigten Werte schnell und einfach extrahieren können.

const person = name: 'John', Alter: 30, Adresse: Street: '123 Main St', Stadt: 'Anytown', Staat: 'CA', ZIP: '12345'; const Name, Alter, Adresse: City = Person; Konsole.log (name); // 'John' Konsole.log (Alter); // 30 Konsole.Protokoll (Stadt); // 'Irgendeine Stadt'
12345678910111213141516const person = name: 'John', Alter: 30, Adresse: Street: '123 Main St', Stadt: 'Anytown', Staat: 'CA', ZIP: '12345'; const Name, Alter, Adresse: City = Person; Konsole.log (name); // 'John'console.log (Alter); // 30console.Protokoll (Stadt); // 'Irgendeine Stadt'

In diesem Beispiel zerstören wir das Objekt der Person, um den Namen, das Alter und die Stadteigenschaften zu extrahieren und sie Variablen zuzuweisen.

12. Ereignisdelegation

Die Ereignisdelegation ist eine Technik zum Umgang mit Ereignissen, bei denen ein einzelner Ereignishandler an einem übergeordneten Element angehängt ist, und nicht an jedes einzelne untergeordnete Element. Dies kann nützlich sein, um die Leistung des Ereignisumschlags zu verbessern, sowie für die Behandlung von Ereignissen auf dynamisch generierten Inhalten.

  • Gegenstand 1
  • Punkt 2
  • Punkt 3
const list = document.GetElementById ('MyList'); Liste.AddEventListener ('Click', Funktion (Ereignis) if (Ereignis.Ziel.tagname === 'li') Konsole.Protokoll (Ereignis.Ziel.Textinhalt); );
123456789101112131415
  • Gegenstand 1
  • Punkt 2
  • Punkt 3
const list = document.GetElementById ('MyList'); Liste.AddEventListener ('Click', Funktion (Ereignis) if (Ereignis.Ziel.tagname === 'li') Konsole.Protokoll (Ereignis.Ziel.Textinhalt); );

In diesem Beispiel fügen wir dem UL -Element einen Click -Event -Listener an und verwenden dann das Ereignis.Zieleigenschaft, um zu bestimmen, auf welches Li -Element geklickt wurde. Dies ist nützlich, um Ereignisse auf dynamischen Inhalten zu behandeln, die von der Seite hinzugefügt oder entfernt werden können.

13. Curly -Halterung Gebrauch

In JavaScript werden Curly Brackets verwendet, um Codeblöcke abzugrenzen. Sie können jedoch auch prägnischer verwendet werden, um Objekte zu erstellen oder Objekte zu zerstören. Dies kann besonders nützlich sein, wenn sie mit komplexen Datenstrukturen arbeiten.

Funktion myfunction () const x = 1; const y = 2; if (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y');
12345678910Funktion myfunction () const x = 1; const y = 2; if (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y');

In diesem Beispiel verwenden wir Curly -Klammern, um den Körper der MyFunction -Funktion und die IF -Anweisung zu definieren.

14. JavaScript -Module

JavaScript-Module sind eine Möglichkeit, Code in wiederverwendbare, in sich geschlossene Einheiten zu organisieren. Sie können verwendet werden, um die Funktionalität zu verkapulieren und mehr wartbare Code zu erstellen.

// Modul 1.JS -Exportfunktion add (a, b) return a + b; // modul2.JS importieren add aus './Modul 1.JS '; const sum = add (2, 3); Konsole.log (sum); // 5
1234567891011// Modul 1.JSEXPORT -Funktion add (a, b) return a + b; // module2.Jsimport add aus './Modul 1.JS '; const sum = add (2, 3); Konsole.log (sum); // 5

In diesem Beispiel exportieren wir die Funktion add add module1 aus modul1.JS und dann in Module2 importieren.JS Verwenden der Importanweisung. Auf diese Weise können wir die Funktion hinzufügen, die Funktion in verschiedenen Teilen unseres Codes wiederzuverwenden.

15. Pfeilfunktionen

Pfeilfunktionen sind eine kurze Möglichkeit, Funktionen in JavaScript zu definieren. Sie sind besonders nützlich, um anonyme Funktionen zu erstellen und Funktionen zu erstellen, die ein einzelnes Argument aufnehmen.

const nummern = [1, 2, 3, 4, 5]; Const Evenybers = Zahlen.filter (num => num % 2 === 0); Konsole.log (ausgeglichen); // [2, 4]
12345const nummern = [1, 2, 3, 4, 5]; Const Evenybers = Zahlen.filter (num => num % 2 === 0); Konsole.log (ausgeglichen); // [2, 4]

In diesem Beispiel verwenden wir eine Pfeilfunktion, um das Nummernarray zu filtern und nur die gleichmäßigen Zahlen zurückzugeben. Die Pfeilfunktionssyntax ist kürzer und prägnanter als die herkömmliche Funktionssyntax.

Abschluss

Zusammenfassend sind diese 15 erweiterten JavaScript -Techniken für jeden Entwickler von wesentlicher Bedeutung, der seine Fähigkeiten auf die nächste Ebene bringen möchte. Egal, ob Sie an einem kleinen Projekt oder einer großen Anwendung arbeiten, diese Techniken können Ihnen helfen, effizientere und wartbare Code zu schreiben. Beginnen Sie also mit dem Üben und sehen Sie, wie diese Techniken Ihnen helfen können, Ihre JavaScript -Fähigkeiten auf die nächste Stufe zu bringen!