Teilen Sie einige ungewöhnliche, aber nützliche JS-Techniken

Vorwort

Programmiersprachen enthalten normalerweise verschiedene versteckte Tricks, und der gekonnte Einsatz dieser Tricks kann die Entwicklungseffizienz verbessern. JavaScript ist eine hochtechnische Sprache. Die Beherrschung gängiger Grammatiktechniken kann nicht nur Ihr Verständnis der Sprachfunktionen vertiefen, sondern auch den Code vereinfachen und die Codierungseffizienz verbessern.

Hier ist eine Liste mit einigen nützlichen JavaScript-Tipps, die Ihnen meiner Meinung nach eines Tages hilfreich sein werden.

1. Array-Deduplizierung

Konstante Zahlen = [1, 2, 3, 4, 4, 1]
console.log([...neues Set(Zahlen)]) // [1, 2, 3, 4]

2. Filtern Sie alle falschen Werte aus dem Array

const myArray = [1, undefiniert, null, 2, NaN, wahr, falsch, 3]
console.log(meinArray.filter(Boolean)) // [1, 2, true, 3]

3. Konvertieren Sie eine Zeichenfolge in eine Zahl

const str = "123"
Konstante Nummer = +str
console.log(Typ von num) // Nummer

4. Zahlen in Zeichenfolgen umwandeln

Konstantennummer = 123;
console.log(num + ''); // '123'

5. Verwenden Sie das Symbol &&, um bedingte Anweisungen abzukürzen

// Normales Schreiben if (Bedingung) {
    tuEtwas()
}

// Abkürzung für Bedingung && tuSomething()

6. console.table() druckt eine Tabelle in einem bestimmten Format

// [] bezieht sich auf optionale Parameter\
konsole.tabelle(daten [, spalten]);

Parameter:

• Daten gibt die anzuzeigenden Daten an. Muss ein Array oder Objekt sein.
• Spalten stellen ein Array dar, das die Namen der Spalten enthält.

Beispiele:

Funktion Ware(Name, Preis) {
    dieser.name = Name
    this.price = Preis
}

const book = new Ware("《Webpack – Erste Schritte bis zum Abbruch》", "¥ 9,00")
const knowledge = new Goods("《Front-End-Selbstkultivierung》", "¥ 99,00")
const ebook = neue Waren("node.js-Kurs", "¥ 199,00")

console.table([Buch, Wissen, E-Book], ["Name", "Preis"])

Druckergebnisse:

7. Wenn Sie einen Ereignislistener hinzufügen und ihn nur einmal ausführen möchten, können Sie die Option „once“ verwenden:

element.addEventListener('click', () => console.log('Ich führe es nur einmal aus'), {
    einmal: wahr
});

8. Um die Lesbarkeit von Zahlen zu verbessern, können Sie Unterstriche als Trennzeichen verwenden:

Konstante Nummer = 2_000_000_000
console.log(num) // 2000000000

9. Verwenden Sie das Dataset-Attribut, um auf die benutzerdefinierten Datenattribute des Elements zuzugreifen (data-*):

<div id="Karte" Datenname="FE" Datennummer="5" Datenlabel="ListeKarte">
    Karteninformationen</div>

<Skript>
    const el = document.getElementById('Karte')

    Konsole.log(el.dataset)
    // { Name: "FE", Nummer: "5", Bezeichnung: "listCard" }

      console.log(el.dataset.name) // "FE"
    Konsole.log(el.dataset.number) // "5"
    console.log(el.dataset.label) // "Listenkarte"
</Skript>

Zusammenfassen

Dies ist das Ende dieses Artikels über praktische JS-Kenntnisse. Weitere relevante praktische JS-Kenntnisse 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!