🥇12 JavaScript-Tricks, die in den meisten Tutorials fehlen

Als ich anfing, JavaScript zu lernen, habe ich zunächst eine Liste von Tricks erstellt, die mir halfen, Zeit zu sparen. Ich habe sie von anderen Programmierern, auf verschiedenen Websites und in Handbüchern abgeschaut.

In diesem Artikel zeige ich Ihnen 12 hervorragende Methoden, um Ihren JavaScript-Code zu verbessern und zu beschleunigen. In den meisten Fällen sind sie universell anwendbar.

Wir erinnern daran: alle Leser von „Habr“ erhalten einen Rabatt von 10.000 Rubel bei der Anmeldung zu einem beliebigen Kurs von Skillbox mit dem Aktionscode „Habr“.

Skillbox empfiehlt: Praktischer Kurs „Mobile Entwickler PRO“.

Filtern von einzigartigen Werten

ARRAYS

Der Set-Datentyp wurde in ES6 eingeführt. Zusammen mit dem Spread-Operator können wir ihn verwenden, um ein neues Array zu erstellen, das nur einzigartige Werte enthält.

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

In einer normalen Situation würde man viel mehr Code benötigen, um dieselbe Operation auszuführen.

Dieser Trick funktioniert für Arrays, die primitive Typen enthalten: undefined, null, boolean, string und number. Wenn Sie mit einem Array arbeiten, das Objekte, Funktionen oder weitere Arrays enthält, benötigen Sie einen anderen Ansatz.

Länge des Cache-Arrays in Schleifen

SCHLEIFEN

Wenn Sie for für 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 erneut die Länge des Arrays.

Manchmal kann das nützlich sein, aber in den meisten Fällen ist es effizienter, die Länge des Arrays zwischenzuspeichern, was einen einzigen Zugriff erfordert. Dies können wir erreichen, indem wir eine Variablenlänge definieren, wobei wir die Variable i beispielsweise so festlegen:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Im Prinzip ist es fast dasselbe wie oben, aber mit steigender Schleifenlänge erhalten wir eine signifikante Zeitersparnis.

Auswertung des Short-Circuit (McCarthy-Auswertung)

BEDINGTE OPERATOREN

Der ternäre Operator ist eine schnelle und effektive Methode, um einfache (und manchmal auch nicht so einfache) Bedingungsanweisungen zu formulieren:

x > 100 ? 'mehr als 100' : 'weniger als 100';
x > 100 ? (x > 200 ? 'mehr als 200' : 'zwischen 100 und 200') : 'weniger als 100';

Aber manchmal ist der ternäre Operator komplizierter als nötig. Stattdessen können wir die logischen Operatoren 'and' && und 'or' || verwenden, um einige Ausdrücke noch prägnanter zu bewerten. Dies wird oft als "Short-Circuit" oder "Short-Circuit-Auswertung" bezeichnet.

Wie es funktioniert

Angenommen, 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 bewertet wird, wird der letzte berechnete Ausdruck zurückgegeben.

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

console.log(0 && null); // Ergebnis: 0

Die Verwendung von || ermöglicht es, den ersten wahren Wert zurückzugeben. Wenn jeder Operand als falsch bewertet wird, wird der letzte berechnete Wert zurückgegeben.

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

console.log(0 || null); // Ergebnis: null

Beispiel 1

Nehmen wir an, wir möchten die Länge einer Variable zurückgeben, wissen aber nicht, welchen Typ sie hat.

In diesem Fall könnten wir if/else verwenden, um zu überprüfen, ob foo der richtige Typ ist, aber dieser Ansatz könnte sich als zu langwierig erweisen. Daher verwenden wir besser unser "kurzes Schließen".

return (foo || []).length;

Wenn die Variable foo eine geeignete Länge hat, wird sie zurückgegeben. Andernfalls erhalten wir 0.

Beispiel 2

Hatten Sie Probleme beim Zugriff auf ein verschachteltes Objekt? Sie wissen möglicherweise nicht, ob das Objekt oder eines seiner Untereigenschaften existiert, was zu Problemen führen kann.

