Zusammenfassung einiger gängiger Möglichkeiten zum Abkürzen von Javascript-Code

Vorwort

In diesem Artikel werden hauptsächlich einige bei der Arbeit häufig verwendete JavaScript-Codierungsfähigkeiten vorgestellt. Sehr nützlich. Ich schlage vor, dass Sie es gleich nach dem Lesen in die Praxis umsetzen und im Hinterkopf behalten!

Zunächst möchte ich ein vscode-Plugin empfehlen, Quokka.js, ein Code-Debugging-Tool. Die Funktion des Plugins besteht darin, den von Ihnen eingegebenen JavaScript-Code oder TypeScript-Code sofort auszuführen

Pfeilfunktionen

Kurzschriftregeln:

1. Es gibt nur einen Parameter, die Klammern können weggelassen werden
2. Da es nur einen Rückgabewert gibt, können geschweifte Klammern und Return weggelassen werden.

sei arr = [1,2,3]

arr.filter((item)=>{
    Artikel zurückgeben >1
})

//Es gibt nur einen Parameter, die Klammern können weggelassen werden arr.filter(item=>{
    Artikel zurückgeben>1
})
//Es gibt nur einen Rückgabewert, geschweifte Klammern und Return können weggelassen werden arr.filter(item=>item>1)

Beherrschen Sie gängige Array-Operationen

Beherrschen Sie die gängigen Array-Methoden und behalten Sie sie im Hinterkopf. Schauen Sie beim Schreiben nicht auf die API. Dies kann die Codierungseffizienz effektiv verbessern. Schließlich werden diese Methoden täglich verwendet.

• jeder
• manche
• Filter
• Karte
• fürJedes
• finden
• Index suchen
• reduzieren
• beinhaltet

Beherrschen Sie die gängigen Zeichenfolgenoperationsfunktionen

• trimmen
• Startbreite
• beinhaltet

let str="Hallo JueJue "
//Enthält die Teilzeichenfolge console.log(str.includes("Hallo"))
// Beginnt mit einer Teilzeichenfolge console.log(str.startsWith("Hello"))
// Nachfolgende Leerzeichen entfernen console.log(str.trim())

Spread-Operator

Sehr nützlich, hier sind zwei Anwendungsszenarien:

Destrukturierung eines Arrays

//Array-Deduplizierungsfunktion removeRepeat(arr){
    zurückgeben [...neues Set(arr)]
}
// Maximalwert des Arrays Math.max(...arr)
Math.min(...arr)

Dekonstruktion eines Objekts

//React wird verwendet, um mehrere Eigenschaften gleichzeitig zu übergeben. let props={name:'Ben',age:10,sex:0}
const Begrüßung = <Begrüßung {...props} />

//Kombinierte Objekte können Object.assign anstelle von let defaultParams={ verwenden.
    Seitengröße:1,
    Seitennummer: 10,
    Sortieren:1
}

reqParams = {
    ...Standardparameter,
    Telefon:'15196255885'
}

Objektkurzschrift

Der Schlüssel und der Wert des Objekts haben den gleichen Namen, sodass Sie einfach den Schlüssel schreiben können, was viel Code sparen kann

lass id, alter, geschlecht

lass person={
    Ausweis,
    Alter,
    Sex
}

Destrukturierungsauftrag

• Für Funktionsparameter
• So zerlegen Sie ein Objekt

Können Sie weniger Code verwenden?

Klasse Spirit{
    Konstruktor({x=0,y=0,w=10,h=10,rotate=0}){//Funktionsparameterstruktur this.x=x
        dies.y=y
        dies.w=w
        dies.h=h
        this.rotate=drehen
    }
    ziehen(){
        const {x,y,w,h,rotieren}=dies
        console.log("zeichnen -> x,y,w,h,drehen", x,y,w,h,drehen)
    }
}

Beherrschen Sie die Methoden der Datentypkonvertierung

Leute, die JS schreiben, haben im Allgemeinen kein Typkonzept und sind nicht sehr sensibel für die Unterscheidung zwischen Zahl und Zeichenfolge. Tatsächlich ist der Datentyp von JS immer noch sehr wichtig. Wenn Sie nicht aufpassen, können Sie Fehler machen. Ich hoffe also, dass sich jeder an die folgende Methode erinnert

Konvertierung zwischen Zahlen- und Zeichenfolgentypen

Ich benutze im Allgemeinen gerne den Konstruktor

Nummer('001') //-> 1
Zeichenfolge('1') // ->1

Behalte n Dezimalstellen

Funktion cutNumber(value,n=2){//Standardmäßig bleiben 2 Dezimalstellen erhalten return Number(value).toFixed(n)
}

Zusammenfassen

Dies ist das Ende dieses Artikels über JavaScript-Codeabkürzungen. Weitere relevante JavaScript-Codeabkürzungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!