JavaScript-Tipps zur Verbesserung Ihrer Programmierkenntnisse

Heute werde ich Ihnen 11 JavaScript-Tipps verraten, die in täglichen Tutorials nicht oft erwähnt werden. Sie kommen in unserer täglichen Arbeit oft vor, werden aber leicht übersehen.

1. Filtern Sie eindeutige Werte

Der Set-Typ wurde in ES6 neu hinzugefügt. Er ähnelt einem Array, aber die Werte seiner Mitglieder sind eindeutig und es gibt keine doppelten Werte. In Kombination mit dem Spread-Operator (...) können wir ein neues Array erstellen, um doppelte Werte im ursprünglichen Array herauszufiltern.

const array = [1, 2, 3, 3, 5, 5, 1];
const uniqueArray = [...neues Set(Array)];

console.log(uniqueArray); // [1, 2, 3, 5]

Wenn wir diese Funktion vor ES6 implementieren wollten, benötigten wir viel mehr Verarbeitungscode. Diese Technik ist auf Array-Werte der folgenden Typen anwendbar: undefined, null, boolean, string, number. Dies gilt nicht, wenn Objekte, Funktionen oder Arrays enthalten sind.

2. Kurzschlussauswertung

Der ternäre Operator ist eine sehr bequeme und schnelle Möglichkeit, einige einfache logische Aussagen zu schreiben.

x > 100? ‚Über 100‘ : ‚Unter 100‘;
x > 100? (x > 200? ‚Über 200‘ : ‚Zwischen 100-200‘) : ‚Unter 100‘;

Aber manchmal, wenn die Logik kompliziert ist, kann der ternäre Operator schwer zu lesen sein. An diesem Punkt können wir die Operatoren „Und“ (&&) und „Oder“ (||) verwenden, um unseren Ausdruck neu zu schreiben.

Die logischen UND- und ODER-Operatoren werten immer zuerst ihren linken Operanden aus und werten ihren rechten Operanden nur dann aus, wenn das Ergebnis des logischen Ausdrucks nicht allein durch den Wert des linken Operanden bestimmt werden kann.

Dies wird als „Kurzschlussauswertung“ bezeichnet und funktioniert wie folgt: Der &&-Operator gibt den ersten falschen/‚falschen‘ Wert zurück. Wenn alle Operanden wahr sind, wird das Ergebnis des letzten Ausdrucks zurückgegeben.

sei eins = 1, zwei = 2, drei = 3;
console.log(eins && zwei && drei); // Ergebnis: 3


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

Der Operator „oder“ (||) gibt den ersten wahren/wahren Wert zurück. Wenn alle Operanden falsch sind, wird das Ergebnis des letzten Ausdrucks zurückgegeben.

sei eins = 1, zwei = 2, drei = 3;
console.log(eins || zwei || drei); // Ergebnis: 1

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

2.1 Szenariobeispiele

Wenn wir Daten vom Server anfordern, verwenden wir diese Daten an einem anderen Ort, kennen jedoch den Status der Daten nicht, beispielsweise wenn wir auf die Dateneigenschaft von this.state zugreifen.

Wie üblich ermitteln wir zunächst die Gültigkeit dieser Statusdaten und unterscheiden und behandeln sie dann entsprechend ihrer Gültigkeit.

wenn (dieser.Zustand.Daten) {
  gib diese Statusdaten zurück;
} anders {
  gibt „Daten abrufen“ zurück;
}

Aber wir können diese logische Verarbeitung auf die oben beschriebene Weise vereinfachen.

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

Im Vergleich fanden wir, dass diese Methode einfacher und bequemer ist.

3. Boolesche Werte konvertieren

Herkömmliche Boolesche Werte sind nur wahr und falsch, aber in JavaScript können wir andere Werte als „wahr“ oder „falsch“ betrachten.

Mit Ausnahme von 0, "", null, undefiniert, NaN und falsch können wir alle anderen als „wahr“ betrachten. Wir können den Minusoperator verwenden! Konvertiert eine Reihe von Variablen in den Typ „Boolesch“.

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

4. String konvertieren

Wir können eine Variable vom Zahlentyp in einen Zeichenfolgentyp konvertieren, indem wir den Verkettungsoperator „+“ verwenden.

konstanter Wert = 1 + "";

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

5. Zahlentyp konvertieren

Entsprechend dem obigen können wir eine Variable vom Typ String mithilfe des Additionsoperators + wieder in einen Zahlentyp umwandeln.

lass int = "15";
}

console.log(int); // Ergebnis: 15
console.log(typeof int); Ergebnis: "Zahl"

In manchen Kontexten wird + als Verkettungsoperator und nicht als Additionsoperator interpretiert. Wenn dies passiert (Sie möchten eine Ganzzahl und keine Gleitkommazahl zurückgegeben), können Sie zwei Tilden verwenden: ~~.

(Beachten Sie, dass es im englischen Format ist) Ein Tilde-Zeichen ~ wird als „bitweiser NICHT-Operator“ bezeichnet und entspricht - n - 1. Also ~15 = -16. Die Verwendung von zwei ~~s negiert die Operation effektiv. Dies liegt daran, dass - (- n - 1) - 1 = n + 1 - 1 = n. Das ist ~-16 = 15

Konstante int = ~~"15"

console.log(int); // Ergebnis: 15
console.log(typeof int); Ergebnis: "Zahl"

6. Schnelle Potenzierung

