8 wichtige JavaScript-Codefragmente für Ihr Projekt

8 wichtige JavaScript-Codefragmente für Ihr Projekt

1. Holen Sie sich die Dateierweiterung

Anwendungsszenario: Hochladen von Dateien zur Ermittlung des Suffixes

/**
 * Dateierweiterung abrufen * @param {String} Dateiname
 */
 Exportfunktion getExt(Dateiname) {
    wenn (Typ des Dateinamens == 'Zeichenfolge') {
        Dateinamen zurückgeben
            .Teilt('.')
            .Pop()
            .toLowerCase()
    } anders {
        throw new Error('Dateiname muss ein String-Typ sein')
    }
}

Anwendung

getExt("1.mp4") //->mp4

2. Inhalt in die Zwischenablage kopieren

Exportfunktion copyToBoard(Wert) {
    const element = document.createElement('textarea')
    document.body.appendChild(Element)
    element.value = Wert
    element.auswählen()
    wenn (document.execCommand('kopieren')) {
        document.execCommand('kopieren')
        document.body.removeChild(Element)
        returniere wahr
    }
    document.body.removeChild(Element)
    return false
}

Anwendung:

//Gibt „true“ zurück, wenn das Kopieren erfolgreich war
KopiereAufBoard('lalallala')

Prinzip:

  • Erstellen Sie ein textare und rufen Sie die Methode select() auf, um es auszuwählen.
  • Die Methode document.execCommand('copy') kopiert den aktuell ausgewählten Inhalt in die Zwischenablage.

3. Wie viele Millisekunden zum Schlafen

/**
 * Schlafen Sie für xxxms
 * @param {Number} Millisekunden
 */
Exportfunktion Schlaf (ms) {
    gib ein neues Promise zurück(auflösen => setTimeout(auflösen, ms))
}

//Verwendung const fetchData=async()=>{
 warte auf Schlaf (1000)
}

4. Generieren Sie eine zufällige Zeichenfolge

/**
 * Generieren Sie eine zufällige ID
 * @param {*} Länge
 * @param {*} Zeichen
 */
Exportfunktion UUID (Länge, Zeichen) {
    Zeichen =
        Zeichen ||
        „0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ“
    Länge = Länge || 8
    var Ergebnis = ''
    für (var i = Länge; i > 0; --i)
        Ergebnis += Zeichen[Math.floor(Math.random() * Zeichen.Länge)]
    Ergebnis zurückgeben
}

Anwendung:

//Der erste Parameter gibt die Anzahl der Ziffern an, und der zweite String gibt die Zeichen an. Beide sind optionale Parameter. Wenn keiner übergeben wird, wird standardmäßig eine 8-Bit-UUID generiert.()  

Anwendungsszenario: Wird verwendet, um zufällige IDs auf dem Frontend zu generieren. Schließlich müssen sowohl Vue als auch React jetzt Schlüssel binden.

5. Einfaches Deep Copy

/**
 *tiefe Kopie* @export
 * @param {*} Objekt
 * @returns
 */
Exportfunktion deepCopy(obj) {
    wenn (Typ des Objekts != 'Objekt') {
        Rückgabeobjekt
    }
    wenn (Objekt == null) {
        Rückgabeobjekt
    }
    gibt JSON.parse(JSON.stringify(obj)) zurück
}

Nachteil: Kopiert nur Objekte, Arrays und Arrays von Objekten, was für die meisten Szenarien ausreichend ist

const person={name:'xiaoming',child:{name:'Jack'}}
deepCopy(person) //neue Person

6. Array-Deduplizierung

/**
 * Array-Deduplizierung* @param {*} arr
 */
Exportfunktion uniqueArray(arr) {
    wenn (!Array.isArray(arr)) {
        throw new Error('Der erste Parameter muss ein Array sein')
    }
    wenn (arr.length == 1) {
        Rückflug an
    }
    zurückgeben [...neues Set(arr)]
}

Das Prinzip besteht darin, die Eigenschaft auszunutzen, dass im Set

einzigartigesArray([1,1,1,1,1]) // [1]

7. Objekt in FormData-Objekt konvertiert

/**
 * Objekt in Formulardaten konvertiert
 * @param {Object} Objekt
 */

 Exportfunktion getFormData(Objekt) {
    const formData = new FormData()
    Objekt.Schlüssel(Objekt).fürJeden(Schlüssel => {
        Konstantwert = Objekt[Schlüssel]
        wenn (Array.isArray(Wert)) {
            Wert.fürJeden((Teilwert, i) =>
                formData.append(Schlüssel + `[${i}]`, Teilwert)
            )
        } anders {
            formData.append(Schlüssel, Objekt[Schlüssel])
        }
    })
    RücksendeformularDaten
}

Anwendungsszenario: Beim Hochladen einer Datei müssen wir ein neues FormData Objekt erstellen und dann so oft append , wie Parameter vorhanden sind. Die Verwendung dieser Funktion kann die Logik vereinfachen

Anwendung:

lass req={
    Datei:xxx,
    Benutzer-ID: 1,
    Telefon:'15198763636',
    //...
}
holen(getFormData(req))

8. Beschränken Sie sich auf n Dezimalstellen

// Wie viele Dezimalstellen sollen beibehalten werden? Der Standardwert ist 2. export function cutNumber(number, no = 2) {
    wenn (Typ der Zahl != 'Zahl') {
        Zahl = Zahl(Zahl)
    }
    returniere Zahl(Zahl.toFixed(nein))
}

Anwendungsszenario: JS Gleitkommazahlen sind zu lang und manchmal müssen bei der Anzeige der Seite zwei Dezimalstellen beibehalten werden

Abschluss:

Dies ist das Ende dieses Artikels über wichtige JavaScript Codefragmente für Projekte. Weitere Inhalte zu wichtigen JavaScript Codefragmenten für Projekte 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!

Das könnte Sie auch interessieren:
  • Effektives Java (Ausnahmebehandlung)
  • Mono für Android implementiert effiziente Navigation (Effective Navigation)
  • Effektives C# Verwenden Sie Memberinitialisierer anstelle von Zuweisungsanweisungen
  • So ermitteln Sie, ob die Werte vom Typ Integer in Java gleich sind
  • Spezifische Verwendung der Java-Drittanbieterbibliothek JodaTime
  • Allgemeine Array-Operationen in JavaScript
  • Zusammenfassung der Anwendung von Effective Java in der Arbeit

<<:  MySQL 8.0.21 Installationstutorial mit Bildern und Text

>>:  Detaillierte Erklärung des von Ubuntu 20.04 gemeldeten Serviceproblems bei Verwendung von Xshell über eine SSH-Verbindung

Artikel empfehlen

So konfigurieren Sie die Basic Auth-Anmeldeauthentifizierung in Nginx

Manchmal erstellen wir einen Dateiserver über ngi...

So konfigurieren Sie MGR Single Master und mehrere Slaves in MySQL 8.0.15

1. Einleitung MySQL Group Replication (kurz MGR) ...

Detaillierte Erklärung der Ansichten in MySQL

Sicht: Ansichten in MySQL haben viele Ähnlichkeit...

Detaillierte Erläuterung der Verwendung des Linux-Befehls seq

01. Befehlsübersicht Der Befehl „seq“ wird verwen...

Warum Google und Facebook Docker nicht verwenden

Der Grund für das Schreiben dieses Artikels beste...

So ändern Sie das Standardnetzwerksegment der Docker0-Brücke in Docker

1. Hintergrund Wenn der Docker-Dienst gestartet w...

Der visuelle Designpfad der Website sollte den Benutzergewohnheiten entsprechen

Cooper sprach über den visuellen Pfad des Benutze...

Funktionen in TypeScript

Inhaltsverzeichnis 1. Funktionsdefinition 1.1 Fun...

Mysql löst das N+1-Abfrageproblem der Datenbank

Einführung In Orm-Frameworks wie Hibernate und My...

Beispiele für die Verwendung von DD DT DL-Tags

Normalerweise verwenden wir die Tags <ul><...

Verwendung von „Select“, „Distinct“ und „Limit“ in MySQL

Inhaltsverzeichnis 1. Einleitung 2. auswählen 2.1...

Verbesserung der Wirkung von Hyperlinks im Webdesign und in der Produktion

Hyperlinks ermöglichen es Benutzern, sofort von ei...