Als ich anfing, JavaScript zu lernen, war das erste, was ich tat, eine Liste mit Tricks zu erstellen, die mir halfen, Zeit zu sparen. Ich habe sie von anderen Programmierern, auf verschiedenen Websites und in Handbüchern entdeckt.
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.
Erinnerung: für alle Leser von „Habr“ – ein Rabatt von 10 Rubel bei der Anmeldung zu einem beliebigen Skillbox-Kurs mit dem Aktionscode „Habr“.
Skillbox empfiehlt: Praktischer Kurs .
Eindeutige Werte filtern
ARRAYS
Der Set-Objekttyp wurde in ES6 zusammen mit dem ..., Spread-Operator eingeführt. Wir können ihn verwenden, um ein neues Array zu erstellen, das nur eindeutige Werte enthält.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]In einer normalen Situation ist viel mehr Code erforderlich, um denselben Vorgang auszuführen.
Diese Technik funktioniert für Arrays, die primitive Typen enthalten: undefiniert, null, boolesch, Zeichenfolge und Zahl. Wenn Sie mit einem Array arbeiten, das Objekte, Funktionen oder zusätzliche Arrays enthält, benötigen Sie einen anderen Ansatz.
Länge des Cache-Arrays in Zyklen
FAHRRÄDER
Wenn Sie for-Schleifen lernen, folgen Sie dem Standardverfahren:
for (let i = 0; i < array.length; i++){
console.log(i);
}Bei dieser Syntax überprüft die for-Schleife jedoch bei jeder Iteration wiederholt die Länge des Arrays.
Manchmal kann dies nützlich sein, aber in den meisten Fällen ist es effizienter, die Länge des Arrays zwischenzuspeichern, was einen einmaligen Zugriff darauf erfordert. Wir können dies tun, indem wir eine Längenvariable definieren, in der wir die Variable i definieren, etwa so:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}Im Prinzip fast das Gleiche wie oben, aber durch die Vergrößerung der Schleifengröße erzielen wir eine erhebliche Zeitersparnis.
Kurzschlussfestigkeit (McCarthy-Bewertung)
BEDINGTE OPERATIONEN
Der ternäre Operator ist eine schnelle und effiziente Möglichkeit, einfache (und manchmal nicht so einfache) bedingte Anweisungen zu schreiben:
x> 100? „mehr als 100“: „weniger als 100“;
x> 100? (x>200? „mehr als 200“: „zwischen 100-200“): „weniger als 100“;
Aber manchmal ist sogar der ternäre Operator komplizierter als erforderlich. Wir können stattdessen 'and' && und 'or' verwenden || Boolesche Operatoren, um bestimmte Ausdrücke noch prägnanter auszuwerten. Es wird oft als „Kurzschluss“ oder „Kurzschlussfestigkeit“ bezeichnet.
Wie funktioniert das
Nehmen wir an, wir möchten nur eine von zwei oder mehr Bedingungen zurückgeben.
Die Verwendung von && gibt den ersten falschen Wert zurück. Wenn jeder Operand als wahr ausgewertet wird, wird der zuletzt ausgewertete Ausdruck zurückgegeben.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Verwenden von || gibt den ersten wahren Wert zurück. Wenn jeder Operand als falsch ausgewertet wird, wird der zuletzt ausgewertete Wert zurückgegeben.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullBeispiel 1
Nehmen wir an, 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 der richtige Typ ist, aber diese Methode ist möglicherweise zu lang. Daher ist es besser, unseren „Kurzschluss“ zu nehmen.
return (foo || []).length;Wenn die Variable foo eine passende Länge hat, wird diese zurückgegeben. Sonst erhalten wir 0.
Beispiel 2
Hatten Sie Probleme beim Zugriff auf ein verschachteltes Objekt? Möglicherweise wissen Sie nicht, ob ein Objekt oder eine seiner Untereigenschaften existiert, was zu Problemen führen kann.
Wir wollten beispielsweise auf die Dateneigenschaft in this.state zugreifen, aber die Daten werden erst definiert, wenn unser Programm eine Abrufanforderung zurückgibt.
Je nachdem, wo wir es verwenden, kann der Aufruf von this.state.data den Start der Anwendung verhindern. Um das Problem zu lösen, könnten wir dies in einen bedingten Ausdruck verpacken:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Eine bessere Option wäre die Verwendung des „oder“-Operators.
return (this.state.data || 'Fetching Data');Wir können den obigen Code nicht ändern, um && zu verwenden. Der Operator „Fetching Data“ && this.state.data gibt this.state.data zurück, unabhängig davon, ob es undefiniert ist oder nicht.
Optionale Kette
Man könnte die Verwendung einer optionalen Verkettung vorschlagen, wenn versucht wird, eine Eigenschaft tief in einer Baumstruktur zurückzugeben. Also, das Fragezeichen-Symbol? kann nur zum Abrufen einer Eigenschaft verwendet werden, wenn sie nicht null ist.
Beispielsweise könnten wir das obige Beispiel umgestalten, um this.state.data?..() zu erhalten. Das heißt, Daten werden nur zurückgegeben, wenn der Wert nicht null ist.
Wenn es darauf ankommt, ob der Status definiert ist oder nicht, könnten wir auch this.state?.data zurückgeben.
In Boolean konvertieren
TYPKONVERTIERUNG
Neben den normalen booleschen Funktionen wahr und falsch behandelt JavaScript auch alle anderen Werte als wahr oder falsch.
Sofern nicht anders angegeben, sind alle Werte in JavaScript wahr, außer 0, „“, null, undefiniert, NaN und natürlich falsch. Letztere sind falsch.
Wir können problemlos zwischen den beiden wechseln, indem wir den Operator ! verwenden, der auch den Typ in einen booleschen Wert umwandelt.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"In String konvertieren
TYPKONVERTIERUNG
Eine schnelle Konvertierung von einer Ganzzahl in eine Zeichenfolge kann wie folgt erfolgen.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"In Ganzzahl umwandeln
TYPKONVERTIERUNG
Wir führen die Rücktransformation wie folgt durch.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Diese Methode kann auch verwendet werden, um den booleschen Datentyp in reguläre numerische Werte umzuwandeln, wie unten gezeigt:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Es kann Situationen geben, in denen + als Verkettungsoperator und nicht als Additionsoperator interpretiert wird. Um dies zu vermeiden, sollten Sie Tilden verwenden: ~~. Dieser Operator entspricht -n-1. Beispielsweise ist ~15 gleich -16.
Die Verwendung von zwei Tilden hintereinander negiert die Operation, da - (- - n - 1) - 1 = n + 1 - 1 = n. Mit anderen Worten: ~-16 entspricht 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
BETRIEB
Ab ES7 können Sie den Potenzierungsoperator ** als Abkürzung für Potenzen verwenden. Dies ist viel schneller als die Verwendung von Math.pow(2, 3). Es scheint einfach, aber dieser Punkt ist in der Liste der Techniken enthalten, da er nicht überall erwähnt wird.
console.log(2 ** 3); // Result: 8Es sollte nicht mit dem ^-Symbol verwechselt werden, das üblicherweise zur Potenzierung verwendet wird. Aber in JavaScript ist dies der XOR-Operator.
Vor ES7 konnte die **-Verknüpfung nur für Potenzen der Basis 2 unter Verwendung des bitweisen Linksverschiebungsoperators << verwendet werden:
Math.pow(2, n);
2 << (n - 1);
2**n;Beispielsweise entspricht 2 << 3 = 16 2 ** 4 = 16.
Float zu Ganzzahl
OPERATIONEN / TYPENKONVERTIERUNG
Wenn Sie eine Gleitkommazahl in eine Ganzzahl umwandeln müssen, können Sie Math.floor(), Math.ceil() oder Math.round() verwenden. Aber es gibt einen schnelleren Weg, dafür verwenden wir |, also den OR-Operator.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Verhalten | hängt weitgehend davon ab, ob Sie es mit positiven oder negativen Zahlen zu tun haben. Daher ist diese Methode nur geeignet, wenn Sie sich in dem, was Sie tun, sicher sind.
n | 0 entfernt alles nach dem Dezimaltrennzeichen und kürzt den Gleitkommawert auf eine Ganzzahl.
Den gleichen Rundungseffekt können Sie mit ~~ erzielen. Nach der erzwungenen Konvertierung in eine Ganzzahl bleibt der Wert unverändert.
Nachgestellte Zahlen entfernen
Mit dem OR-Operator können beliebig viele Ziffern aus einer Zahl entfernt werden. Das bedeutet, dass wir keine Typen wie hier konvertieren müssen:
let str = "1553";
Number(str.substring(0, str.length - 1));Stattdessen schreiben wir einfach:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatische Verlinkung
KLASSEN
ES6-Pfeilnotationen können in Klassenmethoden verwendet werden, und die Bindung ist impliziert. Das bedeutet, dass Sie sich von sich wiederholenden Ausdrücken wie this.myMethod = this.myMethod.bind(this) verabschieden können!
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};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); // Result: [0, 1, 2, 3]Aber es gibt eine andere Methode, und zwar eine schnellere. Wenn Ihnen Geschwindigkeit wichtig ist, finden Sie hier unsere Tipps:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]Drucken der letzten Werte eines Arrays
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)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]JSON-Code formatieren
JSON
Möglicherweise haben Sie JSON.stringify bereits verwendet. Wussten Sie, dass es bei der Formatierung Ihres JSON hilft?
Die stringify()-Methode benötigt zwei optionale Parameter: eine Ersetzungsfunktion, mit der das angezeigte JSON gefiltert werden kann, und einen Leerzeichenwert.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Das ist alles, ich hoffe, dass alle diese Techniken nützlich waren. Welche Tricks kennen Sie? Schreib sie in die Kommentare.
Skillbox empfiehlt:
- Zweijähriges Praktikum .
- Online Kurs .
- Praktisches Jahr .
Source: habr.com