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

MySQL-Abfragebaumstrukturmethode

Inhaltsverzeichnis MySQL-Abfragebaumstruktur 1. Ü...

Eine kurze Diskussion zum Erstellen eines Clusters in nodejs

Inhaltsverzeichnis Cluster-Cluster Clusterdetails...

HTML-Tutorial: Definitionsliste

<br />Originaltext: http://andymao.com/andy/...

Erläuterung der Truncate Table-Verwendung

TRUNCATE-TABELLE Löscht alle Zeilen in einer Tabe...

So ändern Sie die Server-UUID in MySQL

Quelle des Problems: Wenn der Slave-Server der ge...