16 JavaScript-Tricks, die Sie 2021 kennen sollten

Blog

16 JavaScript-Tricks, die Sie 2021 kennen sollten

Als ich anfing, JavaScript zu lernen, habe ich eine Liste mit allen zeitsparenden Tricks erstellt, die ich im Code anderer Leute, auf Code-Challenge-Websites und überall gefunden habe außer die Tutorials, die ich verwendet habe.



Jeder dieser Tricks erfüllt Aufgaben, die die meisten Entwickler täglich ausführen müssen. Abhängig von Ihrer Erfahrung kennen Sie vielleicht einige dieser Tricks bereits, während andere Sie umhauen werden.

In diesem Artikel gehen wir eine Liste von Tricks durch, die Sie zu einem besseren Entwickler machen und Ihre JavaScript-Fähigkeiten verbessern.



1. Einzigartige Werte filtern

Die |_+_| Der Objekttyp wurde in ES6 eingeführt und zusammen mit |_+_|, dem ‚Spread‘-Operator, können wir ihn verwenden, um ein neues Array mit . zu erstellen nur die einzigartigen Werte.

was ist ogn crypto
Set

Vor ES6 würde das Isolieren eindeutiger Werte viel mehr Code erfordern!



Dieser Trick funktioniert für Arrays mit primitiven Typen: |_+_|, |_+_|, |_+_|, |_+_| und |_+_| . (Wenn Sie ein Array mit Objekten, Funktionen oder zusätzlichen Arrays hätten, benötigen Sie einen anderen Ansatz!)

2. Jeder und einige

Die jeden und etwas Funktionen sind Funktionen, mit denen nicht alle Entwickler vertraut sind. Sie können jedoch in bestimmten Situationen sehr nützlich sein. Beginnen wir mit dem jeden Funktion. Sie können diese Funktion verwenden, wenn Sie wissen möchten, ob alle Elemente eines Arrays einen bestimmten Test bestehen. Im Wesentlichen geht dies darin, jedes Element des Arrays durchzugehen und zu überprüfen, ob sie alle wahr sind.

Dies mag für Sie etwas abstrakt klingen, also schauen wir uns das folgende Beispiel an. Es ist nicht so komplex, wie es klingt.

...

Die jeden Funktion gibt einen booleschen Wert zurück. Wenn alle Elemente im Array den Test bestehen, wahr Wird zurückgegeben. Wenn eines der Elemente im Array den Test nicht besteht, falsch Wird zurückgegeben.

Sie können auch eine anonyme Funktion als Testfunktion verwenden, wenn Sie möchten:

const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // Result: [1, 2, 3, 5]

Die etwas Funktion funktioniert fast genauso wie die jeden Funktion. Es gibt nur einen großen Unterschied: die etwas Funktion testet, ob mindestens ein Element im Array den implementierten Test besteht.

Wenn wir uns das vorherige Beispiel ansehen und die etwas Funktion statt jeden Funktion beide Arrays zurückgeben wahr , da beide Arrays eine positive Zahl enthalten.

undefined

3. Kurzschlussauswertung

Der ternäre Operator ist eine schnelle Möglichkeit, einfache (und manchmal nicht so einfache) bedingte Anweisungen wie diese zu schreiben:

null

Aber manchmal ist sogar der ternäre Operator komplizierter als nötig. Stattdessen können wir das ‚und‘ |_+_| . verwenden und ‚oder‘ |_+_| logische Operatoren, um bestimmte Ausdrücke noch präziser auszuwerten. Dies wird oft als „Kurzschluss“ oder „Kurzschlussauswertung“ bezeichnet.

Wie es funktioniert

Nehmen wir an, wir möchten nur eine von zwei oder mehr Optionen zurückgeben.

Verwenden von |_+_| gibt das erste |_+_| . zurück oder „falscher“ Wert. Wenn jeder Operand zu |_+_| . ausgewertet wird , wird der zuletzt ausgewertete Ausdruck zurückgegeben.

boolean

Verwenden von |_+_| gibt das erste |_+_| . zurück oder „wahrer“ Wert. Wenn jeder Operand zu |_+_| . ausgewertet wird , wird der zuletzt ausgewertete Ausdruck zurückgegeben.

string

Beispiel 1

Nehmen wir an, wir möchten das |_+_| . zurückgeben einer Variablen, aber wir kennen den Variablentyp nicht.

Wir könnten ein |_+_| . gebrauchen Anweisung, um zu überprüfen, ob |_+_| ist ein akzeptabler Typ, aber das könnte ziemlich langatmig werden. Die Kurzschlussauswertung ermöglicht uns stattdessen Folgendes:

number

Wenn die Variable |_+_| wahr ist, wird es zurückgegeben. Andernfalls wird die |_+_| des leeren Arrays wird zurückgegeben: |_+_| .

