24 praktische Tipps zur JavaScript-Entwicklung

1. Initialisieren Sie das Array

Wenn Sie ein eindimensionales Array einer bestimmten Länge initialisieren und einen Standardwert angeben möchten, können Sie Folgendes tun:

const array = Array(6).fill(''); 
// ['', '', '', '', '', '']

Wenn Sie ein zweidimensionales Array einer bestimmten Länge initialisieren und einen Standardwert angeben möchten, können Sie Folgendes tun:

const matrix = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [[0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0]]

2. Array-Summe, Maximalwert und Minimalwert

konstantes Array = [5,4,7,8,9,2];

Summieren eines Arrays:

Array.Reduce((a,b) => a+b);

Maximalwert des Arrays:

Array.Reduce((a,b) => a > b ? a : b);

Math.max(...Array)

Minimaler Arraywert:

Array.Reduce((a,b) => a < b ? a : b);

Math.min(...Array)

Die Verwendung der reduce -Methode des Arrays kann viele Probleme bei der Array-Auswertung lösen.

3. Fehlerwerte filtern

Wenn Sie Werte wie false, 0, null und undefiniert in einem Array herausfiltern möchten, können Sie Folgendes tun:

const array = [1, 0, undefiniert, 6, 7, '', false];

array.filter(Boolean);
// [1, 6, 7]

4. Verwenden Sie logische Operatoren

Wenn ein Codestück wie dieses vorhanden ist:

wenn(a > 10) {
    tuEtwas(a)
}

Dies kann mit logischen Operatoren umgeschrieben werden:

a > 10 && tuEtwas(a)

Diese Schreibweise ist viel einfacher. Wenn der Wert vor dem logischen AND &&-Operator falsch ist, tritt ein Kurzschlussvorgang auf und die Ausführung dieses Satzes wird direkt beendet. Wenn er wahr ist, wird der Code nach && weiter ausgeführt und der Rückgabewert des folgenden Codes wird zurückgegeben. Durch die Verwendung dieser Methode können viele if...else-Beurteilungen reduziert werden.

5. Urteil vereinfachen

Wenn es zu einem Urteil wie dem folgenden kommt:

wenn(a === undefiniert || a === 10 || a=== 15 || a === null) {
    //...
}

Sie können ein Array verwenden, um diese Beurteilungslogik zu vereinfachen:

wenn([unbestimmt, 10, 15, null].includes(a)) {
    //...
}

Auf diese Weise wird der Code viel einfacher und lässt sich leichter erweitern. Wenn Sie dennoch beurteilen müssen, ob es gleich a ist, fügen Sie es einfach dem Array hinzu.

6. Löschen Sie das Array

Wenn Sie ein Array löschen möchten, können Sie die Länge des Arrays auf 0 setzen:

let array = ["A", "B", "C", "D", "E", "F"]
Array.Länge = 0 
konsole.log(array) // []

7. Code-Leistung berechnen

Die Leistung Ihres Codes kann mithilfe der folgenden Operationen berechnet werden:

const startTime = Leistung.jetzt(); 
// Einige Prozeduren for(let i = 0; i < 1000; i++) {
    Konsole.log(i)
}
const endTime = Leistung.jetzt();
const Gesamtzeit = Endzeit - Startzeit;
console.log(Gesamtzeit); // 30.299999952316284

8. Verketten von Arrays

Wenn wir mehrere Arrays verketten möchten, können wir den Spread-Operator verwenden:

konstanter Start = [1, 2] 
const end = [5, 6, 7] 
const numbers = [9, ...Start, ...Ende, 8] // [9, 1, 2, 5, 6, 7, 8]

Oder verwenden Sie die concat()-Methode eines Arrays:

const start = [1, 2, 3, 4] 
const end = [5, 6, 7] 
start.concat(ende); // [1, 2, 3, 4, 5, 6, 7]

Wenn jedoch bei Verwendung der Methode concat ncat() die zusammenzuführenden Arrays groß sind, verbraucht concat() beim Erstellen eines separaten neuen Arrays viel Speicher. Derzeit können Sie die Arrays mit der folgenden Methode zusammenführen:

Array.push.apply(Start, Ende)

Auf diese Weise kann der Speicherverbrauch erheblich reduziert werden.

9. Methode zur Objektüberprüfung

Wenn wir ein Objekt wie dieses haben:

const übergeordnetes Element = {
    Kind: {
      Kind1: {
        Kind2: {
          Tonart: 10
      }
    }
  }
}

Um Fehler zu vermeiden, die durch die Nichtexistenz einer bestimmten Ebene entstehen, schreiben wir häufig so:

