Als ich anfing, JavaScript zu lernen, machte ich als erstes eine Liste mit Tricks, mit denen ich Zeit sparen konnte. Ich habe sie auf anderen Programmierern, auf verschiedenen Websites und in Handbüchern ausspioniert.
In diesem Artikel zeige ich Ihnen 12 großartige Möglichkeiten, Ihren JavaScript-Code zu verbessern und zu beschleunigen. In den meisten Fällen sind sie universell.
Wir erinnern Sie daran: Für alle Leser von „Habr“ - ein Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs mit dem Promo-Code „Habr“.
Skillbox empfiehlt: Praktikum "Mobile Developer PRO" .
Einzigartige Wertefilterung
ARRAYS
Der Typ des Set-Objekts wurde in ES6 zusammen mit ..., dem Spread-Operator, eingeführt. Wir können damit ein neues Array erstellen, das nur eindeutige Werte enthält.
const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray);
In einer normalen Situation wird viel mehr Code benötigt, um dieselbe Operation auszuführen.
Dieser Trick funktioniert für Arrays mit primitiven Typen: undefined, null, boolean, string und number. Wenn Sie mit einem Array arbeiten, das Objekte, Funktionen oder zusätzliche Arrays enthält, benötigen Sie einen anderen Ansatz.
Die Länge des Caches in Zyklen
ZYKLEN
Wenn Sie for for-Schleifen lernen, befolgen Sie das Standardverfahren:
for (let i = 0; i < array.length; i++){ console.log(i); }
Mit dieser Syntax überprüft die for-Schleife jedoch die Länge des Arrays bei jeder Iteration erneut.
Dies kann manchmal nützlich sein, aber in den meisten Fällen ist es effizienter, die Länge des Arrays zwischenzuspeichern, was einen einzelnen Zugriff darauf erfordert. Wir können dies tun, indem wir eine variable Länge definieren, in der die Variable i beispielsweise wie folgt festgelegt wird:
for (let i = 0, length = array.length; i < length; i++){ console.log(i); }
Im Prinzip ist es fast dasselbe wie oben, aber mit einer Vergrößerung des Zyklus erhalten wir erhebliche Zeiteinsparungen.
Kurzschlussbewertung (McCarthy-Bewertung)
BEDINGTE BETREIBER
Der ternäre Operator ist eine schnelle und effiziente Möglichkeit, einfache (und manchmal nicht sehr einfache) bedingte Anweisungen zu schreiben:
x> 100? "Größer als 100": "kleiner als 100";
x> 100? (x> 200? "mehr als 200": "zwischen 100-200"): "weniger als 100";
Aber manchmal ist sogar ein ternärer Operator komplizierter als erforderlich. Stattdessen können wir 'und' && und 'oder' || verwenden logische Operatoren, um einige Ausdrücke noch präziser auszuwerten. Es wird oft als "Kurzschluss" oder "Kurzschlussbewertung" bezeichnet.
Wie funktioniert es?Angenommen, wir möchten nur eine von zwei oder mehr Bedingungen zurückgeben.
Wenn Sie && verwenden, wird der erste falsche Wert zurückgegeben. Wenn jeder Operand den Wert true hat, wird der zuletzt ausgewertete Ausdruck zurückgegeben.
let one = 1, two = 2, three = 3; console.log(one && two && three);
Verwenden von || gibt den ersten wahren Wert zurück. Wenn jeder Operand den Wert false hat, wird der zuletzt berechnete Wert zurückgegeben.
let one = 1, two = 2, three = 3; console.log(one || two || three);
Beispiel 1Angenommen, wir möchten die Länge einer Variablen zurückgeben, kennen aber ihren Typ nicht.
In diesem Fall können Sie if / else verwenden, um zu überprüfen, ob foo ein geeigneter Typ ist. Diese Methode ist jedoch möglicherweise zu lang. Daher ist es besser, unseren "Kurzschluss" zu nehmen.
return (foo || []).length;
Wenn die Variable foo eine geeignete Länge hat, wird sie zurückgegeben. Ansonsten bekommen wir 0.
Beispiel 2Haben Sie Probleme beim Zugriff auf ein verschachteltes Objekt? Möglicherweise wissen Sie nicht, ob ein Objekt oder eine seiner Untereigenschaften vorhanden ist, und dies kann zu Problemen führen.
Zum Beispiel wollten wir auf die data-Eigenschaft in this.state zugreifen, aber Daten werden erst definiert, wenn unser Programm eine Abfrage für die Auswahl zurückgibt.
Je nachdem, wo wir es verwenden, kann ein Aufruf von this.state.data den Start der Anwendung verhindern. Um das Problem zu lösen, könnten wir dies in einen bedingten Ausdruck einschließen:
if (this.state.data) { return this.state.data; } else { return 'Fetching Data'; }
Eine geeignetere Option wäre die Verwendung des Operators "oder".
return (this.state.data || 'Fetching Data');
Wir können den obigen Code nicht ändern, um && zu verwenden. Die Anweisung 'Daten abrufen' && this.state.data gibt this.state.data zurück, unabhängig davon, ob sie undefiniert ist oder nicht.
Optionale KetteSie können die Verwendung der optionalen Kette vorschlagen, wenn Sie versuchen, eine Eigenschaft tief in eine Baumstruktur zurückzugeben. Also ein Fragezeichen? kann nur zum Abrufen einer Eigenschaft verwendet werden, wenn sie nicht null ist.
Zum Beispiel könnten wir das obige Beispiel umgestalten, indem wir this.state.data? .. () abrufen. Das heißt, Daten werden nur zurückgegeben, wenn der Wert nicht null ist.
Wenn es wichtig ist, ob der Status definiert ist oder nicht, können wir diesen Status zurückgeben.
In Boolesch konvertieren
TYPENKONVERTIERUNG
Neben den üblichen logischen Funktionen true und false behandelt JavaScript auch alle anderen Werte als wahr oder falsch.
Sofern nicht anders angegeben, sind alle Werte in JavaScript wahr, mit Ausnahme von 0, "", null, undefiniert, NaN und natürlich false. Letztere sind falsch.
Mit dem Operator! Können wir problemlos zwischen beiden wechseln, wodurch auch der Typ in logisch konvertiert wird.
const isTrue = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue);
In String konvertieren
TYPENKONVERTIERUNG
Eine schnelle Konvertierung einer Ganzzahl in eine Zeichenfolge kann wie folgt erfolgen.
const val = 1 + ""; console.log(val);
Konvertierung in eine Ganzzahl
TYPENKONVERTIERUNG
Wir führen die inverse Transformation wie folgt durch.
let int = "15"; int = +int; console.log(int);
Diese Methode kann auch verwendet werden, um den booleschen booleschen Datentyp in reguläre numerische Werte zu konvertieren, wie unten gezeigt:
console.log(+true);
Es kann Situationen geben, in denen + eher als Verkettungsoperator als als Addition interpretiert wird. Um dies zu vermeiden, verwenden Sie Tildes: ~~. Dieser Operator entspricht dem Ausdruck -n-1. Zum Beispiel ist ~ 15 -16.
Die Verwendung von zwei Tildes hintereinander negiert die Operation, da - (- - n - 1) - 1 = n + 1 - 1 = n. Mit anderen Worten ist ~ -16 15.
const int = ~~"15" console.log(int);
<Schnelle Kräfte
BETRIEB
Ab ES7 können Sie den Exponentiationsoperator ** als Abkürzung für Grad verwenden. Dies ist viel schneller als mit Math.pow (2, 3). Es scheint einfach, aber dieser Moment ist in der Liste der Empfänge enthalten, da er nicht überall erwähnt wird.
console.log(2 ** 3);
Verwechseln Sie es nicht mit dem Symbol ^, das normalerweise zur Potenzierung verwendet wird. In JavaScript ist dies jedoch der XOR-Operator.
Vor ES7 konnte die Abkürzung ** nur für Grad mit Basis 2 mit dem bitweisen Linksverschiebungsoperator << angewendet werden:
Math.pow(2, n); 2 << (n - 1); 2**n;
Zum Beispiel entspricht 2 << 3 = 16 dem Ausdruck 2 ** 4 = 16.
Float Integer
BETRIEB / TRANSFORMIERUNGSTYPEN
Wenn Sie einen Float in eine Ganzzahl konvertieren müssen, können Sie Math.floor (), Math.ceil () oder Math.round () verwenden. Es gibt jedoch einen schnelleren Weg, dafür verwenden wir |, dh den OR-Operator.
console.log(23.9 | 0);
Verhalten | hängt weitgehend davon ab, ob es sich um positive oder negative Zahlen handelt. Daher ist diese Methode nur geeignet, wenn Sie sicher sind, was Sie tun.
n | 0 entfernt alles nach dem Dezimaltrennzeichen und schneidet die Gleitkommazahl auf eine Ganzzahl ab.
Sie können den gleichen Rundungseffekt mit ~~ erzielen. Nach der erzwungenen Konvertierung in eine Ganzzahl bleibt der Wert unverändert.
Wir entfernen die nachgestellten ZahlenDer OR-Operator kann verwendet werden, um eine beliebige Anzahl von Ziffern aus einer Zahl zu entfernen. Dies bedeutet, dass wir keine Typen konvertieren müssen, wie hier:
let str = "1553"; Number(str.substring(0, str.length - 1));
Stattdessen schreiben wir einfach:
console.log(1553 / 10 | 0)
Auto Link
KLASSEN
ES6-Pfeilspitzen können in Klassenmethoden verwendet werden, und die Bindung ist impliziert. Dank dessen können Sie sich von doppelten Ausdrücken wie this.myMethod = this.myMethod.bind (this) verabschieden!
import React, { Component } from React; export default class App extends Compononent { constructor(props) { super(props); this.state = {}; } myMethod = () => {
Array-Trimmen
ARRAYS
Wenn Sie Werte aus einem Array entfernen müssen, gibt es schnellere Methoden als splice ().
Wenn Sie beispielsweise die Größe des ursprünglichen Arrays kennen, können Sie dessen Längeneigenschaft wie folgt überschreiben:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array);
Aber es gibt eine andere Methode und zwar schneller. Wenn Ihnen Geschwindigkeit wichtig ist, haben Sie folgende Wahl:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array);
Letzte Array-Werte ausgeben
ARRAYS
Diese Technik erfordert die Verwendung der Slice () -Methode.
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1));
JSON-Code-Formatierung
Json
Möglicherweise haben Sie JSON.stringify bereits verwendet. Wissen Sie, dass es beim Formatieren Ihres JSON hilft?
Die stringify () -Methode akzeptiert zwei optionale Parameter: die Ersetzungsfunktion, mit der der angezeigte JSON gefiltert werden kann, und den Wertebereich.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
Das ist alles, ich hoffe, dass all diese Tricks nützlich waren. Und welche Tricks kennst du? Schreiben Sie sie in die Kommentare.
Skillbox empfiehlt: