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

Bootstrap 3.0 Studiennotizen Grid-System-Fall

Vorwort Im vorherigen Artikel haben wir hauptsäch...

Einrichten von VMware vSphere in VMware Workstation (Grafisches Tutorial)

VMware vSphere ist die branchenführende und zuver...

Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung

Korrespondenz zwischen Flutter und CSS im Shadow-...

960 Grid System – Grundprinzipien und Verwendung

Natürlich gibt es auch viele Leute, die die gegent...

Beispielcode für die Codevorlage für die Linux C-Protokollausgabe

Vorwort Dieser Artikel stellt hauptsächlich den r...

Vue + Element realisiert Paging-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

MySQL-Limit-Leistungsanalyse und -Optimierung

1. Fazit Syntax: Limit-Offset, Zeilen Schlussfolg...

CSS3-Beispielcode zum Erreichen einer Elementbogenbewegung

So verwenden Sie CSS, um die Bogenbewegung von El...

Prometheus überwacht MySQL mithilfe der Grafana-Anzeige

Inhaltsverzeichnis Prometheus überwacht MySQL übe...