Eltern && Eltern.Kind && Eltern.Kind.Kind1 && Eltern.Kind.Kind1.Kind2

Dieser Code sieht aufgebläht aus, Sie können den optionalen Verkettungsoperator von JavaScript verwenden:

Elternteil?.Kind?.Kind1?.Kind2

Diese Implementierung und Wirkung sind dieselben wie in der langen Liste oben.​

Der optionale Verkettungsoperator funktioniert auch mit Arrays:

konstantes Array = [1, 2, 3];
Array?[5]

Der optionale Verkettungsoperator ermöglicht es uns, den Wert einer Eigenschaft zu lesen, die tief in einer Kette verbundener Objekte liegt, ohne explizit überprüfen zu müssen, ob jede Referenz in der Kette gültig ist. Falls die Referenz null oder undefiniert ist, tritt kein Fehler auf und der Kurzschluss-Rückgabewert des Ausdrucks ist undefined . Bei Verwendung mit einem Funktionsaufruf wird undefined zurückgegeben, wenn die angegebene Funktion nicht existiert.

10. Überprüfen Sie undefiniert und null

Wenn ein solcher Code vorhanden ist:

wenn(a === null || a === undefiniert) {
    tuEtwas()
}

Das heißt, wenn Sie überprüfen müssen, ob ein Wert gleich null oder undefined ist, und eine Operation ausführen müssen, können Sie den Nullwert-Koaleszenzoperator verwenden, um den obigen Code zu vereinfachen:

ein ?? tuEtwas()

Auf diese Weise wird der Code, der dem Control-Coalescing-Operator folgt, nur ausgeführt, wenn a undefined oder null ist. Der Null-Koaleszenzoperator (??) ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand null oder undefined ist, andernfalls gibt er seinen linken Operanden zurück.

11. Konvertieren Sie Array-Elemente in Zahlen

Wenn Sie ein Array haben und die Elemente im Array in Zahlen umwandeln möchten, können Sie dazu die Map-Methode verwenden:

konstantes Array = ['12', '1', '3,1415', '-10,01'];
array.map(Zahl); // [12, 1, 3,1415, -10,01]

Auf diese Weise führt map beim Durchlaufen des Arrays den Number-Konstruktor für jedes Element des Arrays aus und gibt das Ergebnis zurück.

12. Konvertieren eines Klassenarrays in ein Array

Mit der folgenden Methode können Sie arrayähnliche Argumente in ein Array umwandeln:

Array.prototype.slice.call(Argumente);

Alternativ können Sie den Spread-Operator verwenden:

[...Argumente]

13. Eigenschaften der dynamischen Objektdeklaration

Wenn Sie Eigenschaften für ein Objekt dynamisch deklarieren möchten, können Sie Folgendes tun:

const dynamisch = "Farbe";
var Element = {
    Marke: 'Ford',
    [dynamisch]: 'Blau'
}
konsole.log(Element); 
// { Marke: "Ford", Farbe: "Blau" }

14. Verkürzen Sie console.log()

Es ist mühsam, bei jedem Debuggen eine Menge console.log() zu schreiben. Sie können das folgende Format verwenden, um den Code zu vereinfachen:

const c = console.log.bind(Dokument) 
c(996) 
c("Hallo Welt")

Auf diese Weise müssen Sie jedes Mal nur Methode c ausführen.

15. Abfrageparameter abrufen

Wenn wir die Parameter in der URL abrufen möchten, können wir die Eigenschaften des Fensterobjekts verwenden:

Fenster.Standort.Suche

Wenn eine URL www.baidu.com?project=js&type=1 ist, ergibt die obige Operation ?project=js&type=1. Wenn Sie einen der Parameter abrufen möchten, können Sie Folgendes tun:

let Typ = neue URLSearchParams(location.search).get('Typ');

16. Rundung

Wenn eine Zahl Dezimalstellen enthält und wir diese entfernen möchten, verwenden wir math.floor , math.ceil oder math.round um die Dezimalstellen zu eliminieren. Tatsächlich können Sie den Operator ~~ verwenden, um den Dezimalteil einer Zahl zu eliminieren, was viel schneller ist als diese Methoden für Zahlen.

~~3.1415926 // 3

Tatsächlich hat dieser Operator viele Funktionen. Er wird normalerweise verwendet, um Variablen in numerische Typen umzuwandeln. Die Ergebnisse der Umwandlung sind bei verschiedenen Typen unterschiedlich:

• Handelt es sich um eine Zeichenfolge vom Typ „Zahl“, wird sie in eine reine Zahl umgewandelt.
• Wenn die Zeichenfolge andere Werte als Zahlen enthält, wird sie in 0 umgewandelt.
• Wenn es ein Boolescher Typ ist, gibt „true“ 1 und „false“ 0 zurück.
  