Beispiel 2

Hatten Sie jemals Probleme beim Zugriff auf eine verschachtelte Objekteigenschaft? Sie wissen möglicherweise nicht, ob das Objekt oder eine der Untereigenschaften vorhanden ist, und dies kann zu frustrierenden Fehlern führen.

Nehmen wir an, wir wollten auf eine Eigenschaft namens |_+_| . zugreifen innerhalb von |_+_| , aber |_+_| ist undefiniert, bis unser Programm erfolgreich eine Abrufanforderung zurückgegeben hat.

Je nachdem, wo wir es verwenden, rufen wir |_+_| . auf könnte die Ausführung unserer App verhindern. Um dies zu umgehen, könnten wir es in eine Bedingung einschließen:

const random_numbers = [ 13, 2, 37, 18, 5 ] const more_random_numbers = [ 0, -1, 30, 22 ] const isPositive = (number) => { return number > 0 } random_numbers.every(isPositive); // returns true more_random_numbers.every(isPositive); // returns false

Aber das scheint sich ziemlich zu wiederholen. Der Operator „oder“ bietet eine prägnantere Lösung:

random_numbers.every((number) => { return number > 0 })

Wir können den obigen Code nicht umgestalten, um |_+_| . zu verwenden . Die Aussage |_+_| wird |_+_| . zurückgeben ob es |_+_| . ist oder nicht. Dies liegt daran, dass |_+_| ist ‚wahr‘, und so ist die |_+_| wird es immer übergehen, wenn es zuerst aufgeführt wird.

Eine neue vorgeschlagene Funktion: Optionale Verkettung

Derzeit gibt es einen Vorschlag, eine „optionale Verkettung“ zuzulassen, wenn versucht wird, eine Eigenschaft tief in einer baumartigen Struktur zurückzugeben. Unter dem Vorschlag ist das Fragezeichensymbol |_+_| könnte verwendet werden, um eine Eigenschaft zu extrahieren nur wenn nicht |_+_| .

Zum Beispiel könnten wir unser obiges Beispiel in |_+_| . umgestalten , also nur |_+_| . zurückgeben wenn nicht |_+_| .

Oder, wenn es uns hauptsächlich darum ging, ob |_+_| definiert wurde oder nicht, wir könnten |_+_| . zurückgeben .

4. In Boolean umwandeln

Neben den regulären booleschen Werten |_+_| und |_+_| , behandelt JavaScript auch alle anderen Werte entweder als „truthy“ oder „falsy“.

Sofern nicht anders definiert, sind alle Werte in JavaScript „wahr“ mit Ausnahme von |_+_|, |_+_|, |_+_|, |_+_|, |_+_| und natürlich |_+_| , die „falsch“ sind.

Wir können leicht zwischen wahr und falsch wechseln, indem wir den negativen Operator |_+_| . verwenden , wodurch der Typ auch in |_+_| . konvertiert wird .

const random_numbers = [ 13, 2, 37, 18, 5 ] const more_random_numbers = [ 0, -1, 30, 22 ] const isPositive = (number) => { return number > 0 } random_numbers.some(isPositive); // returns true more_random_numbers.some(isPositive); // returns true

Diese Art der Typkonvertierung kann in bedingten Anweisungen praktisch sein, obwohl der einzige Grund für die Definition von |_+_| als |_+_| ist, wenn Sie Code-Golf spielen würden!

5. Bedingtes Setzen einer Variablen

Das bedingte Festlegen einer Variablen ist einfach und lässt Ihren Code eleganter aussehen. Wenn Sie diesen Trick anwenden, müssen Sie keine if-Anweisung schreiben – was persönlich einer meiner Lieblingstricks in JavaScript ist.

Wie kann man also eine Variable bedingt setzen?

x > 100 ? 'Above 100' : 'Below 100'; x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

Im obigen Beispiel prüfen wir, ob der Benutzer eine bevorzugte Zeitzone hat. Wenn der Benutzer eine bevorzugte Zeitzone hat, verwenden wir diese Zeitzone. Wenn der Benutzer keine bevorzugte Zeitzone hat, verwenden wir die Standardzeitzone, die 'America/New_York' ist.

Dieser Code sieht so viel sauberer aus, als wenn Sie eine if-Anweisung verwenden.

&&

Sieht viel sauberer aus, oder?

6. In String umwandeln

Um eine Zahl schnell in eine Zeichenfolge umzuwandeln, können wir den Verkettungsoperator |_+_| . verwenden gefolgt von einem leeren Satz von Anführungszeichen |_+_| .

||

7. In Zahl umwandeln

Das Gegenteil ist mit dem Additionsoperator |_+_| . schnell erreicht .

&&

Dies kann auch verwendet werden, um boolesche Werte in Zahlen umzuwandeln, wie folgt:

false

Es kann Kontexte geben, in denen |_+_| wird als Verkettungsoperator und nicht als Additionsoperator interpretiert. Wenn das passiert (und Sie eine ganze Zahl zurückgeben möchten, keine Gleitkommazahl), können Sie stattdessen zwei Tilden verwenden: |_+_| .

Eine Tilde, bekannt als „bitweiser NOT-Operator“, ist ein Operator, der|_+_| . entspricht . Also zum Beispiel |_+_| ist gleich |_+_| .

Die Verwendung von zwei Tilden hintereinander negiert die Operation effektiv, da |_+_| . Mit anderen Worten, |_+_| gleich |_+_| .

true

Obwohl mir nicht viele Anwendungsfälle einfallen, kann der bitweise NOT-Operator auch auf boolesche Werte verwendet werden: |_+_| und |_+_| .

8. Casting-Werte in Arrays

Manchmal möchten Sie alle Werte in einem Array umwandeln. Eines dieser Vorkommnisse könnte sein, wenn Sie beispielsweise den Triple-Equals-Operator verwenden, um zu überprüfen, ob eine bestimmte Zahl in einem Array vorhanden ist.

Bildschirm-Debug reagieren Testbibliothek

Ich bin kürzlich auf ein Problem gestoßen, bei dem ich eine Mehrfachauswahl hatte. Die HTML-Werte der Auswahloptionen waren Strings anstelle von Integern, was sinnvoll ist. Das Array der ausgewählten Werte sah wie folgt aus:

let one = 1, two = 2, three = 3; console.log(one && two && three); // Result: 3 console.log(0 && null); // Result: 0

Das Problem war, dass ich überprüfte, ob eine bestimmte Ganzzahl im Array der ausgewählten Werte vorhanden war. Ohne Erfolg. Ich habe eine Schnittpunktfunktion verwendet, die den dreifachen Gleichheitsoperator verwendet. Und seit |_+_| Ich musste eine Lösung finden.

Die schönste Lösung war meiner Meinung nach, alle Werte im Array in eine ganze Zahl umzuwandeln. Als ich dies versuchte, stieß ich auf eine schmerzhaft einfache, aber elegante Lösung.

||

Anstatt alle Werte in eine ganze Zahl umzuwandeln, können Sie auch alle Werte im Array in einen booleschen Wert umwandeln, indem Sie einfach das Argument der Kartenfunktion ändern.

true

9. Schnelle Kräfte

Seit ES7 ist es möglich, den Potenzierungsoperator |_+_| als Abkürzung für Potenzen, was schneller ist als das Schreiben von |_+_| . Dies ist eine einfache Sache, aber es macht die Liste aus, weil nicht viele Tutorials aktualisiert wurden, um diesen Operator aufzunehmen!

false

Dies sollte nicht mit dem |_+_| . verwechselt werden Symbol, das häufig zur Darstellung von Exponenten verwendet wird, in JavaScript jedoch der bitweise XOR-Operator ist.

Vor ES7 existierte die Kurzschrift nur für Potenzen mit der Basis 2, wobei der bitweise Linksverschiebungsoperator |_+_| . verwendet wurde :

let one = 1, two = 2, three = 3; console.log(one || two || three); // Result: 1 console.log(0 || null); // Result: null

Zum Beispiel |_+_| entspricht |_+_| .

10. Quick Float zu Integer

Wenn Sie einen Float in eine ganze Zahl umwandeln möchten, können Sie |_+_| . verwenden , |_+_| oder |_+_| . Aber es gibt auch eine schnellere Möglichkeit, einen Float mit |_+_|, dem bitweisen OR-Operator, auf eine ganze Zahl zu kürzen.

length

Das Verhalten von |_+_| hängt davon ab, ob Sie mit positiven oder negativen Zahlen arbeiten, daher ist es am besten, diese Verknüpfung nur zu verwenden, wenn Sie sich sicher sind.

Wenn |_+_| ist positiv, |_+_| rundet effektiv ab. Wenn |_+_| negativ ist, wird effektiv aufgerundet. Genauer gesagt entfernt diese Operation alles, was nach dem Komma kommt, und schneidet eine Gleitkommazahl auf eine ganze Zahl ab.

Sie können den gleichen Rundungseffekt erzielen, indem Sie |_+_| verwenden, wie oben, und tatsächlich irgendein Der bitweise Operator würde eine Gleitkommazahl auf eine ganze Zahl erzwingen. Der Grund, warum diese speziellen Operationen funktionieren, ist, dass der Wert – sobald er zu einer Ganzzahl gezwungen wurde – unverändert bleibt.

Endziffern entfernen

Der bitweise OR-Operator kann auch verwendet werden, um eine beliebige Anzahl von Ziffern vom Ende einer Ganzzahl zu entfernen. Das bedeutet, dass wir keinen Code wie diesen verwenden müssen, um zwischen Typen zu konvertieren:

