Heute werde ich einige seltene, aber nützliche JS-Techniken teilen

1. Zurück-Button

Verwenden Sie history.back(), um eine „Zurück“-Schaltfläche im Browser zu erstellen.

<button onclick="verlauf.zurück()">
    Zurück</button>

2. Zahlentrennzeichen

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

const großeZahl = 1_000_000_000;

console.log(großeZahl); // 1000000000

3. Event-Listener werden nur einmal ausgeführt

Wenn Sie einen Ereignis-Listener 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
});

4. console.log-Variablen-Wrapper

Wenn Sie console.log() ausführen, schließen Sie die Parameter in geschweifte Klammern ein, damit Sie sowohl den Variablennamen als auch den Variablenwert sehen können.

5. Holen Sie sich den minimalen/maximalen Wert aus einem Array

Sie können Math.min() oder Math.max() mit dem Spread-Operator verwenden, um den minimalen oder maximalen Wert in einem Array zu finden.

Konstante Zahlen = [6, 8, 1, 3, 9];

console.log(Math.max(...Zahlen)); // 9
console.log(Math.min(...Zahlen)); // 1

6. Überprüfen Sie, ob die Feststelltaste aktiviert ist

Sie können KeyboardEvent.getModifierState() verwenden, um festzustellen, ob die Feststelltaste aktiviert ist.

const passwordInput = document.getElementById('passwort');

passwordInput.addEventListener('keyup', Funktion (Ereignis) {
    wenn (event.getModifierState('CapsLock')) {
        // Feststelltaste ist bereits aktiviert }
});    

7. In die Zwischenablage kopieren

Sie können die Clipboard-API verwenden, um eine Funktion zum „In die Zwischenablage kopieren“ zu erstellen:

Funktion InZwischenablage kopieren(Text) {
    navigator.clipboard.writeText(text);
}

8. Holen Sie sich die Mausposition

Sie können die Eigenschaften clientX und clientY des MouseEvent-Objekts verwenden, um die aktuellen Koordinateninformationen der Mausposition abzurufen.

document.addEventListener('Mausbewegung', (e) => {
    console.log(`Maus X: ${e.clientX}, Maus Y: ${e.clientY}`);
});

9. Kürzen Sie das Array

Sie können die Längeneigenschaft festlegen, um das Array zu verkürzen.

Konstante Zahlen = [1, 2, 3, 4, 5]

Zahlen.Länge = 3;

console.log(Zahlen); // [1, 2, 3]   

10. Abgekürzte bedingte Anweisungen

Wenn Sie eine Funktion nur ausführen möchten, wenn eine Bedingung erfüllt ist, können Sie die Abkürzung && verwenden.

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

// Kurzbedingung && doSomething();   

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

Grammatik:

// [] bezieht sich auf die optionalen Parameter console.table(data [, columns]);

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:

// Ein Array von Objekten, drucke nur den Vornamen
Funktion Person(Vorname, Nachname) {
    this.firstName = Vorname;
    this.lastName = Nachname;
}

const john = neue Person("John", "Smith");
const jane = neue Person("Jane", "Doe");
const emily = neue Person("Emily", "Jones");

console.table([john, jane, emily], ["Vorname"]);

Das Druckergebnis sieht wie folgt aus:

12. Array-Deduplizierung

Konstante Zahlen = [2, 3, 4, 4, 2];

console.log([...neues Set(Zahlen)]); // [2, 3, 4]  

13. Konvertieren Sie eine Zeichenfolge in eine Zahl

const str = "404";

console.log(+str) // 404;   

14. Konvertieren Sie eine Zahl in eine Zeichenfolge

Verkettet eine leere Zeichenfolge.

const meineNummer = 403;

console.log(meineNummer + ''); // '403'    

15. Alle falschen Werte aus einem Array filtern

const myArray = [1, undefiniert, NaN, 2, null, '@denicmarko', wahr, 3, falsch];

console.log(myArray.filter(Boolean)); // [1, 2, "@denicmarko", true, 3]     

16. Die Nutzung umfasst

const myTech = "JavaScript";
const techs = ['HTML', 'CSS', 'JavaScript'];

// Normale Schreibweise if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // etwas tun
}

// schließt Syntax ein, wenn (techs.includes(myTech)) {
    // etwas tun 
}           

17. Verwenden Sie „Reduce“, um ein Array zu summieren

const meinArray = [10, 20, 30, 40];
const Reducer = (Gesamt, aktueller Wert) => Gesamt + aktueller Wert;

Konsole.log(meinArray.reduce(Reducer)); // 100     

18. console.log() Stil

Wussten Sie, dass Sie die console.log-Ausgabe in DevTools mit CSS-Anweisungen formatieren können:

19. Elementdatensatz

Verwenden Sie das Dataset-Attribut, um auf benutzerdefinierte Datenattribute ( data-* ) eines Elements zuzugreifen:

<div id="Benutzer" data-name="John Doe" data-age="29" data-something="Einige Daten">
    Max Mustermann
</div>

<Skript>
    const Benutzer = document.getElementById('Benutzer');
  
    Konsole.log(Benutzer.Datensatz); 
    // { Name: "John Doe", Alter: "29", etwas: "Einige Daten" }
  
    console.log(Benutzer.Datensatz.Name); // "John Doe"
    console.log(Benutzer.Datensatz.Alter); // "29"
    console.log(user.dataset.something); // "Einige Daten"
</Skript>  

Damit ist der Artikel über das Teilen einiger seltener, aber sehr nützlicher JS-Tipps heute abgeschlossen. Weitere relevante JS-Tipps finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!