Zum Beispiel wollten wir auf die Eigenschaft data in this.state zugreifen, aber data ist nicht definiert, bis unser Programm die Anfrage zur Abfrage zurückgibt.

Je nachdem, wo wir es verwenden, kann der Aufruf von this.state.data das Starten der Anwendung beeinträchtigen. Um das Problem zu lösen, könnten wir dies in einen bedingten Ausdruck einwickeln:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Daten werden abgerufen';
}

Eine passendere Lösung wäre die Verwendung des „oder“-Operators.

return (this.state.data || 'Daten werden abgerufen');

Wir können den obigen Code nicht ändern, um && zu verwenden. Der Ausdruck 'Daten werden abgerufen' && this.state.data gibt this.state.data zurück, unabhängig davon, ob es undefined ist oder nicht.

Optionale Verkettung

Es wäre ratsam, die optionale Verkettung zu verwenden, wenn man versucht, eine Eigenschaft tief in einer baumartigen Struktur zurückzugeben. Das Fragezeichen? kann verwendet werden, um eine Eigenschaft nur dann abzurufen, wenn sie nicht null (null) ist.

Zum Beispiel könnten wir das obige Beispiel umstrukturieren, sodass wir this.state.data?.. () erhalten. Das heißt, data wird nur zurückgegeben, wenn der Wert nicht null ist.

Oder, wenn wichtig ist, ob der Zustand definiert ist oder nicht, könnten wir this.state?.data zurückgeben.

Umwandlung in Boolean

TYPUMWANDLUNG

Neben den normalen logischen Funktionen true und false betrachtet JavaScript auch alle anderen Werte als truthy oder falsy.

Sofern nicht anders angegeben, sind in JavaScript alle Werte truthy, mit Ausnahme von 0, „“, null, undefined, NaN und natürlich false. Letztere sind falsy.

Wir können leicht zwischen diesen beiden Umwandlungen wechseln, indem wir den Operator ! verwenden, der auch den Typ in einen booleschen Wert konvertiert.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Ergebnis: true
console.log(typeof true); // Ergebnis: "boolean"

Umwandlung in einen String

TYPUMWANDLUNG

Eine schnelle Umwandlung einer Ganzzahl in einen String kann wie folgt durchgeführt werden.

const val = 1 + "";
 
console.log(val); // Ergebnis: "1"
console.log(typeof val); // Ergebnis: "string"

Umwandlung in eine Ganzzahl

TYPUMWANDLUNG

Die umgekehrte Umwandlung erfolgt wie folgt.

let int = "15";
int = +int;
 
console.log(int); // Ergebnis: 15
console.log(typeof int); // Ergebnis: "number"

Diese Methode kann auch verwendet werden, um den logischen Datentyp boolean in normale numerische Werte zu konvertieren, wie im Folgenden dargestellt:

console.log(+true);  // Rückgabe: 1
console.log(+false); // Rückgabe: 0

Es kann Situationen geben, in denen + als Verkettungsoperator und nicht als Additionsoperator interpretiert wird. Um dies zu vermeiden, sollte die Tilde verwendet werden: ~~. Dieser Operator entspricht dem Ausdruck -n-1. Zum Beispiel ist ~ 15 gleich -16.

Die Verwendung von zwei Tilden hintereinander hebt die Operation auf, da — (- — n — 1) — 1 = n + 1 — 1 = n. Mit anderen Worten, ~ -16 entspricht 15.

const int = ~~"15"
console.log(int); // Ergebnis: 15
console.log(typeof int); // Ergebnis: "number"

<Quick Powers

OPERATIONS

Seit ES7 kann der Exponentenoperator ** als Abkürzung für Potenzen verwendet werden. Dies ist viel schneller als die Verwendung von Math.pow(2, 3). Es scheint einfach zu sein, aber dieser Punkt ist in der Liste der Tricks enthalten, da er nicht überall erwähnt wird.

console.log(2 ** 3); // Ergebnis: 8

Verwechseln Sie ihn nicht mit dem Symbol ^, das normalerweise für die Potenzierung verwendet wird. In JavaScript ist dies jedoch der XOR-Operator.