if/else

Stattdessen erlaubt uns der bitweise OR-Operator zu schreiben:

foo

11. Objektdestrukturierung

Wenn Sie erst einmal über die Destrukturierung von Objekten Bescheid wissen, werden Sie es wahrscheinlich jeden Tag verwenden.

Aber was genau ist Destrukturierung?

Destrukturierung ist ein JavaScript-Ausdruck, mit dem Sie Daten aus Arrays, Objekten, Maps und Sets in eine eigene Variable extrahieren können. Es ermöglicht Ihnen, mehrere Eigenschaften gleichzeitig aus einem Objekt oder Elemente aus einem Array zu extrahieren.

Schauen wir uns das folgende Beispiel an, in dem wir ein Benutzerobjekt haben. Wenn Sie den Benutzernamen in einer Variablen speichern möchten, müssen Sie ihn in einer neuen Zeile einer Variablen zuweisen. Und wenn Sie auch das Geschlecht in einer Variablen speichern möchten, müssen Sie dasselbe erneut tun.

return (foo || []).length;

Mit der Destrukturierung können Sie die Variablen für die Eigenschaften des Objekts mit der folgenden Syntax direkt abrufen:

foo

12. Automatische Bindung in Klassen

Wir können die ES6-Pfeilnotation in Klassenmethoden verwenden, und dadurch wird die Bindung impliziert. Dadurch werden in unserem Klassenkonstruktor oft mehrere Zeilen Code eingespart, und wir können uns von sich wiederholenden Ausdrücken wie |_+_| . glücklich verabschieden !

length

13. Besseres Debuggen mit Leistung

Eines der Dinge, die Sie als Entwickler häufig tun werden, ist das Debuggen. Debuggen ist jedoch mehr als nur das Drucken einer Reihe von Protokollmeldungen in Ihrer Konsole mit Konsole.log .

Wussten Sie, dass das Konsolenobjekt eine hervorragende Möglichkeit bietet, die Leistung von Teilen Ihres Codes zu analysieren? Die meisten Entwickler kennen jedoch nur den Standard Konsole.log Möglichkeit, ihren Code zu debuggen.

Das Konsolenobjekt hat weitaus hilfreichere Funktionen. Es hat ein Zeit und ZeitEnde Funktion, die Ihnen bei der Leistungsanalyse helfen kann. Es funktioniert ganz einfach.

Vor dem Code, den Sie testen möchten, rufen Sie die Konsole.Zeit Funktion. Diese Funktion hat ein Argument, das eine Zeichenfolge akzeptiert, die beschreibt, was Sie analysieren möchten. Am Ende des Codes, den Sie testen möchten, rufen Sie die Konsole.ZeitEnde Funktion. Sie geben dieser Funktion dieselbe Zeichenfolge wie dem ersten Parameter. Sie sehen dann die Zeit, die zum Ausführen des Codes in Ihrer Konsole benötigt wurde.

0

14. Ein Array abschneiden

ARRAYS

Wenn Sie Werte vom Ende eines Arrays destruktiv entfernen möchten, gibt es schnellere Alternativen als die Verwendung von |_+_| .

Wenn Sie beispielsweise die Größe Ihres ursprünglichen Arrays kennen, können Sie seine Längeneigenschaft wie folgt neu definieren:

data

Dies ist eine besonders prägnante Lösung. Ich habe jedoch die Laufzeit des |_+_| . gefunden Methode noch schneller. Wenn Geschwindigkeit Ihr Hauptziel ist, sollten Sie Folgendes in Betracht ziehen:

this.state

15. Holen Sie sich die letzten Elemente in einem Array

ARRAYS

Die Array-Methode |_+_| kann negative Ganzzahlen annehmen, und falls vorhanden, werden Werte vom Ende des Arrays und nicht vom Anfang angenommen.

data

16. JSON-Code formatieren

JSON

Zuletzt haben Sie vielleicht |_+_| . verwendet Aber wussten Sie, dass es auch helfen kann, Ihren JSON für Sie einzurücken?

Die |_+_| Methode nimmt zwei optionale Parameter an: a |_+_| Funktion, mit der Sie das angezeigte JSON filtern können, und ein |_+_| Wert.

Die |_+_| value nimmt eine ganze Zahl für die gewünschte Anzahl von Leerzeichen oder eine Zeichenfolge (z.

this.state.data

Insgesamt hoffe ich, dass Sie diese Tipps genauso nützlich fanden wie ich, als ich sie zum ersten Mal entdeckte.

Haben Sie eigene JavaScript-Tricks? Ich würde sie gerne in den Kommentaren unten lesen!

#javascript #web-entwicklung #programmierung #entwickler