Zusätzlich zu dieser Methode können wir auch bitweises UND verwenden, um die Rundungsoperation von Zahlen zu implementieren. Fügen Sie einfach |0 nach der Zahl hinzu:

23,9 | 0 // 23
-23,9 | 0 // -23

Durch diese Operation werden auch die Dezimalstellen nach der Zahl direkt entfernt. Diese Methode ähnelt der obigen Methode und ihre Leistung ist viel besser als die JavaScript API.

17. Array-Elemente löschen

Wenn wir ein Element in einem Array löschen möchten, können wir dazu „delete“ verwenden. Nach dem Löschen wird das Element jedoch undefined und verschwindet nicht. Außerdem wird die Ausführung viel Zeit in Anspruch nehmen, was unseren Anforderungen in den meisten Fällen nicht gerecht wird. Sie können also die splice() -Methode des Arrays verwenden, um Array-Elemente zu löschen:

Konstantes Array = ["a", "b", "c", "d"] 
array.splice(0, 2) // ["a", "b"]

18. Überprüfen Sie, ob ein Objekt null ist

Wenn wir überprüfen möchten, ob ein Objekt leer ist, können wir die folgende Methode verwenden:

Objekt.keys({}).length // 0
Objekt.keys({key: 1}).length // 1

Object.keys() wird verwendet, um die Schlüssel eines Objekts abzurufen und gibt ein Array zurück, das diese Schlüsselwerte enthält. Wenn die zurückgegebene Arraylänge 0 ist, ist das Objekt definitiv leer.

19. Verwenden Sie Switch Case anstelle von if/else

switch case weist eine höhere Ausführungsleistung als if/else auf und der Code sieht klarer aus.

wenn (1 == Monat) {Tage = 31;}
sonst wenn (2 == Monat) {Tage = IstSchaltjahr(Jahr) ? 29 : 28;}
sonst wenn (3 == Monat) {Tage = 31;}
sonst wenn (4 == Monat) {Tage = 30;} 
sonst wenn (5 == Monat) {Tage = 31;} 
sonst wenn (6 == Monat) {Tage = 30;} 
sonst wenn (7 == Monat) {Tage = 31;} 
sonst wenn (8 == Monat) {Tage = 31;} 
sonst wenn (9 == Monat) {Tage = 30;} 
sonst wenn (10 == Monat) {Tage = 31;} 
sonst wenn (11 == Monat) {Tage = 30;} 
sonst wenn (12 == Monat) {Tage = 31;} 

Umschreiben mit switch...case:

Schalter(Monat) {
        Fall 1: Tage = 31; Pause;
        Fall 2: Tage = IstSchaltjahr(Jahr) ? 29 : 28; Pause;
        Fall 3: Tage = 31; Pause;
        Fall 4: Tage = 30; Pause;
        Fall 5: Tage = 31; Pause;
        Fall 6: Tage = 30; Pause;
        Fall 7: Tage = 31; Pause;
        Fall 8: Tage = 31; Pause;
        Fall 9: Tage = 30; Pause;
        Fall 10: Tage = 31; Pause;
        Fall 11: Tage = 30; Pause;
        Fall 12: Tage = 31; Pause;
        Standard: Unterbrechung;
}

Es sieht relativ einfach aus. Sie können „if...else“ je nach Situation mit Arrays oder Objekten umschreiben.

20. Holen Sie sich das letzte Element in einem Array

Wenn Sie das letzte Element in einem Array abrufen möchten, schreiben Sie es häufig folgendermaßen:

const arr = [1, 2, 3, 4, 5];
arr[arr.Länge - 1] // 5

Tatsächlich können wir auch die Slice-Methode des Arrays verwenden, um das letzte Element des Arrays zu erhalten:

arr.Scheibe(-1)

Wenn wir den Parameter der Slice-Methode auf einen negativen Wert setzen, werden die Array-Werte von der Rückseite des Arrays abgefangen. Wenn wir die letzten beiden Werte abfangen möchten, übergeben wir einfach -2 als Parameter.

21. Wert in Boolean umwandeln

In JavaScript werden bei der Konvertierung in einen Booleschen Wert die folgenden Werte in „false“ und alle anderen Werte in „true“ konvertiert:

• undefiniert
• Null
• 0
• -0
• NaN
• ""
  

