Diese JavaScript-Methoden verbessern Ihre Fähigkeiten in nur wenigen Minuten

Die meisten Anwendungen, die wir heute erstellen, erfordern eine Änderung der Datenerfassung. Das Verarbeiten von Elementen in einer Sammlung ist eine häufige Operation, auf die Sie höchstwahrscheinlich stoßen werden. Vergessen Sie die konventionelle Vorgehensweise for-loopwie (let i=0; i < value.length; i++).

Schnelles Heads-up mit constIn for-loopgibt Ihnen einen Fehler. Grund dafür ist, dass der Wert bei jeder Ausführung neu deklariert wird und daher von igeändert wird i++. Wenn Sie also daran denken, entweder constoder zu verwenden let, fragen Sie sich: Wird dieser Wert erneut deklariert? Wenn die Antwort ja ist , gehen Sie für letund wenn nein , gehen Sie für const. Mehr Info.

Angenommen, Sie möchten eine Produktliste anzeigen und eine Sammlung kategorisieren, filtern, suchen, ändern oder aktualisieren. Oder vielleicht möchten Sie schnelle Berechnungen wie Summe, Multiplikation usw. durchführen. Was ist der optimale Weg, um dies zu erreichen?

Vielleicht magst du keine Pfeilfunktionen , möchtest nicht zu viel Zeit damit verbringen, etwas Neues zu lernen, oder sie sind einfach nicht relevant für dich. Mach dir keine Sorgen, du bist nicht allein. Ich zeige Ihnen, wie es in ES5 (Funktionsverzögerung) und ES6 (Pfeilfunktionen) gemacht wird.

Beachten Sie: Pfeilfunktionen und Funktionsdeklarationen / -ausdrücke sind nicht gleichwertig und können nicht blind ersetzt werden. Beachten Sie, dass das thisSchlüsselwort zwischen beiden unterschiedlich funktioniert.

Die Methoden, die wir uns ansehen werden:

  1. Spread-Operator
  2. für ... des Iterators
  3. beinhaltet ()
  4. etwas()
  5. jeder()
  6. Filter()
  7. Karte()
  8. reduzieren()
Wenn Sie ein besserer Webentwickler werden, ein eigenes Unternehmen gründen, andere unterrichten oder Ihre Entwicklungsfähigkeiten verbessern möchten, werde ich wöchentlich Tipps und Tricks zu den neuesten Webentwicklungssprachen veröffentlichen.

1. Spread-Operator

Der Spread-Operator erweitert ein Array in seine Elemente. Es kann auch für Objektliterale verwendet werden.

Warum sollte ich es benutzen?

  • Es ist eine einfache und schnelle Möglichkeit, die Elemente eines Arrays anzuzeigen
  • Es funktioniert für Arrays und Objektliterale
  • Es ist eine schnelle und intuitive Möglichkeit, Argumente zu übergeben
  • Es sind nur drei Punkte erforderlich…

Beispiel:

Angenommen, Sie möchten eine Liste der Lieblingsspeisen anzeigen, ohne eine Schleifenfunktion zu erstellen. Verwenden Sie einen Spread-Operator wie folgt:

2. für… des Iterators

Die for...ofAnweisung durchläuft / durchläuft die Auflistung und bietet Ihnen die Möglichkeit, bestimmte Elemente zu ändern. Es ersetzt die herkömmliche Vorgehensweise a for-loop.

Warum sollte ich es benutzen?

  • Es ist eine einfache Möglichkeit, ein Element hinzuzufügen oder zu aktualisieren
  • Berechnungen durchführen (Summe, Multiplikation usw.)
  • Bei Verwendung von bedingten Anweisungen (if, while, switch usw.)
  • Führt zu sauberem und lesbarem Code

Beispiel:

Angenommen, Sie haben eine Toolbox und möchten alle darin enthaltenen Tools anzeigen. Der for...ofIterator macht es einfach.

3. Beinhaltet die Methode ()

Die includes()Methode wird verwendet, um zu überprüfen, ob eine bestimmte Zeichenfolge in einer Sammlung vorhanden ist, und gibt trueoder zurück false. Beachten Sie, dass zwischen Groß- und Kleinschreibung unterschieden wird: Wenn sich das Element in der Sammlung befindet SCHOOLund Sie danach suchen school, wird es zurückgegeben false.

Warum sollte ich es benutzen?

  • Einfache Suchfunktionen erstellen
  • Es ist ein intuitiver Ansatz, um festzustellen, ob eine Zeichenfolge vorhanden ist
  • Es verwendet bedingte Anweisungen zum Ändern, Filtern usw.
  • Führt zu lesbarem Code