Vor ES7 konnte die Abkürzung ** nur für Potenzen mit Basis 2 unter Verwendung des bitweisen Linksverschiebungsoperators << angewendet werden:

Math.pow(2, n);
2 << (n - 1);
2**n;

Zum Beispiel entspricht 2 << 3 = 16 dem Ausdruck 2 ** 4 = 16.

Float in Ganzzahl

OPERATIONS / DATENTYPENWANDLUNG

Um bei Bedarf eine Fließkommazahl in eine Ganzzahl zu konvertieren, können Sie Math.floor(), Math.ceil() oder Math.round() verwenden. Aber es gibt auch einen schnelleren Weg, dafür verwenden wir |, also den OR-Operator.

console.log(23.9 | 0); // Ergebnis: 23
console.log(-23.9 | 0); // Ergebnis: -23

Das Verhalten hängt stark davon ab, ob Sie es mit positiven oder negativen Zahlen zu tun haben, daher eignet sich diese Methode nur, wenn Sie sich sicher sind, was Sie tun.

n | 0 entfernt alles, was nach dem Dezimaltrennzeichen kommt, und reduziert die Fließkommazahl auf eine Ganzzahl.

Sie können denselben Rounding-Effekt erzielen, indem Sie ~~ verwenden. Nach der erzwungenen Umwandlung in eine Ganzzahl bleibt der Wert unverändert.

Schließen von Zahlen entfernen

Der OR-Operator kann verwendet werden, um beliebig viele Ziffern aus einer Zahl zu entfernen. Das bedeutet, dass wir die Typen nicht umwandeln müssen, wie hier:

let str = "1553";
Number(str.substring(0, str.length - 1));

Stattdessen schreiben wir einfach:

console.log(1553 / 10   | 0)  // Ergebnis: 155
console.log(1553 / 100  | 0)  // Ergebnis: 15
console.log(1553 / 1000 | 0)  // Ergebnis: 1

Automatische Bindung

KLASSEN

Arrow-Funktionen in ES6 können in Klassenmethoden verwendet werden, wobei Bindung impliziert wird. Dadurch können sich wiederholende Ausdrücke wie this.myMethod = this.myMethod.bind(this)! vermieden werden.

import React, { Component } from 'react';
 
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
 
  myMethod = () =&gt; {
    // Diese Methode ist implizit gebunden!
  }
 
  render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Array-Zuschnitt

ARRAYS

Wenn Sie Werte aus einem Array entfernen müssen, stehen Ihnen schnellere Methoden als splice() zur Verfügung.

Wenn Sie beispielsweise die Größe des ursprünglichen Arrays kennen, können Sie seine Eigenschaft length wie folgt überschreiben:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Ergebnis: [0, 1, 2, 3]

Es gibt jedoch auch eine andere Methode, die schneller ist. Wenn Geschwindigkeit für Sie wichtig ist, hier unsere Wahl:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Ergebnis: [0, 1, 2, 3]

Ausgabe des letzten Wertes (Werte) des Arrays

ARRAYS
Diese Technik erfordert die Verwendung der Methode slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Ergebnis: [9]
console.log(array.slice(-2)); // Ergebnis: [8, 9]
console.log(array.slice(-3)); // Ergebnis: [7, 8, 9]

Formatierung von JSON-Code

JSON

Vielleicht haben Sie bereits JSON.stringify verwendet. Wussten Sie, dass es Ihnen hilft, Ihr JSON zu formatieren?

Die Methode stringify() akzeptiert zwei optionale Parameter: eine replacer-Funktion, die zur Filterung des angezeigten JSON verwendet werden kann, und einen Wert für space.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Ergebnis:
// '{
//     "alpha": A,
//     "beta": B
// }'

Das ist alles, ich hoffe, dass alle genannten Techniken nützlich waren. Welche Tricks kennen Sie? Schreiben Sie sie in die Kommentare.

Skillbox empfiehlt:

Zweijähriger praktischer Kurs Ich bin ein PRO Webentwickler.

Online-Kurs C#-Entwickler von Grund auf.

Praktischer Jahreskurs PHP-Entwickler – von 0 zu PRO.

Quelle: habr.com