🥇12 JavaScript-Techniken, die in den meisten Tutorials nicht zu finden sind

Als ich anfing, JavaScript zu lernen, stellte ich zunächst eine Liste von Techniken zusammen, 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 12 großartige Möglichkeiten, Ihren JavaScript-Code zu verbessern und zu beschleunigen. In den meisten Fällen sind sie universell.

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 „Mobiler Entwickler PRO“.

Filtern von einzigartigen Werten

ARRAYS

Der Set-Objekttyp wurde in ES6 eingeführt. Zusammen mit dem …, 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 der Regel wäre es notwendig, für dieselbe Operation viel mehr Code zu schreiben.

Diese Technik funktioniert für Arrays, die primitive Typen enthalten: 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 Cache-Arrays in Schleifen

SCHLEIFEN

Wenn Sie for für Schleifen lernen, folgen Sie der Standardprozedur:

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

Dennoch überprüft bei dieser Syntax die Schleife for die Länge des Arrays bei jeder Iteration erneut.

Manchmal kann das 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 Längenvariable definieren, in der 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 das Gleiche wie oben, aber wenn die Schleifengröße zunimmt, sparen wir erheblich Zeit.

Bewertung der Kurzschlussauswertung (McCarthy-Bewertung)

B_EDINGTE_OPERATOREN

Der ternäre Operator ist eine schnelle und effektive Möglichkeit, einfache (und manchmal auch nicht ganz 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 nötig. Stattdessen können wir die logischen Operatoren ‘and’ && und ‘or’ || verwenden, um einige Ausdrücke noch kürzer auszuwerten. Es wird oft als "Kurzschluss" oder "Kurzschlussbewertung" bezeichnet.

Die DANE-Spezifikation ist in

Nehmen wir an, wir wollen nur eines von zwei oder mehr Bedingungen zurückgeben.

Die Verwendung von && gibt den ersten falschen Wert zurück. Wenn jeder Operand als wahr beurteilt 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

Angenommen, wir möchten die length einer Variablen 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 geeignete Typ ist, aber dieser Ansatz könnte zu langwierig sein. Daher sollten wir unser "short-circuiting" verwenden.

return (foo || []).length;

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

Beispiel 2

Hatten Sie Probleme beim Zugriff auf ein geschachteltes Objekt? Es kann sein, dass Sie nicht wissen, ob das Objekt oder eines seiner Unterattribute existiert, was zu Problemen führen könnte.

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

Je nachdem, wo wir es verwenden, könnte der Aufruf this.state.data den Start der Anwendung behindern. Um das Problem zu lösen, könnten wir dies in eine bedingte Anweisung einwickeln:

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

Eine passendere Option wäre die Verwendung des Operators „or“.

return (this.state.data || 'Daten abrufen');

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

Optionale Verkettung

Es könnte sinnvoll sein, optionale Verkettung zu verwenden, wenn wir versuchen, eine Eigenschaft tief in einer hierarchischen Struktur zurückzugeben. Das Fragezeichen? kann verwendet werden, um eine Eigenschaft nur zu extrahieren, wenn sie nicht null ist.

Zum Beispiel könnten wir das obige Beispiel refaktorisieren und this.state.data?.. verwenden. Das heißt, data wird nur zurückgegeben, wenn der Wert nicht null ist.

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

Umwandlung in Boolean

TYPUMWANDLUNG

Neben den üblichen booleschen Werten true und false betrachtet JavaScript auch alle anderen Werte als truthy oder falsy.

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

Wir können leicht zwischen diesen und jenen 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); // Ergebnis: true
console.log(typeof true); // Ergebnis: "boolean"

Umwandlung in eine Zeichenkette

TYPUMWANDLUNG

Eine schnelle Umwandlung einer Ganzzahl in eine Zeichenkette 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 so.

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

Diese Methode kann auch zur Umwandlung des booleschen Datentyps in gewöhnliche numerische Werte verwendet werden, wie unten gezeigt:

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

Es kann Situationen geben, in denen + als Konkatenationsoperator und nicht als Additionsoperator interpretiert wird. Um dies zu vermeiden, sollte man Tilden verwenden: ~~. Dieser Operator ist gleichwertig mit dem Ausdruck -n-1. Zum Beispiel ist ~ 15 gleich -16.

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

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

<Quick Powers

OPERATIONS

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

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

Verwechsle ihn nicht mit dem Symbol ^, das normalerweise zur Potenzierung verwendet wird. Aber in JavaScript ist dies ein 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 ist 2 << 3 = 16 gleichwertig mit dem Ausdruck 2 ** 4 = 16.

Float in Ganzzahl

OPERATIONS / TYPUMWANDLUNG

Wenn notwendig, kann man Float in eine Ganzzahl umwandeln, indem man Math.floor(), Math.ceil() oder Math.round() verwendet. Aber es gibt auch einen schnelleren Weg, dazu 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, weshalb diese Methode nur geeignet ist, wenn Sie sich sicher sind, was Sie tun.

n | 0 entfernt alles, was nach dem Dezimaltrennzeichen kommt, und schneidet die Gleitkommazahl auf eine ganze Zahl zu.

Sie können denselben Rundungseffekt erzielen, indem Sie ~~ verwenden. Nach der erzwungenen Umwandlung in eine ganze Zahl bleibt der Wert unverändert.

Entfernen von abschließenden Zahlen

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

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

Automatisches Binden

KLASSEN

Arrow Functions aus ES6 können in Klassenmethoden verwendet werden, wobei das Binden impliziert wird. Dadurch können wir uns von sich wiederholenden Ausdrücken wie this.myMethod = this.myMethod.bind(this)! verabschieden.

import React, { Component } von 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, gibt es schnellere Methoden als splice().

Zum Beispiel, wenn Sie die Größe des ursprünglichen Arrays kennen, können Sie seine Eigenschaft length wie folgt neu definieren:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Ergebnis: [0, 1, 2, 3]

Aber es gibt auch eine weitere Methode, die zudem schneller ist. Wenn Geschwindigkeit für Sie von Bedeutung ist, dann ist das 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
Dieser Trick 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 den Wert space.

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

// Ergebnis:
// '{
//     "alpha": A,
//     "beta": B
// }'

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

Skillbox empfiehlt:

Zweijähriger praktischer Kurs „Ich bin ein Webentwickler PRO“.

Online-Kurs „C#-Entwickler von Grund auf“.

Praktischer Jahreskurs „PHP-Entwickler von 0 bis PRO“.

Quelle: habr.com