Beispiel:

Nehmen wir an, Sie wissen aus irgendeinem Grund nicht, welche Autos Sie in Ihrer Garage haben, und Sie benötigen ein System, um zu überprüfen, ob das gewünschte Auto vorhanden ist oder nicht. includes()zur Rettung!

4. Einige () Methode

Die some()Methode prüft, ob einige Elemente in einem Array vorhanden sind, und gibt trueoder zurück false. Dies ähnelt etwas dem Konzept der includes()Methode, außer dass das Argument eine Funktion und keine Zeichenfolge ist.

Warum sollte ich es benutzen?

  • Es stellt sicher, dass ein Element den Test besteht
  • Es führt bedingte Anweisungen mit Funktionen aus
  • Machen Sie Ihren Code deklarativ
  • Einige sind gut genug

Beispiel:

Angenommen, Sie sind Clubbesitzer und es ist Ihnen egal, wer den Club betritt. Aber einige sind nicht erlaubt, weil sie zu viel getrunken haben (meine Kreativität von ihrer besten Seite). Überprüfen Sie die Unterschiede zwischen ES5 und ES6 unten:

ES5:

ES6:

5. Jede () Methode

Die every()Methode durchläuft das Array und überprüft alleArtikel und gibt trueoder zurück false. Gleiches Konzept wie some(). Sofern nicht jedes Element die bedingte Anweisung erfüllen muss, wird es zurückgegeben false.

Warum sollte ich es benutzen?

  • Es stellt sicher, dass jeder Gegenstand den Test besteht
  • Sie können bedingte Anweisungen mit Funktionen ausführen
  • Machen Sie Ihren Code deklarativ

Beispiel:

Als Sie some()minderjährigen Schülern das letzte Mal erlaubt haben, den Club zu betreten, hat dies jemand gemeldet und die Polizei hat Sie gefasst. Diesmal lassen Sie das nicht zu und stellen sicher, dass jeder mit dem every()Bediener die Altersgrenze überschreitet .

ES5

ES6

6. Filter () -Methode

Die filter()Methode erstellt ein neues Array mit allen Elementen, die den Test bestehen.

Warum sollte ich es benutzen?

  • So können Sie vermeiden, das Hauptarray zu ändern
  • Hiermit können Sie nicht benötigte Elemente herausfiltern
  • Bietet Ihnen besser lesbaren Code

Beispiel:

Angenommen, Sie möchten nur Preise zurückgeben, die über oder gleich 30 liegen. Filtern Sie alle anderen Preise heraus.

ES5

ES6

7. Map () -Methode

Die map()Methode ähnelt der filter()Methode hinsichtlich der Rückgabe eines neuen Arrays. Der einzige Unterschied besteht jedoch darin, dass damit Elemente geändert werden.

Warum sollte ich es benutzen?

  • Auf diese Weise können Sie Änderungen am Hauptarray vermeiden
  • Sie können die gewünschten Elemente ändern
  • Bietet Ihnen besser lesbaren Code

Beispiel:

Angenommen, Sie haben eine Liste mit Produkten mit Preisen. Ihr Manager benötigt eine Liste, um die neuen Preise anzuzeigen, nachdem sie mit 25% besteuert wurden. Die map()Methode kann Ihnen helfen.

ES5

ES6

8. Reduce () -Methode

Die reduce()Methode kann verwendet werden, um ein Array in etwas anderes umzuwandeln, das eine Ganzzahl, ein Objekt, eine Kette von Versprechungen (sequentielle Ausführung von Versprechungen) usw. sein kann. Aus praktischen Gründen wäre ein einfacher Anwendungsfall, eine Liste von Ganzzahlen zu summieren . Kurz gesagt, es "reduziert" das gesamte Array auf einen Wert.

Warum sollte ich es benutzen?

  • Berechnungen durchführen
  • Berechnen Sie einen Wert
  • Duplikate zählen
  • Gruppieren Sie Objekte nach Eigenschaften
  • Versprechen nacheinander ausführen
  • Es ist eine schnelle Möglichkeit, Berechnungen durchzuführen

Beispiel:

Angenommen, Sie möchten Ihre Gesamtkosten für eine Woche ermitteln. Verwenden Sie reduce(), um diesen Wert zu erhalten.

ES5

ES6

Sie finden mich in den Developer News, wo ich jede Woche veröffentliche. Oder Sie können mir auf Twitter folgen, wo ich relevante Tipps und Tricks für die Webentwicklung veröffentliche.