Ab ES7 können wir den Potenzoperator ** als Abkürzung für die Exponentiation verwenden, was schneller ist als das vorherige Math.pow(2, 3). Dies ist ein sehr einfacher und praktischer Punkt, aber in den meisten Tutorials wird nicht speziell darauf eingegangen.

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

Dies sollte nicht mit dem Symbol ^ verwechselt werden, das häufig zur Darstellung einer Potenzierung verwendet wird, in JavaScript jedoch der bitweise XOR-Operator ist. Vor ES7 basierte die Abkürzung von Power hauptsächlich auf dem bitweisen Linksverschiebungsoperator << mit unterschiedlichen Schreibmethoden.

// Die folgenden Ausdrücke sind äquivalent: Math.pow(2, n);
2 << (n - 1);
2**n;

Es ist zu beachten, dass 2 << 3 = 16 äquivalent zu 2 ** 4 = 16 ist.

7. Schnelles Float zu Integer

Wir können normalerweise Math.floor(), Math.ceil() und Math.round() verwenden, um den Float-Typ in den Integer-Typ zu konvertieren. Es gibt jedoch eine schnellere Möglichkeit, Gleitkommazahlen mit | (bitweiser ODER-Operator) in Ganzzahlen zu kürzen.

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

Das Verhalten von | hängt davon ab, ob Sie mit positiven oder negativen Zahlen arbeiten. Daher sollten Sie diese Tastenkombination nur verwenden, wenn Sie sicher sind. Wenn n positiv ist, wird n | 0 effektiv abgerundet. Wenn n negativ ist, wird effektiv aufgerundet.

Genauer gesagt besteht das Ergebnis dieser Operation darin, den Inhalt nach dem Dezimalpunkt direkt zu löschen und die Gleitkommazahl auf eine Ganzzahl zu kürzen, was sich von den anderen oben genannten Methoden unterscheidet.

Sie können auch ~~ verwenden, um den gleichen Rundungseffekt wie oben erwähnt zu erzielen, und eigentlich kann jeder bitweise Operator eine Gleitkommazahl in eine Ganzzahl umwandeln. Diese speziellen Operationen funktionieren, weil der Wert unverändert bleibt, sobald er in eine Ganzzahl umgewandelt wurde.

7.1 Einsatzszenarien

Mit dem bitweisen ODER-Operator können Sie am Ende einer Ganzzahl eine beliebige Anzahl Ziffern entfernen. Das bedeutet, dass wir zur Konvertierung zwischen Typen keinen Code wie diesen verwenden müssen.

sei str = "1553"; 
Zahl(str.substring(0, str.length - 1));

Stattdessen können wir die folgende Methode verwenden, um unsere Funktion zu implementieren

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

8. Automatische Bindung im Unterricht

Wir können einen impliziten Bindungsbereich in der Klasse implementieren, indem wir die von ES6 hinzugefügte Pfeilfunktion verwenden. Gemäß der vorherigen Verarbeitung müssen wir die von uns geschriebene Methode explizit binden, ähnlich this.myMethod = this.myMethod.bind(this). Wenn unsere Klasse viele Methoden enthält, wird viel Bindungscode geschrieben. Jetzt können wir diesen Vorgang durch die Verwendung von Pfeilfunktionen vereinfachen.

importiere React, {Komponente} von React;
exportiere Standardklasse App erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {};
  }
  meineMethode = () => {
    // Implizite Bindung }
  rendern() {
    zurückkehren (
      <>
        <div>
          {this.meineMethod()}
        </div>
      </>
    )
  }
};

9. Arrays abfangen

Wenn Sie Werte vom Ende eines Arrays entfernen möchten, gibt es schnellere Alternativen als die Verwendung von splice(). Wenn Sie beispielsweise die Länge des ursprünglichen Arrays kennen, können Sie es kürzen, indem Sie seine Längeneigenschaft neu definieren.

lass Array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
Array.Länge = 4;
console.log(array); // Ergebnis: [0, 1, 2, 3]

Dies ist eine besonders elegante Lösung. Die Laufzeit der slice()-Methode ist jedoch schneller. Wenn Geschwindigkeit Ihr Hauptziel ist, sollten Sie den folgenden Ansatz in Betracht ziehen.

lass Array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
Array = Array.Scheibe(0, 4);

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

10. Holen Sie sich das letzte Element im Array

Die Array-Methode slice() kann eine negative Ganzzahl akzeptieren. Wenn diese angegeben wird, beginnt sie mit dem Abschneiden der Werte am Ende des Arrays statt am Anfang.

lass 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]

11. JSON-Code formatieren

Wir verwenden JSON.stringify möglicherweise häufig, wenn wir mit JSON-bezogenen Verarbeitungen zu tun haben, aber wussten Sie, dass es beim Einrücken von JSON helfen kann? Die Methode stringify() akzeptiert zwei optionale Parameter: eine Ersetzungsfunktion und einen Leerzeichenwert. Die Ersetzungsfunktion kann verwendet werden, um das angezeigte JSON zu filtern. Der Leerzeichenwert akzeptiert eine Ganzzahl, die die Anzahl der erforderlichen Leerzeichen darstellt, oder eine Zeichenfolge (z. B. „t“ zum Einfügen eines Tabulatorzeichens), was das Lesen abgerufener JSON-Daten erheblich erleichtern kann.

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

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

Damit ist dieser Artikel mit JavaScript-Tipps zur Verbesserung Ihrer Programmierkenntnisse abgeschlossen. Weitere relevante JavaScript-Tipps finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!