Wenn wir einen expliziten Wert in einen Booleschen Wert umwandeln möchten, verwenden wir normalerweise zur Konvertierung Boolean() . Wir können den !!-Operator tatsächlich verwenden, um einen Wert in einen Booleschen Wert umzuwandeln. Wir wissen, einen! Das Objekt soll in den Booleschen Typ konvertiert und negiert werden, zwei! Dadurch wird der negierte Boolesche Wert erneut negiert, was der direkten Konvertierung des Werts vom nicht-Booleschen Typ in einen Wert vom Booleschen Typ entspricht. Diese Operation ist viel schneller als Boolean() -Methode, da es sich um eine native Operation des Computers handelt:

!!undefiniert // falsch
!!"996" // wahr
!!null // falsch
!!NaN // falsch

22. JSON-Code formatieren

Ich glaube, jeder hat die Methode JSON.stringify verwendet, mit der ein JavaScript Objekt oder -Wert in eine JSON-Zeichenfolge konvertiert werden kann. Die Syntax lautet wie folgt:

JSON.stringify(Wert, Ersetzungselement, Leerzeichen)

Es hat drei Parameter:

• value : Der in eine JSON-Zeichenfolge serialisierte Wert.
• replacer ist optional: Wenn dieser Parameter eine Funktion ist, wird jede Eigenschaft des serialisierten Werts während des Serialisierungsprozesses von der Funktion konvertiert und verarbeitet. Wenn dieser Parameter ein Array ist, werden nur die in diesem Array enthaltenen Eigenschaftsnamen in die endgültige JSON-Zeichenfolge serialisiert. Wenn dieser Parameter null ist oder nicht angegeben wird, werden alle Eigenschaften des Objekts serialisiert.
• space sind optional: Gibt eine leere Zeichenfolge für die Einrückung an, die für das schöne Drucken verwendet wird. Wenn der Parameter eine Zahl ist, stellt sie die Anzahl der Leerzeichen dar. Die Obergrenze liegt bei 10. Wenn dieser Wert kleiner als 1 ist, bedeutet dies, dass keine Leerzeichen vorhanden sind. Wenn der Parameter eine Zeichenfolge ist (wenn die Zeichenfolge mehr als 10 Buchstaben enthält, werden die ersten 10 Buchstaben verwendet), wird die Zeichenfolge als Leerzeichen behandelt. Wenn dieser Parameter nicht angegeben wird (oder null ist), sind keine Leerzeichen vorhanden.
  

Normalerweise schreiben wir einen Parameter, um ein JavaScript-Objekt oder einen Wert in eine JSON-Zeichenfolge zu konvertieren. Sie können sehen, dass es zwei optionale Parameter hat, sodass wir diese beiden Parameter verwenden können, um den JSON-Code zu formatieren:

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

Die Ausgabe lautet wie folgt:

23. Vermeiden Sie die Verwendung von eval() und with()

• with() fügt eine Variable in den globalen Gültigkeitsbereich ein. Wenn also eine andere Variable den gleichen Namen hat, könnte dies zu Verwirrung führen und den Wert überschreiben.
• eval() ist eine aufwändige Operation; bei jedem Aufruf muss die Skript-Engine den Quellcode in ausführbaren Code umwandeln.
  

24. Verwenden Sie für Funktionsparameter Objekte anstelle von Parameterlisten

Wenn wir eine Parameterliste verwenden, um Parameter an eine Funktion zu übergeben, ist es in Ordnung, wenn weniger Parameter vorhanden sind. Wenn es jedoch mehr Parameter gibt, wird es problematisch, weil wir die Parameter in der Reihenfolge der Parameterliste übergeben müssen. Wenn Sie zum Schreiben TypeScript verwenden, müssen Sie beim Schreiben auch optionale Parameter nach den erforderlichen Parametern einfügen.​

Wenn unsere Funktion viele Parameter hat, können wir sie in Form von Objekten übergeben. Bei der Parameterübergabe in Form von Objekten müssen optionale Parameter nicht am Ende übergeben werden, und die Reihenfolge der Parameter ist nicht wichtig. Darüber hinaus ist die Weitergabe über Objekte einfacher zu lesen und zu verstehen als eine Parameterliste.​

Schauen wir uns ein Beispiel an:

Funktion getItem(Preis, Menge, Name, Beschreibung) {}

getItem(15, undefiniert, 'Bananen', 'Obst')

Lassen Sie uns die Objektübergabe verwenden:

Funktion getItem(args) {
    const {Preis, Menge, Name, Beschreibung} = Argumente
}

getItem({
    Name: 'Bananen',
    Preis: 10,
    Menge: 1, 
    Beschreibung: „Obst“
})

Dies ist das Ende dieses Artikels über 24 praktische JavaScript-Entwicklungsfähigkeiten. Weitere relevante JavaScript-Entwicklungsfähigkeiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!